From b49c510e2975e8b5e0cedea23b8c71c441a5176a Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 16:39:13 +0200
Subject: [PATCH 01/13] docs: wire up compiler/runtime warnigns/errors

---
 .../svelte/98-reference/30-compiler-errors.md | 949 ++++++++++++++++++
 .../98-reference/30-compiler-warnings.md      | 523 ++++++++++
 .../svelte/98-reference/30-runtime-errors.md  | 163 +++
 .../98-reference/30-runtime-warnings.md       | 115 +++
 apps/svelte.dev/src/hooks.server.js           |   3 +-
 apps/svelte.dev/src/routes/docs/+page.svelte  |   2 +-
 6 files changed, 1753 insertions(+), 2 deletions(-)
 create mode 100644 apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
 create mode 100644 apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
 create mode 100644 apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
 create mode 100644 apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
new file mode 100644
index 0000000000..ebcaa28ef8
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -0,0 +1,949 @@
+---
+title: 'Compiler Errors'
+generated: 'generated by process-messages/index.js'
+---
+
+## options_invalid_value
+
+```
+Invalid compiler option: %details%
+```
+
+## options_removed
+
+```
+Invalid compiler option: %details%
+```
+
+## options_unrecognised
+
+```
+Unrecognised compiler option %keypath%
+```
+
+## bindable_invalid_location
+
+```
+`$bindable()` can only be used inside a `$props()` declaration
+```
+
+## constant_assignment
+
+```
+Cannot assign to %thing%
+```
+
+## constant_binding
+
+```
+Cannot bind to %thing%
+```
+
+## declaration_duplicate
+
+```
+`%name%` has already been declared
+```
+
+## declaration_duplicate_module_import
+
+```
+Cannot declare a variable with the same name as an import inside `<script module>`
+```
+
+## derived_invalid_export
+
+```
+Cannot export derived state from a module. To expose the current derived value, export a function returning its value
+```
+
+## dollar_binding_invalid
+
+```
+The $ name is reserved, and cannot be used for variables and imports
+```
+
+## dollar_prefix_invalid
+
+```
+The $ prefix is reserved, and cannot be used for variables and imports
+```
+
+## each_item_invalid_assignment
+
+```
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+```
+
+## effect_invalid_placement
+
+```
+`$effect()` can only be used as an expression statement
+```
+
+## global_reference_invalid
+
+```
+`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
+```
+
+## host_invalid_placement
+
+```
+`$host()` can only be used inside custom element component instances
+```
+
+## import_svelte_internal_forbidden
+
+```
+Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
+```
+
+## invalid_arguments_usage
+
+```
+The arguments keyword cannot be used within the template or at the top level of a component
+```
+
+## legacy_export_invalid
+
+```
+Cannot use `export let` in runes mode — use `$props()` instead
+```
+
+## legacy_props_invalid
+
+```
+Cannot use `$$props` in runes mode
+```
+
+## legacy_reactive_statement_invalid
+
+```
+`$:` is not allowed in runes mode, use `$derived` or `$effect` instead
+```
+
+## legacy_rest_props_invalid
+
+```
+Cannot use `$$restProps` in runes mode
+```
+
+## module_illegal_default_export
+
+```
+A component cannot have a default export
+```
+
+## props_duplicate
+
+```
+Cannot use `$props()` more than once
+```
+
+## props_illegal_name
+
+```
+Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)
+```
+
+## props_invalid_identifier
+
+```
+`$props()` can only be used with an object destructuring pattern
+```
+
+## props_invalid_pattern
+
+```
+`$props()` assignment must not contain nested properties or computed keys
+```
+
+## props_invalid_placement
+
+```
+`$props()` can only be used at the top level of components as a variable declaration initializer
+```
+
+## reactive_declaration_cycle
+
+```
+Cyclical dependency detected: %cycle%
+```
+
+## rune_invalid_arguments
+
+```
+`%rune%` cannot be called with arguments
+```
+
+## rune_invalid_arguments_length
+
+```
+`%rune%` must be called with %args%
+```
+
+## rune_invalid_computed_property
+
+```
+Cannot access a computed property of a rune
+```
+
+## rune_invalid_name
+
+```
+`%name%` is not a valid rune
+```
+
+## rune_invalid_usage
+
+```
+Cannot use `%rune%` rune in non-runes mode
+```
+
+## rune_missing_parentheses
+
+```
+Cannot use rune without parentheses
+```
+
+## rune_removed
+
+```
+The `%name%` rune has been removed
+```
+
+## rune_renamed
+
+```
+`%name%` is now `%replacement%`
+```
+
+## runes_mode_invalid_import
+
+```
+%name% cannot be used in runes mode
+```
+
+## snippet_parameter_assignment
+
+```
+Cannot reassign or bind to snippet parameter
+```
+
+## state_invalid_export
+
+```
+Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
+```
+
+## state_invalid_placement
+
+```
+`%rune%(...)` can only be used as a variable declaration initializer or a class field
+```
+
+## store_invalid_scoped_subscription
+
+```
+Cannot subscribe to stores that are not declared at the top level of the component
+```
+
+## store_invalid_subscription
+
+```
+Cannot reference store value inside `<script module>`
+```
+
+## store_invalid_subscription_module
+
+```
+Cannot reference store value outside a `.svelte` file
+```
+
+Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
+
+## typescript_invalid_feature
+
+```
+TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
+```
+
+## css_empty_declaration
+
+```
+Declaration cannot be empty
+```
+
+## css_expected_identifier
+
+```
+Expected a valid CSS identifier
+```
+
+## css_global_block_invalid_combinator
+
+```
+A `:global` selector cannot follow a `%name%` combinator
+```
+
+## css_global_block_invalid_declaration
+
+```
+A top-level `:global {...}` block can only contain rules, not declarations
+```
+
+## css_global_block_invalid_list
+
+```
+A `:global` selector cannot be part of a selector list with more than one item
+```
+
+## css_global_block_invalid_modifier
+
+```
+A `:global` selector cannot modify an existing selector
+```
+
+## css_global_block_invalid_modifier_start
+
+```
+A `:global` selector can only be modified if it is a descendant of other selectors
+```
+
+## css_global_invalid_placement
+
+```
+`:global(...)` can be at the start or end of a selector sequence, but not in the middle
+```
+
+## css_global_invalid_selector
+
+```
+`:global(...)` must contain exactly one selector
+```
+
+## css_global_invalid_selector_list
+
+```
+`:global(...)` must not contain type or universal selectors when used in a compound selector
+```
+
+## css_nesting_selector_invalid_placement
+
+```
+Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
+```
+
+## css_selector_invalid
+
+```
+Invalid selector
+```
+
+## css_type_selector_invalid_placement
+
+```
+`:global(...)` must not be followed by a type selector
+```
+
+## animation_duplicate
+
+```
+An element can only have one 'animate' directive
+```
+
+## animation_invalid_placement
+
+```
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
+```
+
+## animation_missing_key
+
+```
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?
+```
+
+## attribute_contenteditable_dynamic
+
+```
+'contenteditable' attribute cannot be dynamic if element uses two-way binding
+```
+
+## attribute_contenteditable_missing
+
+```
+'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
+```
+
+## attribute_duplicate
+
+```
+Attributes need to be unique
+```
+
+## attribute_empty_shorthand
+
+```
+Attribute shorthand cannot be empty
+```
+
+## attribute_invalid_event_handler
+
+```
+Event attribute must be a JavaScript expression, not a string
+```
+
+## attribute_invalid_multiple
+
+```
+'multiple' attribute must be static if select uses two-way binding
+```
+
+## attribute_invalid_name
+
+```
+'%name%' is not a valid attribute name
+```
+
+## attribute_invalid_sequence_expression
+
+```
+Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+```
+
+## attribute_invalid_type
+
+```
+'type' attribute must be a static text value if input uses two-way binding
+```
+
+## attribute_unquoted_sequence
+
+```
+Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
+```
+
+## bind_invalid_expression
+
+```
+Can only bind to an Identifier or MemberExpression
+```
+
+## bind_invalid_name
+
+```
+`bind:%name%` is not a valid binding
+```
+```
+`bind:%name%` is not a valid binding. %explanation%
+```
+
+## bind_invalid_target
+
+```
+`bind:%name%` can only be used with %elements%
+```
+
+## bind_invalid_value
+
+```
+Can only bind to state or props
+```
+
+## block_duplicate_clause
+
+```
+%name% cannot appear more than once within a block
+```
+
+## block_invalid_continuation_placement
+
+```
+{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
+```
+
+## block_invalid_elseif
+
+```
+'elseif' should be 'else if'
+```
+
+## block_invalid_placement
+
+```
+{#%name% ...} block cannot be %location%
+```
+
+## block_unclosed
+
+```
+Block was left open
+```
+
+## block_unexpected_character
+
+```
+Expected a `%character%` character immediately following the opening bracket
+```
+
+## block_unexpected_close
+
+```
+Unexpected block closing tag
+```
+
+## component_invalid_directive
+
+```
+This type of directive is not valid on components
+```
+
+## const_tag_cycle
+
+```
+Cyclical dependency detected: %cycle%
+```
+
+## const_tag_invalid_expression
+
+```
+{@const ...} must consist of a single variable declaration
+```
+
+## const_tag_invalid_placement
+
+```
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+```
+
+## debug_tag_invalid_arguments
+
+```
+{@debug ...} arguments must be identifiers, not arbitrary expressions
+```
+
+## directive_invalid_value
+
+```
+Directive value must be a JavaScript expression enclosed in curly braces
+```
+
+## directive_missing_name
+
+```
+`%type%` name cannot be empty
+```
+
+## element_invalid_closing_tag
+
+```
+`</%name%>` attempted to close an element that was not open
+```
+
+## element_invalid_closing_tag_autoclosed
+
+```
+`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)
+```
+
+## element_unclosed
+
+```
+`<%name%>` was left open
+```
+
+## event_handler_invalid_component_modifier
+
+```
+Event modifiers other than 'once' can only be used on DOM elements
+```
+
+## event_handler_invalid_modifier
+
+```
+Valid event modifiers are %list%
+```
+
+## event_handler_invalid_modifier_combination
+
+```
+The '%modifier1%' and '%modifier2%' modifiers cannot be used together
+```
+
+## expected_attribute_value
+
+```
+Expected attribute value
+```
+
+## expected_block_type
+
+```
+Expected 'if', 'each', 'await', 'key' or 'snippet'
+```
+
+## expected_identifier
+
+```
+Expected an identifier
+```
+
+## expected_pattern
+
+```
+Expected identifier or destructure pattern
+```
+
+## expected_token
+
+```
+Expected token %token%
+```
+
+## expected_whitespace
+
+```
+Expected whitespace
+```
+
+## js_parse_error
+
+```
+%message%
+```
+
+## let_directive_invalid_placement
+
+```
+`let:` directive at invalid position
+```
+
+## mixed_event_handler_syntaxes
+
+```
+Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
+```
+
+## node_invalid_placement
+
+```
+%thing% is invalid inside `<%parent%>`
+```
+
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
+- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
+
+## render_tag_invalid_call_expression
+
+```
+Calling a snippet function using apply, bind or call is not allowed
+```
+
+## render_tag_invalid_expression
+
+```
+`{@render ...}` tags can only contain call expressions
+```
+
+## render_tag_invalid_spread_argument
+
+```
+cannot use spread arguments in `{@render ...}` tags
+```
+
+## script_duplicate
+
+```
+A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
+```
+
+## script_invalid_attribute_value
+
+```
+If the `%name%` attribute is supplied, it must be a boolean attribute
+```
+
+## script_invalid_context
+
+```
+If the context attribute is supplied, its value must be "module"
+```
+
+## script_reserved_attribute
+
+```
+The `%name%` attribute is reserved and cannot be used
+```
+
+## slot_attribute_duplicate
+
+```
+Duplicate slot name '%name%' in <%component%>
+```
+
+## slot_attribute_invalid
+
+```
+slot attribute must be a static value
+```
+
+## slot_attribute_invalid_placement
+
+```
+Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
+```
+
+## slot_default_duplicate
+
+```
+Found default slot content alongside an explicit slot="default"
+```
+
+## slot_element_invalid_attribute
+
+```
+`<slot>` can only receive attributes and (optionally) let directives
+```
+
+## slot_element_invalid_name
+
+```
+slot attribute must be a static value
+```
+
+## slot_element_invalid_name_default
+
+```
+`default` is a reserved word — it cannot be used as a slot name
+```
+
+## slot_snippet_conflict
+
+```
+Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely
+```
+
+## snippet_conflict
+
+```
+Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
+```
+
+## snippet_invalid_rest_parameter
+
+```
+Snippets do not support rest parameters; use an array instead
+```
+
+## snippet_shadowing_prop
+
+```
+This snippet is shadowing the prop `%prop%` with the same name
+```
+
+## style_directive_invalid_modifier
+
+```
+`style:` directive can only use the `important` modifier
+```
+
+## style_duplicate
+
+```
+A component can have a single top-level `<style>` element
+```
+
+## svelte_body_illegal_attribute
+
+```
+`<svelte:body>` does not support non-event attributes or spread attributes
+```
+
+## svelte_component_invalid_this
+
+```
+Invalid component definition — must be an `{expression}`
+```
+
+## svelte_component_missing_this
+
+```
+`<svelte:component>` must have a 'this' attribute
+```
+
+## svelte_element_missing_this
+
+```
+`<svelte:element>` must have a 'this' attribute with a value
+```
+
+## svelte_fragment_invalid_attribute
+
+```
+`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive
+```
+
+## svelte_fragment_invalid_placement
+
+```
+`<svelte:fragment>` must be the direct child of a component
+```
+
+## svelte_head_illegal_attribute
+
+```
+`<svelte:head>` cannot have attributes nor directives
+```
+
+## svelte_meta_duplicate
+
+```
+A component can only have one `<%name%>` element
+```
+
+## svelte_meta_invalid_content
+
+```
+<%name%> cannot have children
+```
+
+## svelte_meta_invalid_placement
+
+```
+`<%name%>` tags cannot be inside elements or blocks
+```
+
+## svelte_meta_invalid_tag
+
+```
+Valid `<svelte:...>` tag names are %list%
+```
+
+## svelte_options_deprecated_tag
+
+```
+"tag" option is deprecated — use "customElement" instead
+```
+
+## svelte_options_invalid_attribute
+
+```
+`<svelte:options>` can only receive static attributes
+```
+
+## svelte_options_invalid_attribute_value
+
+```
+Value must be %list%, if specified
+```
+
+## svelte_options_invalid_customelement
+
+```
+"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+```
+
+## svelte_options_invalid_customelement_props
+
+```
+"props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
+```
+
+## svelte_options_invalid_customelement_shadow
+
+```
+"shadow" must be either "open" or "none"
+```
+
+## svelte_options_invalid_tagname
+
+```
+Tag name must be lowercase and hyphenated
+```
+
+See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
+
+## svelte_options_reserved_tagname
+
+```
+Tag name is reserved
+```
+
+See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
+
+## svelte_options_unknown_attribute
+
+```
+`<svelte:options>` unknown attribute '%name%'
+```
+
+## svelte_self_invalid_placement
+
+```
+`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components
+```
+
+## tag_invalid_name
+
+```
+Expected a valid element or component name. Components must have a valid variable name or dot notation expression
+```
+
+## tag_invalid_placement
+
+```
+{@%name% ...} tag cannot be %location%
+```
+
+## textarea_invalid_content
+
+```
+A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
+```
+
+## title_illegal_attribute
+
+```
+`<title>` cannot have attributes nor directives
+```
+
+## title_invalid_content
+
+```
+`<title>` can only contain text and {tags}
+```
+
+## transition_conflict
+
+```
+Cannot use `%type%:` alongside existing `%existing%:` directive
+```
+
+## transition_duplicate
+
+```
+Cannot use multiple `%type%:` directives on a single element
+```
+
+## unexpected_eof
+
+```
+Unexpected end of input
+```
+
+## unexpected_reserved_word
+
+```
+'%word%' is a reserved word in JavaScript and cannot be used here
+```
+
+## void_element_invalid_content
+
+```
+Void elements cannot have children or closing tags
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
new file mode 100644
index 0000000000..da87329157
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -0,0 +1,523 @@
+---
+title: 'Compiler Warnings'
+generated: 'generated by process-messages/index.js'
+---
+
+## a11y_accesskey
+
+```
+Avoid using accesskey
+```
+
+## a11y_aria_activedescendant_has_tabindex
+
+```
+An element with an aria-activedescendant attribute should have a tabindex value
+```
+
+## a11y_aria_attributes
+
+```
+`<%name%>` should not have aria-* attributes
+```
+
+## a11y_autocomplete_valid
+
+```
+'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
+```
+
+## a11y_autofocus
+
+```
+Avoid using autofocus
+```
+
+## a11y_click_events_have_key_events
+
+```
+Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+```
+
+## a11y_consider_explicit_label
+
+```
+Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+```
+
+## a11y_distracting_elements
+
+```
+Avoid `<%name%>` elements
+```
+
+## a11y_figcaption_index
+
+```
+`<figcaption>` must be first or last child of `<figure>`
+```
+
+## a11y_figcaption_parent
+
+```
+`<figcaption>` must be an immediate child of `<figure>`
+```
+
+## a11y_hidden
+
+```
+`<%name%>` element should not be hidden
+```
+
+## a11y_img_redundant_alt
+
+```
+Screenreaders already announce `<img>` elements as an image
+```
+
+## a11y_incorrect_aria_attribute_type
+
+```
+The value of '%attribute%' must be a %type%
+```
+
+## a11y_incorrect_aria_attribute_type_boolean
+
+```
+The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
+```
+
+## a11y_incorrect_aria_attribute_type_id
+
+```
+The value of '%attribute%' must be a string that represents a DOM element ID
+```
+
+## a11y_incorrect_aria_attribute_type_idlist
+
+```
+The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
+```
+
+## a11y_incorrect_aria_attribute_type_integer
+
+```
+The value of '%attribute%' must be an integer
+```
+
+## a11y_incorrect_aria_attribute_type_token
+
+```
+The value of '%attribute%' must be exactly one of %values%
+```
+
+## a11y_incorrect_aria_attribute_type_tokenlist
+
+```
+The value of '%attribute%' must be a space-separated list of one or more of %values%
+```
+
+## a11y_incorrect_aria_attribute_type_tristate
+
+```
+The value of '%attribute%' must be exactly one of true, false, or mixed
+```
+
+## a11y_interactive_supports_focus
+
+```
+Elements with the '%role%' interactive role must have a tabindex value
+```
+
+## a11y_invalid_attribute
+
+```
+'%href_value%' is not a valid %href_attribute% attribute
+```
+
+## a11y_label_has_associated_control
+
+```
+A form label must be associated with a control
+```
+
+## a11y_media_has_caption
+
+```
+`<video>` elements must have a `<track kind="captions">`
+```
+
+## a11y_misplaced_role
+
+```
+`<%name%>` should not have role attribute
+```
+
+## a11y_misplaced_scope
+
+```
+The scope attribute should only be used with `<th>` elements
+```
+
+## a11y_missing_attribute
+
+```
+`<%name%>` element should have %article% %sequence% attribute
+```
+
+## a11y_missing_content
+
+```
+`<%name%>` element should contain text
+```
+
+## a11y_mouse_events_have_key_events
+
+```
+'%event%' event must be accompanied by '%accompanied_by%' event
+```
+
+## a11y_no_abstract_role
+
+```
+Abstract role '%role%' is forbidden
+```
+
+## a11y_no_interactive_element_to_noninteractive_role
+
+```
+`<%element%>` cannot have role '%role%'
+```
+
+## a11y_no_noninteractive_element_interactions
+
+```
+Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners
+```
+
+## a11y_no_noninteractive_element_to_interactive_role
+
+```
+Non-interactive element `<%element%>` cannot have interactive role '%role%'
+```
+
+## a11y_no_noninteractive_tabindex
+
+```
+noninteractive element cannot have nonnegative tabIndex value
+```
+
+## a11y_no_redundant_roles
+
+```
+Redundant role '%role%'
+```
+
+## a11y_no_static_element_interactions
+
+```
+`<%element%>` with a %handler% handler must have an ARIA role
+```
+
+## a11y_positive_tabindex
+
+```
+Avoid tabindex values above zero
+```
+
+## a11y_role_has_required_aria_props
+
+```
+Elements with the ARIA role "%role%" must have the following attributes defined: %props%
+```
+
+## a11y_role_supports_aria_props
+
+```
+The attribute '%attribute%' is not supported by the role '%role%'
+```
+
+## a11y_role_supports_aria_props_implicit
+
+```
+The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`
+```
+
+## a11y_unknown_aria_attribute
+
+```
+Unknown aria attribute 'aria-%attribute%'
+```
+```
+Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
+```
+
+## a11y_unknown_role
+
+```
+Unknown role '%role%'
+```
+```
+Unknown role '%role%'. Did you mean '%suggestion%'?
+```
+
+## legacy_code
+
+```
+`%code%` is no longer valid — please use `%suggestion%` instead
+```
+
+## unknown_code
+
+```
+`%code%` is not a recognised code
+```
+```
+`%code%` is not a recognised code (did you mean `%suggestion%`?)
+```
+
+## options_deprecated_accessors
+
+```
+The `accessors` option has been deprecated. It will have no effect in runes mode
+```
+
+## options_deprecated_immutable
+
+```
+The `immutable` option has been deprecated. It will have no effect in runes mode
+```
+
+## options_missing_custom_element
+
+```
+The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
+```
+
+## options_removed_enable_sourcemap
+
+```
+The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
+```
+
+## options_removed_hydratable
+
+```
+The `hydratable` option has been removed. Svelte components are always hydratable now
+```
+
+## options_removed_loop_guard_timeout
+
+```
+The `loopGuardTimeout` option has been removed
+```
+
+## options_renamed_ssr_dom
+
+```
+`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
+```
+
+## export_let_unused
+
+```
+Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
+```
+
+## legacy_component_creation
+
+```
+Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
+```
+
+## non_reactive_update
+
+```
+`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
+```
+
+## perf_avoid_inline_class
+
+```
+Avoid 'new class' — instead, declare the class at the top level scope
+```
+
+## perf_avoid_nested_class
+
+```
+Avoid declaring classes below the top level scope
+```
+
+## reactive_declaration_invalid_placement
+
+```
+Reactive declarations only exist at the top level of the instance script
+```
+
+## reactive_declaration_module_script_dependency
+
+```
+Reassignments of module-level declarations will not cause reactive statements to update
+```
+
+## reactive_declaration_non_reactive_property
+
+```
+Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
+```
+
+## state_referenced_locally
+
+```
+State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+```
+
+## store_rune_conflict
+
+```
+It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
+```
+
+## css_unused_selector
+
+```
+Unused CSS selector "%name%"
+```
+
+## attribute_avoid_is
+
+```
+The "is" attribute is not supported cross-browser and should be avoided
+```
+
+## attribute_global_event_reference
+
+```
+You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
+```
+
+## attribute_illegal_colon
+
+```
+Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
+```
+
+## attribute_invalid_property_name
+
+```
+'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
+```
+
+## attribute_quoted
+
+```
+Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
+```
+
+## bind_invalid_each_rest
+
+```
+The rest operator (...) will create a new object and binding '%name%' with the original object will not work
+```
+
+## block_empty
+
+```
+Empty block
+```
+
+## component_name_lowercase
+
+```
+`<%name%>` will be treated as an HTML element unless it begins with a capital letter
+```
+
+## element_invalid_self_closing_tag
+
+```
+Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
+```
+
+## event_directive_deprecated
+
+```
+Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
+```
+
+## node_invalid_placement_ssr
+
+```
+%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+```
+
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
+- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
+
+This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
+
+## script_context_deprecated
+
+```
+`context="module"` is deprecated, use the `module` attribute instead
+```
+
+## script_unknown_attribute
+
+```
+Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+```
+
+## slot_element_deprecated
+
+```
+Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
+```
+
+## svelte_component_deprecated
+
+```
+`<svelte:component>` is deprecated in runes mode — components are dynamic by default
+```
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
+
+In some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
+
+For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
+
+```diff
+{#each items as item}
+-	<svelte:component this={item.condition ? Y : Z} />
++	{@const Component = item.condition ? Y : Z}
++	<Component />
+{/each}
+```
+
+A derived value may be used in other contexts:
+
+```diff
+<script>
+	...
+	let condition = $state(false);
++	const Component = $derived(condition ? Y : Z);
+</script>
+- <svelte:component this={condition ? Y : Z} />
++ <Component />
+```
+
+## svelte_element_invalid_this
+
+```
+`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
+```
+
+## svelte_self_deprecated
+
+```
+`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
new file mode 100644
index 0000000000..8c7b286a7b
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -0,0 +1,163 @@
+---
+title: 'Runtime Errors'
+generated: 'generated by process-messages/index.js'
+---
+
+## bind_invalid_checkbox_value
+
+```
+Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
+```
+
+## bind_invalid_export
+
+```
+Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
+```
+
+## bind_not_bindable
+
+```
+A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
+```
+
+## component_api_changed
+
+```
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+```
+
+## component_api_invalid_new
+
+```
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+```
+
+## derived_references_self
+
+```
+A derived value cannot reference itself recursively
+```
+
+## each_key_duplicate
+
+```
+Keyed each block has duplicate key at indexes %a% and %b%
+```
+```
+Keyed each block has duplicate key `%value%` at indexes %a% and %b%
+```
+
+## effect_in_teardown
+
+```
+`%rune%` cannot be used inside an effect cleanup function
+```
+
+## effect_in_unowned_derived
+
+```
+Effect cannot be created inside a `$derived` value that was not itself created inside an effect
+```
+
+## effect_orphan
+
+```
+`%rune%` can only be used inside an effect (e.g. during component initialisation)
+```
+
+## effect_update_depth_exceeded
+
+```
+Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+```
+
+## hydration_failed
+
+```
+Failed to hydrate the application
+```
+
+## invalid_snippet
+
+```
+Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
+```
+
+## lifecycle_legacy_only
+
+```
+`%name%(...)` cannot be used in runes mode
+```
+
+## props_invalid_value
+
+```
+Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
+```
+
+## props_rest_readonly
+
+```
+Rest element properties of `$props()` such as `%property%` are readonly
+```
+
+## rune_outside_svelte
+
+```
+The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
+```
+
+## state_descriptors_fixed
+
+```
+Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+```
+
+## state_prototype_fixed
+
+```
+Cannot set prototype of `$state` object
+```
+
+## state_unsafe_local_read
+
+```
+Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+```
+
+## state_unsafe_mutation
+
+```
+Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
+```
+
+## lifecycle_function_unavailable
+
+```
+`%name%(...)` is not available on the server
+```
+
+## invalid_default_snippet
+
+```
+Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
+```
+
+## lifecycle_outside_component
+
+```
+`%name%(...)` can only be used during component initialisation
+```
+
+## store_invalid_shape
+
+```
+`%name%` is not a store with a `subscribe` method
+```
+
+## svelte_element_invalid_this_value
+
+```
+The `this` prop on `<svelte:element>` must be a string, if defined
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
new file mode 100644
index 0000000000..c1c6ba2fb1
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -0,0 +1,115 @@
+---
+title: 'Runtime Warnings'
+generated: 'generated by process-messages/index.js'
+---
+
+## binding_property_non_reactive
+
+```
+`%binding%` is binding to a non-reactive property
+```
+```
+`%binding%` (%location%) is binding to a non-reactive property
+```
+
+## console_log_state
+
+```
+Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+```
+
+When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
+
+The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
+
+## event_handler_invalid
+
+```
+%handler% should be a function. Did you mean to %suggestion%?
+```
+
+## hydration_attribute_changed
+
+```
+The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
+```
+
+## hydration_html_changed
+
+```
+The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
+```
+```
+The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
+```
+
+## hydration_mismatch
+
+```
+Hydration failed because the initial UI does not match what was rendered on the server
+```
+```
+Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
+```
+
+## invalid_raw_snippet_render
+
+```
+The `render` function passed to `createRawSnippet` should return HTML for a single element
+```
+
+## lifecycle_double_unmount
+
+```
+Tried to unmount a component that was not mounted
+```
+
+## ownership_invalid_binding
+
+```
+%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+```
+
+## ownership_invalid_mutation
+
+```
+Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+```
+```
+%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+```
+
+## state_proxy_equality_mismatch
+
+```
+Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
+```
+
+`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
+
+```svelte
+<script>
+	let value = { foo: 'bar' };
+	let proxy = $state(value);
+
+	value === proxy; // always false
+</script>
+```
+
+To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
+
+## dynamic_void_element_content
+
+```
+`<svelte:element this="%tag%">` is a void element — it cannot have content
+```
+
+## state_snapshot_uncloneable
+
+```
+Value cannot be cloned with `$state.snapshot` — the original value was returned
+```
+```
+The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
+%properties%
+```
diff --git a/apps/svelte.dev/src/hooks.server.js b/apps/svelte.dev/src/hooks.server.js
index 6b194ed65e..0f78962d93 100644
--- a/apps/svelte.dev/src/hooks.server.js
+++ b/apps/svelte.dev/src/hooks.server.js
@@ -6,7 +6,8 @@ const mappings = new Map([
 	['/docs/special-tags', '/docs/svelte/basic-markup'], // TODO: find a new home for some of these?
 	['/docs/element-directives', '/docs/svelte/basic-markup'],
 	['/docs/component-directives', '/docs/svelte/component-fundamentals'],
-	['/docs/custom-elements-api', '/docs/svelte/custom-elements']
+	['/docs/custom-elements-api', '/docs/svelte/custom-elements'],
+	['/docs/accessibility-warnings', '/docs/svelte/compiler-warnings']
 ]);
 
 /** @type {import('@sveltejs/kit').Handle} */
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 6f00a685e0..fe860f0ed5 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -35,7 +35,7 @@
 		['run-time-svelte', 'svelte'],
 		['run-time', 'svelte'],
 		['compile-time', 'svelte-compiler'],
-		['accessibility-warnings', 'TODO']
+		['accessibility-warnings', 'compiler-warnings']
 	];
 
 	function get_url_to_redirect_to() {

From 1501e5bc805d5b646cb8e4c5ed778f98ee07d8b0 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 16:48:35 +0200
Subject: [PATCH 02/13] allow (and properly style) code blocks in headings

---
 apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte | 1 +
 packages/site-kit/src/lib/markdown/renderer.ts           | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index c90495b60e..4e6df3af8c 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -31,6 +31,7 @@
 
 	.page :global(:where(h2, h3) code) {
 		all: unset;
+		font-family: var(--sk-font-mono);
 	}
 
 	@media (min-width: 832px) {
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 694d258d19..73bed8fea7 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -269,10 +269,7 @@ export async function render_content_markdown(
 			headings[depth - 1] = slugify(raw);
 			headings.length = depth;
 			const slug = headings.filter(Boolean).join('-');
-			return `<h${depth} id="${slug}">${text.replace(
-				/<\/?code>/g,
-				''
-			)}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
+			return `<h${depth} id="${slug}">${text}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
 		},
 		code({ text }) {
 			return snippets.get(text);

From 4812715bd0f2a90120250811cd611a794f76c004 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 16:55:30 +0200
Subject: [PATCH 03/13] testbed

---
 .../docs/svelte/98-reference/30-compiler-errors.md       | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index ebcaa28ef8..0e602e4836 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -1,13 +1,11 @@
 ---
-title: 'Compiler Errors'
+title: 'Compiler errors'
 generated: 'generated by process-messages/index.js'
 ---
 
-## options_invalid_value
+## `options_invalid_value`
 
-```
-Invalid compiler option: %details%
-```
+> Invalid compiler option: %details%
 
 ## options_removed
 
@@ -436,6 +434,7 @@ Can only bind to an Identifier or MemberExpression
 ```
 `bind:%name%` is not a valid binding
 ```
+
 ```
 `bind:%name%` is not a valid binding. %explanation%
 ```

From cd17a13ba9002ce9edddc82a0cd6d313cdfd5e44 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Oct 2024 12:49:40 -0400
Subject: [PATCH 04/13] wire up correct branch

---
 .../svelte/98-reference/30-compiler-errors.md | 579 +++++++++---------
 .../98-reference/30-compiler-warnings.md      | 254 ++++----
 .../svelte/98-reference/30-runtime-errors.md  |  78 +--
 .../98-reference/30-runtime-warnings.md       |  38 +-
 apps/svelte.dev/scripts/sync-docs/index.ts    |   2 +-
 5 files changed, 476 insertions(+), 475 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 0e602e4836..14c2c05799 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -3,863 +3,858 @@ title: 'Compiler errors'
 generated: 'generated by process-messages/index.js'
 ---
 
-## `options_invalid_value`
-
-> Invalid compiler option: %details%
-
-## options_removed
+## `animation_duplicate`
 
 ```
-Invalid compiler option: %details%
+An element can only have one 'animate' directive
 ```
 
-## options_unrecognised
+## `animation_invalid_placement`
 
 ```
-Unrecognised compiler option %keypath%
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
 ```
 
-## bindable_invalid_location
+## `animation_missing_key`
 
 ```
-`$bindable()` can only be used inside a `$props()` declaration
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?
 ```
 
-## constant_assignment
+## `attribute_contenteditable_dynamic`
 
 ```
-Cannot assign to %thing%
+'contenteditable' attribute cannot be dynamic if element uses two-way binding
 ```
 
-## constant_binding
+## `attribute_contenteditable_missing`
 
 ```
-Cannot bind to %thing%
+'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
 ```
 
-## declaration_duplicate
+## `attribute_duplicate`
 
 ```
-`%name%` has already been declared
+Attributes need to be unique
 ```
 
-## declaration_duplicate_module_import
+## `attribute_empty_shorthand`
 
 ```
-Cannot declare a variable with the same name as an import inside `<script module>`
+Attribute shorthand cannot be empty
 ```
 
-## derived_invalid_export
+## `attribute_invalid_event_handler`
 
 ```
-Cannot export derived state from a module. To expose the current derived value, export a function returning its value
+Event attribute must be a JavaScript expression, not a string
 ```
 
-## dollar_binding_invalid
+## `attribute_invalid_multiple`
 
 ```
-The $ name is reserved, and cannot be used for variables and imports
+'multiple' attribute must be static if select uses two-way binding
 ```
 
-## dollar_prefix_invalid
+## `attribute_invalid_name`
 
 ```
-The $ prefix is reserved, and cannot be used for variables and imports
+'%name%' is not a valid attribute name
 ```
 
-## each_item_invalid_assignment
+## `attribute_invalid_sequence_expression`
 
 ```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
 ```
 
-## effect_invalid_placement
+## `attribute_invalid_type`
 
 ```
-`$effect()` can only be used as an expression statement
+'type' attribute must be a static text value if input uses two-way binding
 ```
 
-## global_reference_invalid
+## `attribute_unquoted_sequence`
 
 ```
-`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
+Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 ```
 
-## host_invalid_placement
+## `bind_invalid_expression`
 
 ```
-`$host()` can only be used inside custom element component instances
+Can only bind to an Identifier or MemberExpression
 ```
 
-## import_svelte_internal_forbidden
+## `bind_invalid_name`
 
 ```
-Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
+`bind:%name%` is not a valid binding
+```
+```
+`bind:%name%` is not a valid binding. %explanation%
 ```
 
-## invalid_arguments_usage
+## `bind_invalid_target`
 
 ```
-The arguments keyword cannot be used within the template or at the top level of a component
+`bind:%name%` can only be used with %elements%
 ```
 
-## legacy_export_invalid
+## `bind_invalid_value`
 
 ```
-Cannot use `export let` in runes mode — use `$props()` instead
+Can only bind to state or props
 ```
 
-## legacy_props_invalid
+## `bindable_invalid_location`
 
 ```
-Cannot use `$$props` in runes mode
+`$bindable()` can only be used inside a `$props()` declaration
 ```
 
-## legacy_reactive_statement_invalid
+## `block_duplicate_clause`
 
 ```
-`$:` is not allowed in runes mode, use `$derived` or `$effect` instead
+%name% cannot appear more than once within a block
 ```
 
-## legacy_rest_props_invalid
+## `block_invalid_continuation_placement`
 
 ```
-Cannot use `$$restProps` in runes mode
+{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
 ```
 
-## module_illegal_default_export
+## `block_invalid_elseif`
 
 ```
-A component cannot have a default export
+'elseif' should be 'else if'
 ```
 
-## props_duplicate
+## `block_invalid_placement`
 
 ```
-Cannot use `$props()` more than once
+{#%name% ...} block cannot be %location%
 ```
 
-## props_illegal_name
+## `block_unclosed`
 
 ```
-Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)
+Block was left open
 ```
 
-## props_invalid_identifier
+## `block_unexpected_character`
 
 ```
-`$props()` can only be used with an object destructuring pattern
+Expected a `%character%` character immediately following the opening bracket
 ```
 
-## props_invalid_pattern
+## `block_unexpected_close`
 
 ```
-`$props()` assignment must not contain nested properties or computed keys
+Unexpected block closing tag
 ```
 
-## props_invalid_placement
+## `component_invalid_directive`
 
 ```
-`$props()` can only be used at the top level of components as a variable declaration initializer
+This type of directive is not valid on components
 ```
 
-## reactive_declaration_cycle
+## `const_tag_cycle`
 
 ```
 Cyclical dependency detected: %cycle%
 ```
 
-## rune_invalid_arguments
+## `const_tag_invalid_expression`
 
 ```
-`%rune%` cannot be called with arguments
+{@const ...} must consist of a single variable declaration
 ```
 
-## rune_invalid_arguments_length
+## `const_tag_invalid_placement`
 
 ```
-`%rune%` must be called with %args%
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
 ```
 
-## rune_invalid_computed_property
+## `constant_assignment`
 
 ```
-Cannot access a computed property of a rune
+Cannot assign to %thing%
 ```
 
-## rune_invalid_name
+## `constant_binding`
 
 ```
-`%name%` is not a valid rune
+Cannot bind to %thing%
 ```
 
-## rune_invalid_usage
+## `css_empty_declaration`
 
 ```
-Cannot use `%rune%` rune in non-runes mode
+Declaration cannot be empty
 ```
 
-## rune_missing_parentheses
+## `css_expected_identifier`
 
 ```
-Cannot use rune without parentheses
+Expected a valid CSS identifier
 ```
 
-## rune_removed
+## `css_global_block_invalid_combinator`
 
 ```
-The `%name%` rune has been removed
+A `:global` selector cannot follow a `%name%` combinator
 ```
 
-## rune_renamed
+## `css_global_block_invalid_declaration`
 
 ```
-`%name%` is now `%replacement%`
+A top-level `:global {...}` block can only contain rules, not declarations
 ```
 
-## runes_mode_invalid_import
+## `css_global_block_invalid_list`
 
 ```
-%name% cannot be used in runes mode
+A `:global` selector cannot be part of a selector list with more than one item
 ```
 
-## snippet_parameter_assignment
+## `css_global_block_invalid_modifier`
 
 ```
-Cannot reassign or bind to snippet parameter
+A `:global` selector cannot modify an existing selector
 ```
 
-## state_invalid_export
+## `css_global_block_invalid_modifier_start`
 
 ```
-Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
+A `:global` selector can only be modified if it is a descendant of other selectors
 ```
 
-## state_invalid_placement
+## `css_global_invalid_placement`
 
 ```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
+`:global(...)` can be at the start or end of a selector sequence, but not in the middle
 ```
 
-## store_invalid_scoped_subscription
+## `css_global_invalid_selector`
 
 ```
-Cannot subscribe to stores that are not declared at the top level of the component
+`:global(...)` must contain exactly one selector
 ```
 
-## store_invalid_subscription
+## `css_global_invalid_selector_list`
 
 ```
-Cannot reference store value inside `<script module>`
+`:global(...)` must not contain type or universal selectors when used in a compound selector
 ```
 
-## store_invalid_subscription_module
+## `css_nesting_selector_invalid_placement`
 
 ```
-Cannot reference store value outside a `.svelte` file
+Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
 ```
 
-Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
-
-## typescript_invalid_feature
+## `css_selector_invalid`
 
 ```
-TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
+Invalid selector
 ```
 
-## css_empty_declaration
+## `css_type_selector_invalid_placement`
 
 ```
-Declaration cannot be empty
+`:global(...)` must not be followed by a type selector
 ```
 
-## css_expected_identifier
+## `debug_tag_invalid_arguments`
 
 ```
-Expected a valid CSS identifier
+{@debug ...} arguments must be identifiers, not arbitrary expressions
 ```
 
-## css_global_block_invalid_combinator
+## `declaration_duplicate`
 
 ```
-A `:global` selector cannot follow a `%name%` combinator
+`%name%` has already been declared
 ```
 
-## css_global_block_invalid_declaration
+## `declaration_duplicate_module_import`
 
 ```
-A top-level `:global {...}` block can only contain rules, not declarations
+Cannot declare a variable with the same name as an import inside `<script module>`
 ```
 
-## css_global_block_invalid_list
+## `derived_invalid_export`
 
 ```
-A `:global` selector cannot be part of a selector list with more than one item
+Cannot export derived state from a module. To expose the current derived value, export a function returning its value
 ```
 
-## css_global_block_invalid_modifier
+## `directive_invalid_value`
 
 ```
-A `:global` selector cannot modify an existing selector
+Directive value must be a JavaScript expression enclosed in curly braces
 ```
 
-## css_global_block_invalid_modifier_start
+## `directive_missing_name`
 
 ```
-A `:global` selector can only be modified if it is a descendant of other selectors
+`%type%` name cannot be empty
 ```
 
-## css_global_invalid_placement
+## `dollar_binding_invalid`
 
 ```
-`:global(...)` can be at the start or end of a selector sequence, but not in the middle
+The $ name is reserved, and cannot be used for variables and imports
 ```
 
-## css_global_invalid_selector
+## `dollar_prefix_invalid`
 
 ```
-`:global(...)` must contain exactly one selector
+The $ prefix is reserved, and cannot be used for variables and imports
 ```
 
-## css_global_invalid_selector_list
+## `each_item_invalid_assignment`
 
 ```
-`:global(...)` must not contain type or universal selectors when used in a compound selector
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
 ```
 
-## css_nesting_selector_invalid_placement
+## `effect_invalid_placement`
 
 ```
-Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
+`$effect()` can only be used as an expression statement
 ```
 
-## css_selector_invalid
+## `element_invalid_closing_tag`
 
 ```
-Invalid selector
+`</%name%>` attempted to close an element that was not open
 ```
 
-## css_type_selector_invalid_placement
+## `element_invalid_closing_tag_autoclosed`
 
 ```
-`:global(...)` must not be followed by a type selector
+`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)
 ```
 
-## animation_duplicate
+## `element_unclosed`
 
 ```
-An element can only have one 'animate' directive
+`<%name%>` was left open
 ```
 
-## animation_invalid_placement
+## `event_handler_invalid_component_modifier`
 
 ```
-An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
+Event modifiers other than 'once' can only be used on DOM elements
 ```
 
-## animation_missing_key
+## `event_handler_invalid_modifier`
 
 ```
-An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?
+Valid event modifiers are %list%
 ```
 
-## attribute_contenteditable_dynamic
+## `event_handler_invalid_modifier_combination`
 
 ```
-'contenteditable' attribute cannot be dynamic if element uses two-way binding
+The '%modifier1%' and '%modifier2%' modifiers cannot be used together
 ```
 
-## attribute_contenteditable_missing
+## `expected_attribute_value`
 
 ```
-'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
+Expected attribute value
 ```
 
-## attribute_duplicate
+## `expected_block_type`
 
 ```
-Attributes need to be unique
+Expected 'if', 'each', 'await', 'key' or 'snippet'
 ```
 
-## attribute_empty_shorthand
+## `expected_identifier`
 
 ```
-Attribute shorthand cannot be empty
+Expected an identifier
 ```
 
-## attribute_invalid_event_handler
+## `expected_pattern`
 
 ```
-Event attribute must be a JavaScript expression, not a string
+Expected identifier or destructure pattern
 ```
 
-## attribute_invalid_multiple
+## `expected_token`
 
 ```
-'multiple' attribute must be static if select uses two-way binding
+Expected token %token%
 ```
 
-## attribute_invalid_name
+## `expected_whitespace`
 
 ```
-'%name%' is not a valid attribute name
+Expected whitespace
 ```
 
-## attribute_invalid_sequence_expression
+## `global_reference_invalid`
 
 ```
-Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
 ```
 
-## attribute_invalid_type
+## `host_invalid_placement`
 
 ```
-'type' attribute must be a static text value if input uses two-way binding
+`$host()` can only be used inside custom element component instances
 ```
 
-## attribute_unquoted_sequence
+## `import_svelte_internal_forbidden`
 
 ```
-Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
+Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 ```
 
-## bind_invalid_expression
+## `invalid_arguments_usage`
 
 ```
-Can only bind to an Identifier or MemberExpression
+The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
-## bind_invalid_name
+## `js_parse_error`
 
 ```
-`bind:%name%` is not a valid binding
+%message%
 ```
 
+## `legacy_export_invalid`
+
 ```
-`bind:%name%` is not a valid binding. %explanation%
+Cannot use `export let` in runes mode — use `$props()` instead
 ```
 
-## bind_invalid_target
+## `legacy_props_invalid`
 
 ```
-`bind:%name%` can only be used with %elements%
+Cannot use `$$props` in runes mode
 ```
 
-## bind_invalid_value
+## `legacy_reactive_statement_invalid`
 
 ```
-Can only bind to state or props
+`$:` is not allowed in runes mode, use `$derived` or `$effect` instead
 ```
 
-## block_duplicate_clause
+## `legacy_rest_props_invalid`
 
 ```
-%name% cannot appear more than once within a block
+Cannot use `$$restProps` in runes mode
 ```
 
-## block_invalid_continuation_placement
+## `let_directive_invalid_placement`
 
 ```
-{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
+`let:` directive at invalid position
 ```
 
-## block_invalid_elseif
+## `mixed_event_handler_syntaxes`
 
 ```
-'elseif' should be 'else if'
+Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
 ```
 
-## block_invalid_placement
+## `module_illegal_default_export`
 
 ```
-{#%name% ...} block cannot be %location%
+A component cannot have a default export
 ```
 
-## block_unclosed
+## `node_invalid_placement`
 
 ```
-Block was left open
+%thing% is invalid inside `<%parent%>`
 ```
 
-## block_unexpected_character
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-```
-Expected a `%character%` character immediately following the opening bracket
-```
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
+- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
-## block_unexpected_close
+## `options_invalid_value`
 
 ```
-Unexpected block closing tag
+Invalid compiler option: %details%
 ```
 
-## component_invalid_directive
+## `options_removed`
 
 ```
-This type of directive is not valid on components
+Invalid compiler option: %details%
 ```
 
-## const_tag_cycle
+## `options_unrecognised`
 
 ```
-Cyclical dependency detected: %cycle%
+Unrecognised compiler option %keypath%
 ```
 
-## const_tag_invalid_expression
+## `props_duplicate`
 
 ```
-{@const ...} must consist of a single variable declaration
+Cannot use `$props()` more than once
 ```
 
-## const_tag_invalid_placement
+## `props_illegal_name`
 
 ```
-`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)
 ```
 
-## debug_tag_invalid_arguments
+## `props_invalid_identifier`
 
 ```
-{@debug ...} arguments must be identifiers, not arbitrary expressions
+`$props()` can only be used with an object destructuring pattern
 ```
 
-## directive_invalid_value
+## `props_invalid_pattern`
 
 ```
-Directive value must be a JavaScript expression enclosed in curly braces
+`$props()` assignment must not contain nested properties or computed keys
 ```
 
-## directive_missing_name
+## `props_invalid_placement`
 
 ```
-`%type%` name cannot be empty
+`$props()` can only be used at the top level of components as a variable declaration initializer
 ```
 
-## element_invalid_closing_tag
+## `reactive_declaration_cycle`
 
 ```
-`</%name%>` attempted to close an element that was not open
+Cyclical dependency detected: %cycle%
 ```
 
-## element_invalid_closing_tag_autoclosed
+## `render_tag_invalid_call_expression`
 
 ```
-`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)
+Calling a snippet function using apply, bind or call is not allowed
 ```
 
-## element_unclosed
+## `render_tag_invalid_expression`
 
 ```
-`<%name%>` was left open
+`{@render ...}` tags can only contain call expressions
 ```
 
-## event_handler_invalid_component_modifier
+## `render_tag_invalid_spread_argument`
 
 ```
-Event modifiers other than 'once' can only be used on DOM elements
+cannot use spread arguments in `{@render ...}` tags
 ```
 
-## event_handler_invalid_modifier
+## `rune_invalid_arguments`
 
 ```
-Valid event modifiers are %list%
+`%rune%` cannot be called with arguments
 ```
 
-## event_handler_invalid_modifier_combination
+## `rune_invalid_arguments_length`
 
 ```
-The '%modifier1%' and '%modifier2%' modifiers cannot be used together
+`%rune%` must be called with %args%
 ```
 
-## expected_attribute_value
+## `rune_invalid_computed_property`
 
 ```
-Expected attribute value
+Cannot access a computed property of a rune
 ```
 
-## expected_block_type
+## `rune_invalid_name`
 
 ```
-Expected 'if', 'each', 'await', 'key' or 'snippet'
+`%name%` is not a valid rune
 ```
 
-## expected_identifier
+## `rune_invalid_usage`
 
 ```
-Expected an identifier
+Cannot use `%rune%` rune in non-runes mode
 ```
 
-## expected_pattern
+## `rune_missing_parentheses`
 
 ```
-Expected identifier or destructure pattern
+Cannot use rune without parentheses
 ```
 
-## expected_token
+## `rune_removed`
 
 ```
-Expected token %token%
+The `%name%` rune has been removed
 ```
 
-## expected_whitespace
+## `rune_renamed`
 
 ```
-Expected whitespace
+`%name%` is now `%replacement%`
 ```
 
-## js_parse_error
+## `runes_mode_invalid_import`
 
 ```
-%message%
+%name% cannot be used in runes mode
 ```
 
-## let_directive_invalid_placement
+## `script_duplicate`
 
 ```
-`let:` directive at invalid position
+A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
 ```
 
-## mixed_event_handler_syntaxes
+## `script_invalid_attribute_value`
 
 ```
-Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
+If the `%name%` attribute is supplied, it must be a boolean attribute
 ```
 
-## node_invalid_placement
+## `script_invalid_context`
 
 ```
-%thing% is invalid inside `<%parent%>`
+If the context attribute is supplied, its value must be "module"
 ```
 
-HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
-
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
-- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
-- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
-
-## render_tag_invalid_call_expression
+## `script_reserved_attribute`
 
 ```
-Calling a snippet function using apply, bind or call is not allowed
+The `%name%` attribute is reserved and cannot be used
 ```
 
-## render_tag_invalid_expression
+## `slot_attribute_duplicate`
 
 ```
-`{@render ...}` tags can only contain call expressions
+Duplicate slot name '%name%' in <%component%>
 ```
 
-## render_tag_invalid_spread_argument
+## `slot_attribute_invalid`
 
 ```
-cannot use spread arguments in `{@render ...}` tags
+slot attribute must be a static value
 ```
 
-## script_duplicate
+## `slot_attribute_invalid_placement`
 
 ```
-A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
+Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
 ```
 
-## script_invalid_attribute_value
+## `slot_default_duplicate`
 
 ```
-If the `%name%` attribute is supplied, it must be a boolean attribute
+Found default slot content alongside an explicit slot="default"
 ```
 
-## script_invalid_context
+## `slot_element_invalid_attribute`
 
 ```
-If the context attribute is supplied, its value must be "module"
+`<slot>` can only receive attributes and (optionally) let directives
 ```
 
-## script_reserved_attribute
+## `slot_element_invalid_name`
 
 ```
-The `%name%` attribute is reserved and cannot be used
+slot attribute must be a static value
 ```
 
-## slot_attribute_duplicate
+## `slot_element_invalid_name_default`
 
 ```
-Duplicate slot name '%name%' in <%component%>
+`default` is a reserved word — it cannot be used as a slot name
 ```
 
-## slot_attribute_invalid
+## `slot_snippet_conflict`
 
 ```
-slot attribute must be a static value
+Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely
 ```
 
-## slot_attribute_invalid_placement
+## `snippet_conflict`
 
 ```
-Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
+Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
 ```
 
-## slot_default_duplicate
+## `snippet_invalid_rest_parameter`
 
 ```
-Found default slot content alongside an explicit slot="default"
+Snippets do not support rest parameters; use an array instead
 ```
 
-## slot_element_invalid_attribute
+## `snippet_parameter_assignment`
 
 ```
-`<slot>` can only receive attributes and (optionally) let directives
+Cannot reassign or bind to snippet parameter
 ```
 
-## slot_element_invalid_name
+## `snippet_shadowing_prop`
 
 ```
-slot attribute must be a static value
+This snippet is shadowing the prop `%prop%` with the same name
 ```
 
-## slot_element_invalid_name_default
+## `state_invalid_export`
 
 ```
-`default` is a reserved word — it cannot be used as a slot name
+Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
 ```
 
-## slot_snippet_conflict
+## `state_invalid_placement`
 
 ```
-Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely
+`%rune%(...)` can only be used as a variable declaration initializer or a class field
 ```
 
-## snippet_conflict
+## `store_invalid_scoped_subscription`
 
 ```
-Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
+Cannot subscribe to stores that are not declared at the top level of the component
 ```
 
-## snippet_invalid_rest_parameter
+## `store_invalid_subscription`
 
 ```
-Snippets do not support rest parameters; use an array instead
+Cannot reference store value inside `<script module>`
 ```
 
-## snippet_shadowing_prop
+## `store_invalid_subscription_module`
 
 ```
-This snippet is shadowing the prop `%prop%` with the same name
+Cannot reference store value outside a `.svelte` file
 ```
 
-## style_directive_invalid_modifier
+Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
+
+## `style_directive_invalid_modifier`
 
 ```
 `style:` directive can only use the `important` modifier
 ```
 
-## style_duplicate
+## `style_duplicate`
 
 ```
 A component can have a single top-level `<style>` element
 ```
 
-## svelte_body_illegal_attribute
+## `svelte_body_illegal_attribute`
 
 ```
 `<svelte:body>` does not support non-event attributes or spread attributes
 ```
 
-## svelte_component_invalid_this
+## `svelte_component_invalid_this`
 
 ```
 Invalid component definition — must be an `{expression}`
 ```
 
-## svelte_component_missing_this
+## `svelte_component_missing_this`
 
 ```
 `<svelte:component>` must have a 'this' attribute
 ```
 
-## svelte_element_missing_this
+## `svelte_element_missing_this`
 
 ```
 `<svelte:element>` must have a 'this' attribute with a value
 ```
 
-## svelte_fragment_invalid_attribute
+## `svelte_fragment_invalid_attribute`
 
 ```
 `<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive
 ```
 
-## svelte_fragment_invalid_placement
+## `svelte_fragment_invalid_placement`
 
 ```
 `<svelte:fragment>` must be the direct child of a component
 ```
 
-## svelte_head_illegal_attribute
+## `svelte_head_illegal_attribute`
 
 ```
 `<svelte:head>` cannot have attributes nor directives
 ```
 
-## svelte_meta_duplicate
+## `svelte_meta_duplicate`
 
 ```
 A component can only have one `<%name%>` element
 ```
 
-## svelte_meta_invalid_content
+## `svelte_meta_invalid_content`
 
 ```
 <%name%> cannot have children
 ```
 
-## svelte_meta_invalid_placement
+## `svelte_meta_invalid_placement`
 
 ```
 `<%name%>` tags cannot be inside elements or blocks
 ```
 
-## svelte_meta_invalid_tag
+## `svelte_meta_invalid_tag`
 
 ```
 Valid `<svelte:...>` tag names are %list%
 ```
 
-## svelte_options_deprecated_tag
+## `svelte_options_deprecated_tag`
 
 ```
 "tag" option is deprecated — use "customElement" instead
 ```
 
-## svelte_options_invalid_attribute
+## `svelte_options_invalid_attribute`
 
 ```
 `<svelte:options>` can only receive static attributes
 ```
 
-## svelte_options_invalid_attribute_value
+## `svelte_options_invalid_attribute_value`
 
 ```
 Value must be %list%, if specified
 ```
 
-## svelte_options_invalid_customelement
+## `svelte_options_invalid_customelement`
 
 ```
 "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 ```
 
-## svelte_options_invalid_customelement_props
+## `svelte_options_invalid_customelement_props`
 
 ```
 "props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
 ```
 
-## svelte_options_invalid_customelement_shadow
+## `svelte_options_invalid_customelement_shadow`
 
 ```
 "shadow" must be either "open" or "none"
 ```
 
-## svelte_options_invalid_tagname
+## `svelte_options_invalid_tagname`
 
 ```
 Tag name must be lowercase and hyphenated
@@ -867,7 +862,7 @@ Tag name must be lowercase and hyphenated
 
 See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
 
-## svelte_options_reserved_tagname
+## `svelte_options_reserved_tagname`
 
 ```
 Tag name is reserved
@@ -875,73 +870,79 @@ Tag name is reserved
 
 See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
 
-## svelte_options_unknown_attribute
+## `svelte_options_unknown_attribute`
 
 ```
 `<svelte:options>` unknown attribute '%name%'
 ```
 
-## svelte_self_invalid_placement
+## `svelte_self_invalid_placement`
 
 ```
 `<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components
 ```
 
-## tag_invalid_name
+## `tag_invalid_name`
 
 ```
 Expected a valid element or component name. Components must have a valid variable name or dot notation expression
 ```
 
-## tag_invalid_placement
+## `tag_invalid_placement`
 
 ```
 {@%name% ...} tag cannot be %location%
 ```
 
-## textarea_invalid_content
+## `textarea_invalid_content`
 
 ```
 A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
 ```
 
-## title_illegal_attribute
+## `title_illegal_attribute`
 
 ```
 `<title>` cannot have attributes nor directives
 ```
 
-## title_invalid_content
+## `title_invalid_content`
 
 ```
 `<title>` can only contain text and {tags}
 ```
 
-## transition_conflict
+## `transition_conflict`
 
 ```
 Cannot use `%type%:` alongside existing `%existing%:` directive
 ```
 
-## transition_duplicate
+## `transition_duplicate`
 
 ```
 Cannot use multiple `%type%:` directives on a single element
 ```
 
-## unexpected_eof
+## `typescript_invalid_feature`
+
+```
+TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
+```
+
+## `unexpected_eof`
 
 ```
 Unexpected end of input
 ```
 
-## unexpected_reserved_word
+## `unexpected_reserved_word`
 
 ```
 '%word%' is a reserved word in JavaScript and cannot be used here
 ```
 
-## void_element_invalid_content
+## `void_element_invalid_content`
 
 ```
 Void elements cannot have children or closing tags
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index da87329157..52450859f1 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -1,249 +1,249 @@
 ---
-title: 'Compiler Warnings'
+title: 'Compiler warnings'
 generated: 'generated by process-messages/index.js'
 ---
 
-## a11y_accesskey
+## `a11y_accesskey`
 
 ```
 Avoid using accesskey
 ```
 
-## a11y_aria_activedescendant_has_tabindex
+## `a11y_aria_activedescendant_has_tabindex`
 
 ```
 An element with an aria-activedescendant attribute should have a tabindex value
 ```
 
-## a11y_aria_attributes
+## `a11y_aria_attributes`
 
 ```
 `<%name%>` should not have aria-* attributes
 ```
 
-## a11y_autocomplete_valid
+## `a11y_autocomplete_valid`
 
 ```
 '%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
 ```
 
-## a11y_autofocus
+## `a11y_autofocus`
 
 ```
 Avoid using autofocus
 ```
 
-## a11y_click_events_have_key_events
+## `a11y_click_events_have_key_events`
 
 ```
 Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
 ```
 
-## a11y_consider_explicit_label
+## `a11y_consider_explicit_label`
 
 ```
 Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
 ```
 
-## a11y_distracting_elements
+## `a11y_distracting_elements`
 
 ```
 Avoid `<%name%>` elements
 ```
 
-## a11y_figcaption_index
+## `a11y_figcaption_index`
 
 ```
 `<figcaption>` must be first or last child of `<figure>`
 ```
 
-## a11y_figcaption_parent
+## `a11y_figcaption_parent`
 
 ```
 `<figcaption>` must be an immediate child of `<figure>`
 ```
 
-## a11y_hidden
+## `a11y_hidden`
 
 ```
 `<%name%>` element should not be hidden
 ```
 
-## a11y_img_redundant_alt
+## `a11y_img_redundant_alt`
 
 ```
 Screenreaders already announce `<img>` elements as an image
 ```
 
-## a11y_incorrect_aria_attribute_type
+## `a11y_incorrect_aria_attribute_type`
 
 ```
 The value of '%attribute%' must be a %type%
 ```
 
-## a11y_incorrect_aria_attribute_type_boolean
+## `a11y_incorrect_aria_attribute_type_boolean`
 
 ```
 The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
 ```
 
-## a11y_incorrect_aria_attribute_type_id
+## `a11y_incorrect_aria_attribute_type_id`
 
 ```
 The value of '%attribute%' must be a string that represents a DOM element ID
 ```
 
-## a11y_incorrect_aria_attribute_type_idlist
+## `a11y_incorrect_aria_attribute_type_idlist`
 
 ```
 The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
 ```
 
-## a11y_incorrect_aria_attribute_type_integer
+## `a11y_incorrect_aria_attribute_type_integer`
 
 ```
 The value of '%attribute%' must be an integer
 ```
 
-## a11y_incorrect_aria_attribute_type_token
+## `a11y_incorrect_aria_attribute_type_token`
 
 ```
 The value of '%attribute%' must be exactly one of %values%
 ```
 
-## a11y_incorrect_aria_attribute_type_tokenlist
+## `a11y_incorrect_aria_attribute_type_tokenlist`
 
 ```
 The value of '%attribute%' must be a space-separated list of one or more of %values%
 ```
 
-## a11y_incorrect_aria_attribute_type_tristate
+## `a11y_incorrect_aria_attribute_type_tristate`
 
 ```
 The value of '%attribute%' must be exactly one of true, false, or mixed
 ```
 
-## a11y_interactive_supports_focus
+## `a11y_interactive_supports_focus`
 
 ```
 Elements with the '%role%' interactive role must have a tabindex value
 ```
 
-## a11y_invalid_attribute
+## `a11y_invalid_attribute`
 
 ```
 '%href_value%' is not a valid %href_attribute% attribute
 ```
 
-## a11y_label_has_associated_control
+## `a11y_label_has_associated_control`
 
 ```
 A form label must be associated with a control
 ```
 
-## a11y_media_has_caption
+## `a11y_media_has_caption`
 
 ```
 `<video>` elements must have a `<track kind="captions">`
 ```
 
-## a11y_misplaced_role
+## `a11y_misplaced_role`
 
 ```
 `<%name%>` should not have role attribute
 ```
 
-## a11y_misplaced_scope
+## `a11y_misplaced_scope`
 
 ```
 The scope attribute should only be used with `<th>` elements
 ```
 
-## a11y_missing_attribute
+## `a11y_missing_attribute`
 
 ```
 `<%name%>` element should have %article% %sequence% attribute
 ```
 
-## a11y_missing_content
+## `a11y_missing_content`
 
 ```
 `<%name%>` element should contain text
 ```
 
-## a11y_mouse_events_have_key_events
+## `a11y_mouse_events_have_key_events`
 
 ```
 '%event%' event must be accompanied by '%accompanied_by%' event
 ```
 
-## a11y_no_abstract_role
+## `a11y_no_abstract_role`
 
 ```
 Abstract role '%role%' is forbidden
 ```
 
-## a11y_no_interactive_element_to_noninteractive_role
+## `a11y_no_interactive_element_to_noninteractive_role`
 
 ```
 `<%element%>` cannot have role '%role%'
 ```
 
-## a11y_no_noninteractive_element_interactions
+## `a11y_no_noninteractive_element_interactions`
 
 ```
 Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners
 ```
 
-## a11y_no_noninteractive_element_to_interactive_role
+## `a11y_no_noninteractive_element_to_interactive_role`
 
 ```
 Non-interactive element `<%element%>` cannot have interactive role '%role%'
 ```
 
-## a11y_no_noninteractive_tabindex
+## `a11y_no_noninteractive_tabindex`
 
 ```
 noninteractive element cannot have nonnegative tabIndex value
 ```
 
-## a11y_no_redundant_roles
+## `a11y_no_redundant_roles`
 
 ```
 Redundant role '%role%'
 ```
 
-## a11y_no_static_element_interactions
+## `a11y_no_static_element_interactions`
 
 ```
 `<%element%>` with a %handler% handler must have an ARIA role
 ```
 
-## a11y_positive_tabindex
+## `a11y_positive_tabindex`
 
 ```
 Avoid tabindex values above zero
 ```
 
-## a11y_role_has_required_aria_props
+## `a11y_role_has_required_aria_props`
 
 ```
 Elements with the ARIA role "%role%" must have the following attributes defined: %props%
 ```
 
-## a11y_role_supports_aria_props
+## `a11y_role_supports_aria_props`
 
 ```
 The attribute '%attribute%' is not supported by the role '%role%'
 ```
 
-## a11y_role_supports_aria_props_implicit
+## `a11y_role_supports_aria_props_implicit`
 
 ```
 The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`
 ```
 
-## a11y_unknown_aria_attribute
+## `a11y_unknown_aria_attribute`
 
 ```
 Unknown aria attribute 'aria-%attribute%'
@@ -252,7 +252,7 @@ Unknown aria attribute 'aria-%attribute%'
 Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
 ```
 
-## a11y_unknown_role
+## `a11y_unknown_role`
 
 ```
 Unknown role '%role%'
@@ -261,222 +261,213 @@ Unknown role '%role%'
 Unknown role '%role%'. Did you mean '%suggestion%'?
 ```
 
-## legacy_code
+## `attribute_avoid_is`
 
 ```
-`%code%` is no longer valid — please use `%suggestion%` instead
+The "is" attribute is not supported cross-browser and should be avoided
 ```
 
-## unknown_code
+## `attribute_global_event_reference`
 
 ```
-`%code%` is not a recognised code
-```
-```
-`%code%` is not a recognised code (did you mean `%suggestion%`?)
+You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
 ```
 
-## options_deprecated_accessors
+## `attribute_illegal_colon`
 
 ```
-The `accessors` option has been deprecated. It will have no effect in runes mode
+Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
 ```
 
-## options_deprecated_immutable
+## `attribute_invalid_property_name`
 
 ```
-The `immutable` option has been deprecated. It will have no effect in runes mode
+'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
 ```
 
-## options_missing_custom_element
+## `attribute_quoted`
 
 ```
-The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
+Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 ```
 
-## options_removed_enable_sourcemap
+## `bind_invalid_each_rest`
 
 ```
-The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
+The rest operator (...) will create a new object and binding '%name%' with the original object will not work
 ```
 
-## options_removed_hydratable
+## `block_empty`
 
 ```
-The `hydratable` option has been removed. Svelte components are always hydratable now
+Empty block
 ```
 
-## options_removed_loop_guard_timeout
+## `component_name_lowercase`
 
 ```
-The `loopGuardTimeout` option has been removed
+`<%name%>` will be treated as an HTML element unless it begins with a capital letter
 ```
 
-## options_renamed_ssr_dom
+## `css_unused_selector`
 
 ```
-`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
+Unused CSS selector "%name%"
 ```
 
-## export_let_unused
+## `element_invalid_self_closing_tag`
 
 ```
-Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
+Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 ```
 
-## legacy_component_creation
+## `event_directive_deprecated`
 
 ```
-Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
+Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
 ```
 
-## non_reactive_update
+## `export_let_unused`
 
 ```
-`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
+Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
 ```
 
-## perf_avoid_inline_class
+## `legacy_code`
 
 ```
-Avoid 'new class' — instead, declare the class at the top level scope
+`%code%` is no longer valid — please use `%suggestion%` instead
 ```
 
-## perf_avoid_nested_class
+## `legacy_component_creation`
 
 ```
-Avoid declaring classes below the top level scope
+Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
 ```
 
-## reactive_declaration_invalid_placement
+## `node_invalid_placement_ssr`
 
 ```
-Reactive declarations only exist at the top level of the instance script
+%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
 ```
 
-## reactive_declaration_module_script_dependency
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
-```
-Reassignments of module-level declarations will not cause reactive statements to update
-```
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
+- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
+
+This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
 
-## reactive_declaration_non_reactive_property
+## `non_reactive_update`
 
 ```
-Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
+`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
 ```
 
-## state_referenced_locally
+## `options_deprecated_accessors`
 
 ```
-State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+The `accessors` option has been deprecated. It will have no effect in runes mode
 ```
 
-## store_rune_conflict
+## `options_deprecated_immutable`
 
 ```
-It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
+The `immutable` option has been deprecated. It will have no effect in runes mode
 ```
 
-## css_unused_selector
+## `options_missing_custom_element`
 
 ```
-Unused CSS selector "%name%"
+The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
 ```
 
-## attribute_avoid_is
+## `options_removed_enable_sourcemap`
 
 ```
-The "is" attribute is not supported cross-browser and should be avoided
+The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
 ```
 
-## attribute_global_event_reference
+## `options_removed_hydratable`
 
 ```
-You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
+The `hydratable` option has been removed. Svelte components are always hydratable now
 ```
 
-## attribute_illegal_colon
+## `options_removed_loop_guard_timeout`
 
 ```
-Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
+The `loopGuardTimeout` option has been removed
 ```
 
-## attribute_invalid_property_name
+## `options_renamed_ssr_dom`
 
 ```
-'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
+`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
 ```
 
-## attribute_quoted
+## `perf_avoid_inline_class`
 
 ```
-Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
+Avoid 'new class' — instead, declare the class at the top level scope
 ```
 
-## bind_invalid_each_rest
+## `perf_avoid_nested_class`
 
 ```
-The rest operator (...) will create a new object and binding '%name%' with the original object will not work
+Avoid declaring classes below the top level scope
 ```
 
-## block_empty
+## `reactive_declaration_invalid_placement`
 
 ```
-Empty block
+Reactive declarations only exist at the top level of the instance script
 ```
 
-## component_name_lowercase
+## `reactive_declaration_module_script_dependency`
 
 ```
-`<%name%>` will be treated as an HTML element unless it begins with a capital letter
+Reassignments of module-level declarations will not cause reactive statements to update
 ```
 
-## element_invalid_self_closing_tag
+## `reactive_declaration_non_reactive_property`
 
 ```
-Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
+Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
 ```
 
-## event_directive_deprecated
+## `script_context_deprecated`
 
 ```
-Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
+`context="module"` is deprecated, use the `module` attribute instead
 ```
 
-## node_invalid_placement_ssr
+## `script_unknown_attribute`
 
 ```
-%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
 ```
 
-HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
-
-- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
-- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
-- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
-
-This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
-
-## script_context_deprecated
+## `slot_element_deprecated`
 
 ```
-`context="module"` is deprecated, use the `module` attribute instead
+Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
 ```
 
-## script_unknown_attribute
+## `state_referenced_locally`
 
 ```
-Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+State referenced in its own scope will never update. Did you mean to reference it inside a closure?
 ```
 
-## slot_element_deprecated
+## `store_rune_conflict`
 
 ```
-Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
+It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
 ```
 
-## svelte_component_deprecated
+## `svelte_component_deprecated`
 
 ```
 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
@@ -510,14 +501,23 @@ A derived value may be used in other contexts:
 + <Component />
 ```
 
-## svelte_element_invalid_this
+## `svelte_element_invalid_this`
 
 ```
 `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
 ```
 
-## svelte_self_deprecated
+## `svelte_self_deprecated`
 
 ```
 `<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
 ```
+
+## `unknown_code`
+
+```
+`%code%` is not a recognised code
+```
+```
+`%code%` is not a recognised code (did you mean `%suggestion%`?)
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index 8c7b286a7b..b5b4296ec0 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -1,45 +1,45 @@
 ---
-title: 'Runtime Errors'
+title: 'Runtime errors'
 generated: 'generated by process-messages/index.js'
 ---
 
-## bind_invalid_checkbox_value
+## `bind_invalid_checkbox_value`
 
 ```
 Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
 ```
 
-## bind_invalid_export
+## `bind_invalid_export`
 
 ```
 Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
 ```
 
-## bind_not_bindable
+## `bind_not_bindable`
 
 ```
 A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
 ```
 
-## component_api_changed
+## `component_api_changed`
 
 ```
 %parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
 ```
 
-## component_api_invalid_new
+## `component_api_invalid_new`
 
 ```
 Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
 ```
 
-## derived_references_self
+## `derived_references_self`
 
 ```
 A derived value cannot reference itself recursively
 ```
 
-## each_key_duplicate
+## `each_key_duplicate`
 
 ```
 Keyed each block has duplicate key at indexes %a% and %b%
@@ -48,115 +48,115 @@ Keyed each block has duplicate key at indexes %a% and %b%
 Keyed each block has duplicate key `%value%` at indexes %a% and %b%
 ```
 
-## effect_in_teardown
+## `effect_in_teardown`
 
 ```
 `%rune%` cannot be used inside an effect cleanup function
 ```
 
-## effect_in_unowned_derived
+## `effect_in_unowned_derived`
 
 ```
 Effect cannot be created inside a `$derived` value that was not itself created inside an effect
 ```
 
-## effect_orphan
+## `effect_orphan`
 
 ```
 `%rune%` can only be used inside an effect (e.g. during component initialisation)
 ```
 
-## effect_update_depth_exceeded
+## `effect_update_depth_exceeded`
 
 ```
 Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
 ```
 
-## hydration_failed
+## `hydration_failed`
 
 ```
 Failed to hydrate the application
 ```
 
-## invalid_snippet
+## `invalid_default_snippet`
 
 ```
-Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
+Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
 ```
 
-## lifecycle_legacy_only
+## `invalid_snippet`
 
 ```
-`%name%(...)` cannot be used in runes mode
+Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
 ```
 
-## props_invalid_value
+## `lifecycle_function_unavailable`
 
 ```
-Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
+`%name%(...)` is not available on the server
 ```
 
-## props_rest_readonly
+## `lifecycle_legacy_only`
 
 ```
-Rest element properties of `$props()` such as `%property%` are readonly
+`%name%(...)` cannot be used in runes mode
 ```
 
-## rune_outside_svelte
+## `lifecycle_outside_component`
 
 ```
-The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
+`%name%(...)` can only be used during component initialisation
 ```
 
-## state_descriptors_fixed
+## `props_invalid_value`
 
 ```
-Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
 ```
 
-## state_prototype_fixed
+## `props_rest_readonly`
 
 ```
-Cannot set prototype of `$state` object
+Rest element properties of `$props()` such as `%property%` are readonly
 ```
 
-## state_unsafe_local_read
+## `rune_outside_svelte`
 
 ```
-Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 ```
 
-## state_unsafe_mutation
+## `state_descriptors_fixed`
 
 ```
-Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
+Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
 ```
 
-## lifecycle_function_unavailable
+## `state_prototype_fixed`
 
 ```
-`%name%(...)` is not available on the server
+Cannot set prototype of `$state` object
 ```
 
-## invalid_default_snippet
+## `state_unsafe_local_read`
 
 ```
-Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
+Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
 ```
 
-## lifecycle_outside_component
+## `state_unsafe_mutation`
 
 ```
-`%name%(...)` can only be used during component initialisation
+Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
-## store_invalid_shape
+## `store_invalid_shape`
 
 ```
 `%name%` is not a store with a `subscribe` method
 ```
 
-## svelte_element_invalid_this_value
+## `svelte_element_invalid_this_value`
 
 ```
 The `this` prop on `<svelte:element>` must be a string, if defined
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index c1c6ba2fb1..3793e2ccc5 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -1,9 +1,9 @@
 ---
-title: 'Runtime Warnings'
+title: 'Runtime warnings'
 generated: 'generated by process-messages/index.js'
 ---
 
-## binding_property_non_reactive
+## `binding_property_non_reactive`
 
 ```
 `%binding%` is binding to a non-reactive property
@@ -12,7 +12,7 @@ generated: 'generated by process-messages/index.js'
 `%binding%` (%location%) is binding to a non-reactive property
 ```
 
-## console_log_state
+## `console_log_state`
 
 ```
 Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
@@ -22,19 +22,25 @@ When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/R
 
 The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
 
-## event_handler_invalid
+## `dynamic_void_element_content`
+
+```
+`<svelte:element this="%tag%">` is a void element — it cannot have content
+```
+
+## `event_handler_invalid`
 
 ```
 %handler% should be a function. Did you mean to %suggestion%?
 ```
 
-## hydration_attribute_changed
+## `hydration_attribute_changed`
 
 ```
 The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
 ```
 
-## hydration_html_changed
+## `hydration_html_changed`
 
 ```
 The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
@@ -43,7 +49,7 @@ The value of an `{@html ...}` block changed between server and client renders. T
 The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
 ```
 
-## hydration_mismatch
+## `hydration_mismatch`
 
 ```
 Hydration failed because the initial UI does not match what was rendered on the server
@@ -52,25 +58,25 @@ Hydration failed because the initial UI does not match what was rendered on the
 Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 ```
 
-## invalid_raw_snippet_render
+## `invalid_raw_snippet_render`
 
 ```
 The `render` function passed to `createRawSnippet` should return HTML for a single element
 ```
 
-## lifecycle_double_unmount
+## `lifecycle_double_unmount`
 
 ```
 Tried to unmount a component that was not mounted
 ```
 
-## ownership_invalid_binding
+## `ownership_invalid_binding`
 
 ```
 %parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
 ```
 
-## ownership_invalid_mutation
+## `ownership_invalid_mutation`
 
 ```
 Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
@@ -79,7 +85,7 @@ Mutating a value outside the component that created it is strongly discouraged.
 %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
 ```
 
-## state_proxy_equality_mismatch
+## `state_proxy_equality_mismatch`
 
 ```
 Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
@@ -98,13 +104,7 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
-## dynamic_void_element_content
-
-```
-`<svelte:element this="%tag%">` is a void element — it cannot have content
-```
-
-## state_snapshot_uncloneable
+## `state_snapshot_uncloneable`
 
 ```
 Value cannot be cloned with `$state.snapshot` — the original value was returned
diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index b7cff430ea..03e1d2688a 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -27,7 +27,7 @@ const packages: Package[] = [
 		name: 'svelte',
 		local: `${REPOS}/svelte`,
 		repo: 'sveltejs/svelte',
-		branch: 'main',
+		branch: 'generate-warnings-errors-docs',
 		pkg: 'packages/svelte',
 		docs: 'documentation/docs',
 		process_modules: async (modules: Modules) => {

From 3d6ceaaf4ac893c27fe4a8f88b09d92f85dc1f41 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 20:30:08 +0200
Subject: [PATCH 05/13] add [!NOTE] type

---
 packages/site-kit/src/lib/components/Text.svelte | 7 +++++++
 packages/site-kit/src/lib/markdown/renderer.ts   | 7 ++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index c370839cc6..80fde96626 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -409,6 +409,13 @@
 				}
 			}
 
+			&.note {
+				background: none;
+				margin-left: 0.2rem;
+				padding: 0 0 0 3.8rem;
+				border-left: 0.5rem solid var(--sk-back-5);
+			}
+
 			em,
 			i {
 				font-style: normal;
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 73bed8fea7..ec7cb75c1e 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -279,7 +279,12 @@ export async function render_content_markdown(
 			if (content.includes('[!LEGACY]')) {
 				content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
 			}
-			return `<blockquote>${content}</blockquote>`;
+
+			// TODO get a shared understanding of what kinds of blockquotes we have and how to name them. [!TIP] ? [!WARNING] ? [!QUOTE] ?
+			// Should the default be a generic blockquote that is just italic, without any icon?
+			// Should we rely on consistent class names everywhere instead of styling blockquotes one way on blogs and another way in the docs?
+			const klass = content.includes('[!NOTE]') ? ' class="note"' : '';
+			return `<blockquote${klass}>${content.replace('[!NOTE]', '')}</blockquote>`;
 		}
 	});
 }

From 12723e78173a6555bae8de30946060733fa5cec4 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 21:12:39 +0200
Subject: [PATCH 06/13] sync

---
 .../svelte/98-reference/30-compiler-errors.md | 625 +++++-------------
 .../98-reference/30-compiler-warnings.md      | 576 ++++++++++------
 .../svelte/98-reference/30-runtime-errors.md  | 109 +--
 .../98-reference/30-runtime-warnings.md       |  77 +--
 4 files changed, 569 insertions(+), 818 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 14c2c05799..4ba4761eea 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -5,480 +5,321 @@ generated: 'generated by process-messages/index.js'
 
 ## `animation_duplicate`
 
-```
-An element can only have one 'animate' directive
-```
+> [!NOTE] An element can only have one 'animate' directive
 
 ## `animation_invalid_placement`
 
-```
-An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
-```
+> [!NOTE] An element that uses the 'animate:' directive must be the only child of a keyed '{#each ...}' block
 
 ## `animation_missing_key`
 
-```
-An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?
-```
+> [!NOTE] An element that uses the 'animate:' directive must be the only child of a keyed '{#each ...}' block. Did you forget to add a key to your each block?
 
 ## `attribute_contenteditable_dynamic`
 
-```
-'contenteditable' attribute cannot be dynamic if element uses two-way binding
-```
+> [!NOTE] 'contenteditable' attribute cannot be dynamic if element uses two-way binding
 
 ## `attribute_contenteditable_missing`
 
-```
-'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
-```
+> [!NOTE] 'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
 
 ## `attribute_duplicate`
 
-```
-Attributes need to be unique
-```
+> [!NOTE] Attributes need to be unique
 
 ## `attribute_empty_shorthand`
 
-```
-Attribute shorthand cannot be empty
-```
+> [!NOTE] Attribute shorthand cannot be empty
 
 ## `attribute_invalid_event_handler`
 
-```
-Event attribute must be a JavaScript expression, not a string
-```
+> [!NOTE] Event attribute must be a JavaScript expression, not a string
 
 ## `attribute_invalid_multiple`
 
-```
-'multiple' attribute must be static if select uses two-way binding
-```
+> [!NOTE] 'multiple' attribute must be static if select uses two-way binding
 
 ## `attribute_invalid_name`
 
-```
-'%name%' is not a valid attribute name
-```
+> [!NOTE] '%name%' is not a valid attribute name
 
 ## `attribute_invalid_sequence_expression`
 
-```
-Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
-```
+> [!NOTE] Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
 
 ## `attribute_invalid_type`
 
-```
-'type' attribute must be a static text value if input uses two-way binding
-```
+> [!NOTE] 'type' attribute must be a static text value if input uses two-way binding
 
 ## `attribute_unquoted_sequence`
 
-```
-Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
-```
+> [!NOTE] Attribute values containing '{...}' must be enclosed in quote marks, unless the value only contains the expression
 
 ## `bind_invalid_expression`
 
-```
-Can only bind to an Identifier or MemberExpression
-```
+> [!NOTE] Can only bind to an Identifier or MemberExpression
 
 ## `bind_invalid_name`
 
-```
-`bind:%name%` is not a valid binding
-```
-```
-`bind:%name%` is not a valid binding. %explanation%
-```
+> [!NOTE] 'bind:%name%' is not a valid binding
+
+> [!NOTE] 'bind:%name%' is not a valid binding. %explanation%
 
 ## `bind_invalid_target`
 
-```
-`bind:%name%` can only be used with %elements%
-```
+> [!NOTE] 'bind:%name%' can only be used with %elements%
 
 ## `bind_invalid_value`
 
-```
-Can only bind to state or props
-```
+> [!NOTE] Can only bind to state or props
 
 ## `bindable_invalid_location`
 
-```
-`$bindable()` can only be used inside a `$props()` declaration
-```
+> [!NOTE] '$bindable()' can only be used inside a '$props()' declaration
 
 ## `block_duplicate_clause`
 
-```
-%name% cannot appear more than once within a block
-```
+> [!NOTE] %name% cannot appear more than once within a block
 
 ## `block_invalid_continuation_placement`
 
-```
-{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
-```
+> [!NOTE] {:...} block is invalid at this position (did you forget to close the preceeding element or block?)
 
 ## `block_invalid_elseif`
 
-```
-'elseif' should be 'else if'
-```
+> [!NOTE] 'elseif' should be 'else if'
 
 ## `block_invalid_placement`
 
-```
-{#%name% ...} block cannot be %location%
-```
+> [!NOTE] {#%name% ...} block cannot be %location%
 
 ## `block_unclosed`
 
-```
-Block was left open
-```
+> [!NOTE] Block was left open
 
 ## `block_unexpected_character`
 
-```
-Expected a `%character%` character immediately following the opening bracket
-```
+> [!NOTE] Expected a '%character%' character immediately following the opening bracket
 
 ## `block_unexpected_close`
 
-```
-Unexpected block closing tag
-```
+> [!NOTE] Unexpected block closing tag
 
 ## `component_invalid_directive`
 
-```
-This type of directive is not valid on components
-```
+> [!NOTE] This type of directive is not valid on components
 
 ## `const_tag_cycle`
 
-```
-Cyclical dependency detected: %cycle%
-```
+> [!NOTE] Cyclical dependency detected: %cycle%
 
 ## `const_tag_invalid_expression`
 
-```
-{@const ...} must consist of a single variable declaration
-```
+> [!NOTE] {@const ...} must consist of a single variable declaration
 
 ## `const_tag_invalid_placement`
 
-```
-`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
-```
+> [!NOTE] '{@const}' must be the immediate child of '{#snippet}', '{#if}', '{:else if}', '{:else}', '{#each}', '{:then}', '{:catch}', '\<svelte:fragment>' or '\<Component>'
 
 ## `constant_assignment`
 
-```
-Cannot assign to %thing%
-```
+> [!NOTE] Cannot assign to %thing%
 
 ## `constant_binding`
 
-```
-Cannot bind to %thing%
-```
+> [!NOTE] Cannot bind to %thing%
 
 ## `css_empty_declaration`
 
-```
-Declaration cannot be empty
-```
+> [!NOTE] Declaration cannot be empty
 
 ## `css_expected_identifier`
 
-```
-Expected a valid CSS identifier
-```
+> [!NOTE] Expected a valid CSS identifier
 
 ## `css_global_block_invalid_combinator`
 
-```
-A `:global` selector cannot follow a `%name%` combinator
-```
+> [!NOTE] A ':global' selector cannot follow a '%name%' combinator
 
 ## `css_global_block_invalid_declaration`
 
-```
-A top-level `:global {...}` block can only contain rules, not declarations
-```
+> [!NOTE] A top-level ':global {...}' block can only contain rules, not declarations
 
 ## `css_global_block_invalid_list`
 
-```
-A `:global` selector cannot be part of a selector list with more than one item
-```
+> [!NOTE] A ':global' selector cannot be part of a selector list with more than one item
 
 ## `css_global_block_invalid_modifier`
 
-```
-A `:global` selector cannot modify an existing selector
-```
+> [!NOTE] A ':global' selector cannot modify an existing selector
 
 ## `css_global_block_invalid_modifier_start`
 
-```
-A `:global` selector can only be modified if it is a descendant of other selectors
-```
+> [!NOTE] A ':global' selector can only be modified if it is a descendant of other selectors
 
 ## `css_global_invalid_placement`
 
-```
-`:global(...)` can be at the start or end of a selector sequence, but not in the middle
-```
+> [!NOTE] ':global(...)' can be at the start or end of a selector sequence, but not in the middle
 
 ## `css_global_invalid_selector`
 
-```
-`:global(...)` must contain exactly one selector
-```
+> [!NOTE] ':global(...)' must contain exactly one selector
 
 ## `css_global_invalid_selector_list`
 
-```
-`:global(...)` must not contain type or universal selectors when used in a compound selector
-```
+> [!NOTE] ':global(...)' must not contain type or universal selectors when used in a compound selector
 
 ## `css_nesting_selector_invalid_placement`
 
-```
-Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
-```
+> [!NOTE] Nesting selectors can only be used inside a rule or as the first selector inside a lone ':global(...)'
 
 ## `css_selector_invalid`
 
-```
-Invalid selector
-```
+> [!NOTE] Invalid selector
 
 ## `css_type_selector_invalid_placement`
 
-```
-`:global(...)` must not be followed by a type selector
-```
+> [!NOTE] ':global(...)' must not be followed by a type selector
 
 ## `debug_tag_invalid_arguments`
 
-```
-{@debug ...} arguments must be identifiers, not arbitrary expressions
-```
+> [!NOTE] {@debug ...} arguments must be identifiers, not arbitrary expressions
 
 ## `declaration_duplicate`
 
-```
-`%name%` has already been declared
-```
+> [!NOTE] '%name%' has already been declared
 
 ## `declaration_duplicate_module_import`
 
-```
-Cannot declare a variable with the same name as an import inside `<script module>`
-```
+> [!NOTE] Cannot declare a variable with the same name as an import inside '\<script module>'
 
 ## `derived_invalid_export`
 
-```
-Cannot export derived state from a module. To expose the current derived value, export a function returning its value
-```
+> [!NOTE] Cannot export derived state from a module. To expose the current derived value, export a function returning its value
 
 ## `directive_invalid_value`
 
-```
-Directive value must be a JavaScript expression enclosed in curly braces
-```
+> [!NOTE] Directive value must be a JavaScript expression enclosed in curly braces
 
 ## `directive_missing_name`
 
-```
-`%type%` name cannot be empty
-```
+> [!NOTE] '%type%' name cannot be empty
 
 ## `dollar_binding_invalid`
 
-```
-The $ name is reserved, and cannot be used for variables and imports
-```
+> [!NOTE] The $ name is reserved, and cannot be used for variables and imports
 
 ## `dollar_prefix_invalid`
 
-```
-The $ prefix is reserved, and cannot be used for variables and imports
-```
+> [!NOTE] The $ prefix is reserved, and cannot be used for variables and imports
 
 ## `each_item_invalid_assignment`
 
-```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
-```
+> [!NOTE] Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. 'array[i] = value' instead of 'entry = value')
 
 ## `effect_invalid_placement`
 
-```
-`$effect()` can only be used as an expression statement
-```
+> [!NOTE] '$effect()' can only be used as an expression statement
 
 ## `element_invalid_closing_tag`
 
-```
-`</%name%>` attempted to close an element that was not open
-```
+> [!NOTE] '\</%name%>' attempted to close an element that was not open
 
 ## `element_invalid_closing_tag_autoclosed`
 
-```
-`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)
-```
+> [!NOTE] '\</%name%>' attempted to close element that was already automatically closed by '\<%reason%>' (cannot nest '\<%reason%>' inside '\<%name%>')
 
 ## `element_unclosed`
 
-```
-`<%name%>` was left open
-```
+> [!NOTE] '\<%name%>' was left open
 
 ## `event_handler_invalid_component_modifier`
 
-```
-Event modifiers other than 'once' can only be used on DOM elements
-```
+> [!NOTE] Event modifiers other than 'once' can only be used on DOM elements
 
 ## `event_handler_invalid_modifier`
 
-```
-Valid event modifiers are %list%
-```
+> [!NOTE] Valid event modifiers are %list%
 
 ## `event_handler_invalid_modifier_combination`
 
-```
-The '%modifier1%' and '%modifier2%' modifiers cannot be used together
-```
+> [!NOTE] The '%modifier1%' and '%modifier2%' modifiers cannot be used together
 
 ## `expected_attribute_value`
 
-```
-Expected attribute value
-```
+> [!NOTE] Expected attribute value
 
 ## `expected_block_type`
 
-```
-Expected 'if', 'each', 'await', 'key' or 'snippet'
-```
+> [!NOTE] Expected 'if', 'each', 'await', 'key' or 'snippet'
 
 ## `expected_identifier`
 
-```
-Expected an identifier
-```
+> [!NOTE] Expected an identifier
 
 ## `expected_pattern`
 
-```
-Expected identifier or destructure pattern
-```
+> [!NOTE] Expected identifier or destructure pattern
 
 ## `expected_token`
 
-```
-Expected token %token%
-```
+> [!NOTE] Expected token %token%
 
 ## `expected_whitespace`
 
-```
-Expected whitespace
-```
+> [!NOTE] Expected whitespace
 
 ## `global_reference_invalid`
 
-```
-`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
-```
+> [!NOTE] '%name%' is an illegal variable name. To reference a global variable called '%name%', use 'globalThis.%name%'
 
 ## `host_invalid_placement`
 
-```
-`$host()` can only be used inside custom element component instances
-```
+> [!NOTE] '$host()' can only be used inside custom element component instances
 
 ## `import_svelte_internal_forbidden`
 
-```
-Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
-```
+> [!NOTE] Imports of 'svelte/internal/*' are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from 'svelte/internal/*' to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 
 ## `invalid_arguments_usage`
 
-```
-The arguments keyword cannot be used within the template or at the top level of a component
-```
+> [!NOTE] The arguments keyword cannot be used within the template or at the top level of a component
 
 ## `js_parse_error`
 
-```
-%message%
-```
+> [!NOTE] %message%
 
 ## `legacy_export_invalid`
 
-```
-Cannot use `export let` in runes mode — use `$props()` instead
-```
+> [!NOTE] Cannot use 'export let' in runes mode — use '$props()' instead
 
 ## `legacy_props_invalid`
 
-```
-Cannot use `$$props` in runes mode
-```
+> [!NOTE] Cannot use '$$props' in runes mode
 
 ## `legacy_reactive_statement_invalid`
 
-```
-`$:` is not allowed in runes mode, use `$derived` or `$effect` instead
-```
+> [!NOTE] '$:' is not allowed in runes mode, use '$derived' or '$effect' instead
 
 ## `legacy_rest_props_invalid`
 
-```
-Cannot use `$$restProps` in runes mode
-```
+> [!NOTE] Cannot use '$$restProps' in runes mode
 
 ## `let_directive_invalid_placement`
 
-```
-`let:` directive at invalid position
-```
+> [!NOTE] 'let:' directive at invalid position
 
 ## `mixed_event_handler_syntaxes`
 
-```
-Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
-```
+> [!NOTE] Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
 
 ## `module_illegal_default_export`
 
-```
-A component cannot have a default export
-```
+> [!NOTE] A component cannot have a default export
 
 ## `node_invalid_placement`
 
-```
-%thing% is invalid inside `<%parent%>`
-```
+> [!NOTE] %thing% is invalid inside '\<%parent%>'
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
@@ -488,462 +329,310 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## `options_invalid_value`
 
-```
-Invalid compiler option: %details%
-```
+> [!NOTE] Invalid compiler option: %details%
 
 ## `options_removed`
 
-```
-Invalid compiler option: %details%
-```
+> [!NOTE] Invalid compiler option: %details%
 
 ## `options_unrecognised`
 
-```
-Unrecognised compiler option %keypath%
-```
+> [!NOTE] Unrecognised compiler option %keypath%
 
 ## `props_duplicate`
 
-```
-Cannot use `$props()` more than once
-```
+> [!NOTE] Cannot use '$props()' more than once
 
 ## `props_illegal_name`
 
-```
-Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)
-```
+> [!NOTE] Declaring or accessing a prop starting with '$$' is illegal (they are reserved for Svelte internals)
 
 ## `props_invalid_identifier`
 
-```
-`$props()` can only be used with an object destructuring pattern
-```
+> [!NOTE] '$props()' can only be used with an object destructuring pattern
 
 ## `props_invalid_pattern`
 
-```
-`$props()` assignment must not contain nested properties or computed keys
-```
+> [!NOTE] '$props()' assignment must not contain nested properties or computed keys
 
 ## `props_invalid_placement`
 
-```
-`$props()` can only be used at the top level of components as a variable declaration initializer
-```
+> [!NOTE] '$props()' can only be used at the top level of components as a variable declaration initializer
 
 ## `reactive_declaration_cycle`
 
-```
-Cyclical dependency detected: %cycle%
-```
+> [!NOTE] Cyclical dependency detected: %cycle%
 
 ## `render_tag_invalid_call_expression`
 
-```
-Calling a snippet function using apply, bind or call is not allowed
-```
+> [!NOTE] Calling a snippet function using apply, bind or call is not allowed
 
 ## `render_tag_invalid_expression`
 
-```
-`{@render ...}` tags can only contain call expressions
-```
+> [!NOTE] '{@render ...}' tags can only contain call expressions
 
 ## `render_tag_invalid_spread_argument`
 
-```
-cannot use spread arguments in `{@render ...}` tags
-```
+> [!NOTE] cannot use spread arguments in '{@render ...}' tags
 
 ## `rune_invalid_arguments`
 
-```
-`%rune%` cannot be called with arguments
-```
+> [!NOTE] '%rune%' cannot be called with arguments
 
 ## `rune_invalid_arguments_length`
 
-```
-`%rune%` must be called with %args%
-```
+> [!NOTE] '%rune%' must be called with %args%
 
 ## `rune_invalid_computed_property`
 
-```
-Cannot access a computed property of a rune
-```
+> [!NOTE] Cannot access a computed property of a rune
 
 ## `rune_invalid_name`
 
-```
-`%name%` is not a valid rune
-```
+> [!NOTE] '%name%' is not a valid rune
 
 ## `rune_invalid_usage`
 
-```
-Cannot use `%rune%` rune in non-runes mode
-```
+> [!NOTE] Cannot use '%rune%' rune in non-runes mode
 
 ## `rune_missing_parentheses`
 
-```
-Cannot use rune without parentheses
-```
+> [!NOTE] Cannot use rune without parentheses
 
 ## `rune_removed`
 
-```
-The `%name%` rune has been removed
-```
+> [!NOTE] The '%name%' rune has been removed
 
 ## `rune_renamed`
 
-```
-`%name%` is now `%replacement%`
-```
+> [!NOTE] '%name%' is now '%replacement%'
 
 ## `runes_mode_invalid_import`
 
-```
-%name% cannot be used in runes mode
-```
+> [!NOTE] %name% cannot be used in runes mode
 
 ## `script_duplicate`
 
-```
-A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
-```
+> [!NOTE] A component can have a single top-level '\<script>' element and/or a single top-level '\<script module>' element
 
 ## `script_invalid_attribute_value`
 
-```
-If the `%name%` attribute is supplied, it must be a boolean attribute
-```
+> [!NOTE] If the '%name%' attribute is supplied, it must be a boolean attribute
 
 ## `script_invalid_context`
 
-```
-If the context attribute is supplied, its value must be "module"
-```
+> [!NOTE] If the context attribute is supplied, its value must be "module"
 
 ## `script_reserved_attribute`
 
-```
-The `%name%` attribute is reserved and cannot be used
-```
+> [!NOTE] The '%name%' attribute is reserved and cannot be used
 
 ## `slot_attribute_duplicate`
 
-```
-Duplicate slot name '%name%' in <%component%>
-```
+> [!NOTE] Duplicate slot name '%name%' in \<%component%>
 
 ## `slot_attribute_invalid`
 
-```
-slot attribute must be a static value
-```
+> [!NOTE] slot attribute must be a static value
 
 ## `slot_attribute_invalid_placement`
 
-```
-Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
-```
+> [!NOTE] Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
 
 ## `slot_default_duplicate`
 
-```
-Found default slot content alongside an explicit slot="default"
-```
+> [!NOTE] Found default slot content alongside an explicit slot="default"
 
 ## `slot_element_invalid_attribute`
 
-```
-`<slot>` can only receive attributes and (optionally) let directives
-```
+> [!NOTE] '\<slot>' can only receive attributes and (optionally) let directives
 
 ## `slot_element_invalid_name`
 
-```
-slot attribute must be a static value
-```
+> [!NOTE] slot attribute must be a static value
 
 ## `slot_element_invalid_name_default`
 
-```
-`default` is a reserved word — it cannot be used as a slot name
-```
+> [!NOTE] 'default' is a reserved word — it cannot be used as a slot name
 
 ## `slot_snippet_conflict`
 
-```
-Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely
-```
+> [!NOTE] Cannot use '\<slot>' syntax and '{@render ...}' tags in the same component. Migrate towards '{@render ...}' tags completely
 
 ## `snippet_conflict`
 
-```
-Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
-```
+> [!NOTE] Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
 
 ## `snippet_invalid_rest_parameter`
 
-```
-Snippets do not support rest parameters; use an array instead
-```
+> [!NOTE] Snippets do not support rest parameters; use an array instead
 
 ## `snippet_parameter_assignment`
 
-```
-Cannot reassign or bind to snippet parameter
-```
+> [!NOTE] Cannot reassign or bind to snippet parameter
 
 ## `snippet_shadowing_prop`
 
-```
-This snippet is shadowing the prop `%prop%` with the same name
-```
+> [!NOTE] This snippet is shadowing the prop '%prop%' with the same name
 
 ## `state_invalid_export`
 
-```
-Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
-```
+> [!NOTE] Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
 
 ## `state_invalid_placement`
 
-```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
-```
+> [!NOTE] '%rune%(...)' can only be used as a variable declaration initializer or a class field
 
 ## `store_invalid_scoped_subscription`
 
-```
-Cannot subscribe to stores that are not declared at the top level of the component
-```
+> [!NOTE] Cannot subscribe to stores that are not declared at the top level of the component
 
 ## `store_invalid_subscription`
 
-```
-Cannot reference store value inside `<script module>`
-```
+> [!NOTE] Cannot reference store value inside '\<script module>'
 
 ## `store_invalid_subscription_module`
 
-```
-Cannot reference store value outside a `.svelte` file
-```
+> [!NOTE] Cannot reference store value outside a '.svelte' file
 
 Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
 
 ## `style_directive_invalid_modifier`
 
-```
-`style:` directive can only use the `important` modifier
-```
+> [!NOTE] 'style:' directive can only use the 'important' modifier
 
 ## `style_duplicate`
 
-```
-A component can have a single top-level `<style>` element
-```
+> [!NOTE] A component can have a single top-level '\<style>' element
 
 ## `svelte_body_illegal_attribute`
 
-```
-`<svelte:body>` does not support non-event attributes or spread attributes
-```
+> [!NOTE] '\<svelte:body>' does not support non-event attributes or spread attributes
 
 ## `svelte_component_invalid_this`
 
-```
-Invalid component definition — must be an `{expression}`
-```
+> [!NOTE] Invalid component definition — must be an '{expression}'
 
 ## `svelte_component_missing_this`
 
-```
-`<svelte:component>` must have a 'this' attribute
-```
+> [!NOTE] '\<svelte:component>' must have a 'this' attribute
 
 ## `svelte_element_missing_this`
 
-```
-`<svelte:element>` must have a 'this' attribute with a value
-```
+> [!NOTE] '\<svelte:element>' must have a 'this' attribute with a value
 
 ## `svelte_fragment_invalid_attribute`
 
-```
-`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive
-```
+> [!NOTE] '\<svelte:fragment>' can only have a slot attribute and (optionally) a let: directive
 
 ## `svelte_fragment_invalid_placement`
 
-```
-`<svelte:fragment>` must be the direct child of a component
-```
+> [!NOTE] '\<svelte:fragment>' must be the direct child of a component
 
 ## `svelte_head_illegal_attribute`
 
-```
-`<svelte:head>` cannot have attributes nor directives
-```
+> [!NOTE] '\<svelte:head>' cannot have attributes nor directives
 
 ## `svelte_meta_duplicate`
 
-```
-A component can only have one `<%name%>` element
-```
+> [!NOTE] A component can only have one '\<%name%>' element
 
 ## `svelte_meta_invalid_content`
 
-```
-<%name%> cannot have children
-```
+> [!NOTE] \<%name%> cannot have children
 
 ## `svelte_meta_invalid_placement`
 
-```
-`<%name%>` tags cannot be inside elements or blocks
-```
+> [!NOTE] '\<%name%>' tags cannot be inside elements or blocks
 
 ## `svelte_meta_invalid_tag`
 
-```
-Valid `<svelte:...>` tag names are %list%
-```
+> [!NOTE] Valid '\<svelte:...>' tag names are %list%
 
 ## `svelte_options_deprecated_tag`
 
-```
-"tag" option is deprecated — use "customElement" instead
-```
+> [!NOTE] "tag" option is deprecated — use "customElement" instead
 
 ## `svelte_options_invalid_attribute`
 
-```
-`<svelte:options>` can only receive static attributes
-```
+> [!NOTE] '\<svelte:options>' can only receive static attributes
 
 ## `svelte_options_invalid_attribute_value`
 
-```
-Value must be %list%, if specified
-```
+> [!NOTE] Value must be %list%, if specified
 
 ## `svelte_options_invalid_customelement`
 
-```
-"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
-```
+> [!NOTE] "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 
 ## `svelte_options_invalid_customelement_props`
 
-```
-"props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
-```
+> [!NOTE] "props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
 
 ## `svelte_options_invalid_customelement_shadow`
 
-```
-"shadow" must be either "open" or "none"
-```
+> [!NOTE] "shadow" must be either "open" or "none"
 
 ## `svelte_options_invalid_tagname`
 
-```
-Tag name must be lowercase and hyphenated
-```
+> [!NOTE] Tag name must be lowercase and hyphenated
 
 See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
 
 ## `svelte_options_reserved_tagname`
 
-```
-Tag name is reserved
-```
+> [!NOTE] Tag name is reserved
 
 See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
 
 ## `svelte_options_unknown_attribute`
 
-```
-`<svelte:options>` unknown attribute '%name%'
-```
+> [!NOTE] '\<svelte:options>' unknown attribute '%name%'
 
 ## `svelte_self_invalid_placement`
 
-```
-`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components
-```
+> [!NOTE] '\<svelte:self>' components can only exist inside '{#if}' blocks, '{#each}' blocks, '{#snippet}' blocks or slots passed to components
 
 ## `tag_invalid_name`
 
-```
-Expected a valid element or component name. Components must have a valid variable name or dot notation expression
-```
+> [!NOTE] Expected a valid element or component name. Components must have a valid variable name or dot notation expression
 
 ## `tag_invalid_placement`
 
-```
-{@%name% ...} tag cannot be %location%
-```
+> [!NOTE] {@%name% ...} tag cannot be %location%
 
 ## `textarea_invalid_content`
 
-```
-A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
-```
+> [!NOTE] A '\<textarea>' can have either a value attribute or (equivalently) child content, but not both
 
 ## `title_illegal_attribute`
 
-```
-`<title>` cannot have attributes nor directives
-```
+> [!NOTE] '\<title>' cannot have attributes nor directives
 
 ## `title_invalid_content`
 
-```
-`<title>` can only contain text and {tags}
-```
+> [!NOTE] '\<title>' can only contain text and {tags}
 
 ## `transition_conflict`
 
-```
-Cannot use `%type%:` alongside existing `%existing%:` directive
-```
+> [!NOTE] Cannot use '%type%:' alongside existing '%existing%:' directive
 
 ## `transition_duplicate`
 
-```
-Cannot use multiple `%type%:` directives on a single element
-```
+> [!NOTE] Cannot use multiple '%type%:' directives on a single element
 
 ## `typescript_invalid_feature`
 
-```
-TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
-```
+> [!NOTE] TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of '\<script>' tags, these features are not supported. For use within '\<script>' tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using 'vitePreprocess', make sure to specifically enable preprocessing script tags ('vitePreprocess({ script: true })')
 
 ## `unexpected_eof`
 
-```
-Unexpected end of input
-```
+> [!NOTE] Unexpected end of input
 
 ## `unexpected_reserved_word`
 
-```
-'%word%' is a reserved word in JavaScript and cannot be used here
-```
+> [!NOTE] '%word%' is a reserved word in JavaScript and cannot be used here
 
 ## `void_element_invalid_content`
 
-```
-Void elements cannot have children or closing tags
-```
+> [!NOTE] Void elements cannot have children or closing tags
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 52450859f1..6cc22d2e66 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -3,353 +3,544 @@ title: 'Compiler warnings'
 generated: 'generated by process-messages/index.js'
 ---
 
-## `a11y_accesskey`
+Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.
+
+Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `<!-- svelte-ignore <code> -->` comment above the line that causes the warning. Example:
 
+```svelte
+<!-- svelte-ignore a11y_autofocus -->
+<input autofocus />
 ```
-Avoid using accesskey
+
+You can list multiple rules in a single comment (separated by commas), and add an explanatory note (in parentheses) alongside them:
+
+```svelte
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->
+<div onclick>...</div>
 ```
 
-## `a11y_aria_activedescendant_has_tabindex`
+## `a11y_accesskey`
+
+> [!NOTE] Avoid using accesskey
+
+Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
 
+```svelte
+<!-- A11y: Avoid using accesskey -->
+<div accesskey="z"></div>
 ```
-An element with an aria-activedescendant attribute should have a tabindex value
+
+## `a11y_aria_activedescendant_has_tabindex`
+
+> [!NOTE] An element with an aria-activedescendant attribute should have a tabindex value
+
+An element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.
+
+```svelte
+<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
+<div aria-activedescendant="some-id"></div>
 ```
 
 ## `a11y_aria_attributes`
 
-```
-`<%name%>` should not have aria-* attributes
+> [!NOTE] '\<%name%>' should not have aria-* attributes
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
+
+```svelte
+<!-- A11y: <meta> should not have aria-* attributes -->
+<meta aria-hidden="false" />
 ```
 
 ## `a11y_autocomplete_valid`
 
-```
-'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
-```
+> [!NOTE] '%value%' is an invalid value for 'autocomplete' on '\<input type="%type%">'
 
 ## `a11y_autofocus`
 
-```
-Avoid using autofocus
+> [!NOTE] Avoid using autofocus
+
+Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
+
+```svelte
+<!-- A11y: Avoid using autofocus -->
+<input autofocus />
 ```
 
 ## `a11y_click_events_have_key_events`
 
-```
-Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+> [!NOTE] Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as '\<button type="button">' or '\<a>' might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+
+Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.
+
+Users should first consider whether an interactive element might be more appropriate such as a `<button type="button">` element for actions or `<a>` element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. `Space` and `Enter` will trigger a `<button>` and `Enter` will trigger an `<a>` element.
+
+If a non-interactive element is required then `onclick` should be accompanied by an `onkeyup` or `onkeydown` handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). While an `onkeypress` handler will also silence this warning, it should be noted that the `keypress` event is deprecated.
+
+```svelte
+<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->
+<div onclick={() => {}}></div>
 ```
 
+Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
+
 ## `a11y_consider_explicit_label`
 
-```
-Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
-```
+> [!NOTE] Buttons and links should either contain text or have an 'aria-label' or 'aria-labelledby' attribute
 
 ## `a11y_distracting_elements`
 
-```
-Avoid `<%name%>` elements
+> [!NOTE] Avoid '\<%name%>' elements
+
+Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
+
+The following elements are visually distracting: `<marquee>` and `<blink>`.
+
+```svelte
+<!-- A11y: Avoid <marquee> elements -->
+<marquee></marquee>
 ```
 
 ## `a11y_figcaption_index`
 
-```
-`<figcaption>` must be first or last child of `<figure>`
-```
+> [!NOTE] '\<figcaption>' must be first or last child of '\<figure>'
 
 ## `a11y_figcaption_parent`
 
-```
-`<figcaption>` must be an immediate child of `<figure>`
+> [!NOTE] '\<figcaption>' must be an immediate child of '\<figure>'
+
+Enforce that certain DOM elements have the correct structure.
+
+```svelte
+<!-- A11y: <figcaption> must be an immediate child of <figure> -->
+<div>
+	<figcaption>Image caption</figcaption>
+</div>
 ```
 
 ## `a11y_hidden`
 
-```
-`<%name%>` element should not be hidden
+> [!NOTE] '\<%name%>' element should not be hidden
+
+Certain DOM elements are useful for screen reader navigation and should not be hidden.
+
+<!-- prettier-ignore -->
+```svelte
+<!-- A11y: <h2> element should not be hidden -->
+<h2 aria-hidden="true">invisible header</h2>
 ```
 
 ## `a11y_img_redundant_alt`
 
-```
-Screenreaders already announce `<img>` elements as an image
+> [!NOTE] Screenreaders already announce '\<img>' elements as an image
+
+Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
+
+```svelte
+<img src="foo" alt="Foo eating a sandwich." />
+
+<!-- aria-hidden, won't be announced by screen reader -->
+<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />
+
+<!-- A11y: Screen readers already announce <img> elements as an image. -->
+<img src="foo" alt="Photo of foo being weird." />
+
+<!-- A11y: Screen readers already announce <img> elements as an image. -->
+<img src="bar" alt="Image of me at a bar!" />
+
+<!-- A11y: Screen readers already announce <img> elements as an image. -->
+<img src="foo" alt="Picture of baz fixing a bug." />
 ```
 
 ## `a11y_incorrect_aria_attribute_type`
 
-```
-The value of '%attribute%' must be a %type%
+> [!NOTE] The value of '%attribute%' must be a %type%
+
+Enforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`
+should only receive a boolean.
+
+```svelte
+<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
+<div aria-hidden="yes"></div>
 ```
 
 ## `a11y_incorrect_aria_attribute_type_boolean`
 
-```
-The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
-```
+> [!NOTE] The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
 
 ## `a11y_incorrect_aria_attribute_type_id`
 
-```
-The value of '%attribute%' must be a string that represents a DOM element ID
-```
+> [!NOTE] The value of '%attribute%' must be a string that represents a DOM element ID
 
 ## `a11y_incorrect_aria_attribute_type_idlist`
 
-```
-The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
-```
+> [!NOTE] The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
 
 ## `a11y_incorrect_aria_attribute_type_integer`
 
-```
-The value of '%attribute%' must be an integer
-```
+> [!NOTE] The value of '%attribute%' must be an integer
 
 ## `a11y_incorrect_aria_attribute_type_token`
 
-```
-The value of '%attribute%' must be exactly one of %values%
-```
+> [!NOTE] The value of '%attribute%' must be exactly one of %values%
 
 ## `a11y_incorrect_aria_attribute_type_tokenlist`
 
-```
-The value of '%attribute%' must be a space-separated list of one or more of %values%
-```
+> [!NOTE] The value of '%attribute%' must be a space-separated list of one or more of %values%
 
 ## `a11y_incorrect_aria_attribute_type_tristate`
 
-```
-The value of '%attribute%' must be exactly one of true, false, or mixed
-```
+> [!NOTE] The value of '%attribute%' must be exactly one of true, false, or mixed
 
 ## `a11y_interactive_supports_focus`
 
-```
-Elements with the '%role%' interactive role must have a tabindex value
+> [!NOTE] Elements with the '%role%' interactive role must have a tabindex value
+
+Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.
+
+```svelte
+<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
+<div role="button" onkeypress={() => {}} />
 ```
 
 ## `a11y_invalid_attribute`
 
-```
-'%href_value%' is not a valid %href_attribute% attribute
+> [!NOTE] '%href_value%' is not a valid %href_attribute% attribute
+
+Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
+
+```svelte
+<!-- A11y: '' is not a valid href attribute -->
+<a href="">invalid</a>
 ```
 
 ## `a11y_label_has_associated_control`
 
-```
-A form label must be associated with a control
+> [!NOTE] A form label must be associated with a control
+
+Enforce that a label tag has a text label and an associated control.
+
+There are two supported ways to associate a label with a control:
+
+- Wrapping a control in a label tag.
+- Adding `for` to a label and assigning it the ID of an input on the page.
+
+```svelte
+<label for="id">B</label>
+
+<label>C <input type="text" /></label>
+
+<!-- A11y: A form label must be associated with a control. -->
+<label>A</label>
 ```
 
 ## `a11y_media_has_caption`
 
-```
-`<video>` elements must have a `<track kind="captions">`
+> [!NOTE] '\<video>' elements must have a '\<track kind="captions">'
+
+Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
+
+The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.
+
+```svelte
+<video><track kind="captions" /></video>
+
+<audio muted></audio>
+
+<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
+<video></video>
+
+<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
+<video><track /></video>
 ```
 
 ## `a11y_misplaced_role`
 
-```
-`<%name%>` should not have role attribute
+> [!NOTE] '\<%name%>' should not have role attribute
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
+
+```svelte
+<!-- A11y: <meta> should not have role attribute -->
+<meta role="tooltip" />
 ```
 
 ## `a11y_misplaced_scope`
 
-```
-The scope attribute should only be used with `<th>` elements
+> [!NOTE] The scope attribute should only be used with '\<th>' elements
+
+The scope attribute should only be used on `<th>` elements.
+
+<!-- prettier-ignore -->
+```svelte
+<!-- A11y: The scope attribute should only be used with <th> elements -->
+<div scope="row" />
 ```
 
 ## `a11y_missing_attribute`
 
-```
-`<%name%>` element should have %article% %sequence% attribute
+> [!NOTE] '\<%name%>' element should have %article% %sequence% attribute
+
+Enforce that attributes required for accessibility are present on an element. This includes the following checks:
+
+- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))
+- `<area>` should have alt, aria-label, or aria-labelledby
+- `<html>` should have lang
+- `<iframe>` should have title
+- `<img>` should have alt
+- `<object>` should have title, aria-label, or aria-labelledby
+- `<input type="image">` should have alt, aria-label, or aria-labelledby
+
+```svelte
+<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
+<input type="image" />
+
+<!-- A11y: <html> element should have a lang attribute -->
+<html></html>
+
+<!-- A11y: <a> element should have an href attribute -->
+<a>text</a>
 ```
 
 ## `a11y_missing_content`
 
-```
-`<%name%>` element should contain text
+> [!NOTE] '\<%name%>' element should contain text
+
+Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
+
+```svelte
+<!-- A11y: <a> element should have child content -->
+<a href="/foo"></a>
+
+<!-- A11y: <h1> element should have child content -->
+<h1></h1>
 ```
 
 ## `a11y_mouse_events_have_key_events`
 
-```
-'%event%' event must be accompanied by '%accompanied_by%' event
+> [!NOTE] '%event%' event must be accompanied by '%accompanied_by%' event
+
+Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `onblur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
+
+```svelte
+<!-- A11y: onmouseover must be accompanied by onfocus -->
+<div onmouseover={handleMouseover} />
+
+<!-- A11y: onmouseout must be accompanied by onblur -->
+<div onmouseout={handleMouseout} />
 ```
 
 ## `a11y_no_abstract_role`
 
-```
-Abstract role '%role%' is forbidden
-```
+> [!NOTE] Abstract role '%role%' is forbidden
 
 ## `a11y_no_interactive_element_to_noninteractive_role`
 
-```
-`<%element%>` cannot have role '%role%'
+> [!NOTE] '\<%element%>' cannot have role '%role%'
+
+[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
+
+```svelte
+<!-- A11y: <textarea> cannot have role 'listitem' -->
+<textarea role="listitem"></textarea>
 ```
 
 ## `a11y_no_noninteractive_element_interactions`
 
-```
-Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners
+> [!NOTE] Non-interactive element '\<%element%>' should not be assigned mouse or keyboard event listeners
+
+A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
+
+```sv
+<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
+<li onclick={() => {}}></li>
+
+<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
+<div role="listitem" onclick={() => {}}></div>
 ```
 
 ## `a11y_no_noninteractive_element_to_interactive_role`
 
-```
-Non-interactive element `<%element%>` cannot have interactive role '%role%'
+> [!NOTE] Non-interactive element '\<%element%>' cannot have interactive role '%role%'
+
+[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
+
+```svelte
+<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
+<h3 role="searchbox">Button</h3>
 ```
 
 ## `a11y_no_noninteractive_tabindex`
 
-```
-noninteractive element cannot have nonnegative tabIndex value
+> [!NOTE] noninteractive element cannot have nonnegative tabIndex value
+
+Tab key navigation should be limited to elements on the page that can be interacted with.
+
+```svelte
+<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
+<div tabindex="0"></div>
 ```
 
 ## `a11y_no_redundant_roles`
 
-```
-Redundant role '%role%'
+> [!NOTE] Redundant role '%role%'
+
+Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
+
+```svelte
+<!-- A11y: Redundant role 'button' -->
+<button role="button">...</button>
+
+<!-- A11y: Redundant role 'img' -->
+<img role="img" src="foo.jpg" />
 ```
 
 ## `a11y_no_static_element_interactions`
 
-```
-`<%element%>` with a %handler% handler must have an ARIA role
+> [!NOTE] '\<%element%>' with a %handler% handler must have an ARIA role
+
+Elements like `<div>` with interactive handlers like `click` must have an ARIA role.
+
+```svelte
+<!-- A11y: <div> with click handler must have an ARIA role -->
+<div onclick={() => ''}></div>
 ```
 
 ## `a11y_positive_tabindex`
 
-```
-Avoid tabindex values above zero
+> [!NOTE] Avoid tabindex values above zero
+
+Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
+
+```svelte
+<!-- A11y: avoid tabindex values above zero -->
+<div tabindex="1"></div>
 ```
 
 ## `a11y_role_has_required_aria_props`
 
-```
-Elements with the ARIA role "%role%" must have the following attributes defined: %props%
+> [!NOTE] Elements with the ARIA role "%role%" must have the following attributes defined: %props%
+
+Elements with ARIA roles must have all required attributes for that role.
+
+```svelte
+<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
 ```
 
 ## `a11y_role_supports_aria_props`
 
-```
-The attribute '%attribute%' is not supported by the role '%role%'
+> [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'
+
+Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
+
+```svelte
+<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
+<div role="link" aria-multiline></div>
+
+<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
+<li aria-required></li>
 ```
 
 ## `a11y_role_supports_aria_props_implicit`
 
-```
-The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`
+> [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element '\<%name%>'
+
+Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
+
+```svelte
+<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
+<div role="link" aria-multiline></div>
+
+<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
+<li aria-required></li>
 ```
 
 ## `a11y_unknown_aria_attribute`
 
-```
-Unknown aria attribute 'aria-%attribute%'
-```
-```
-Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
+> [!NOTE] Unknown aria attribute 'aria-%attribute%'
+
+> [!NOTE] Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
+
+Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
+
+```svelte
+<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
+<input type="image" aria-labeledby="foo" />
 ```
 
 ## `a11y_unknown_role`
 
-```
-Unknown role '%role%'
-```
-```
-Unknown role '%role%'. Did you mean '%suggestion%'?
+> [!NOTE] Unknown role '%role%'
+
+> [!NOTE] Unknown role '%role%'. Did you mean '%suggestion%'?
+
+Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
+
+```svelte
+<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
+<div role="toooltip"></div>
 ```
 
 ## `attribute_avoid_is`
 
-```
-The "is" attribute is not supported cross-browser and should be avoided
-```
+> [!NOTE] The "is" attribute is not supported cross-browser and should be avoided
 
 ## `attribute_global_event_reference`
 
-```
-You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
-```
+> [!NOTE] You are referencing 'globalThis.%name%'. Did you forget to declare a variable with that name?
 
 ## `attribute_illegal_colon`
 
-```
-Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
-```
+> [!NOTE] Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
 
 ## `attribute_invalid_property_name`
 
-```
-'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
-```
+> [!NOTE] '%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
 
 ## `attribute_quoted`
 
-```
-Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
-```
+> [!NOTE] Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 
 ## `bind_invalid_each_rest`
 
-```
-The rest operator (...) will create a new object and binding '%name%' with the original object will not work
-```
+> [!NOTE] The rest operator (...) will create a new object and binding '%name%' with the original object will not work
 
 ## `block_empty`
 
-```
-Empty block
-```
+> [!NOTE] Empty block
 
 ## `component_name_lowercase`
 
-```
-`<%name%>` will be treated as an HTML element unless it begins with a capital letter
-```
+> [!NOTE] '\<%name%>' will be treated as an HTML element unless it begins with a capital letter
 
 ## `css_unused_selector`
 
-```
-Unused CSS selector "%name%"
-```
+> [!NOTE] Unused CSS selector "%name%"
 
 ## `element_invalid_self_closing_tag`
 
-```
-Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
-```
+> [!NOTE] Self-closing HTML tags for non-void elements are ambiguous — use '\<%name% ...>\</%name%>' rather than '\<%name% ... />'
 
 ## `event_directive_deprecated`
 
-```
-Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
-```
+> [!NOTE] Using 'on:%name%' to listen to the %name% event is deprecated. Use the event attribute 'on%name%' instead
 
 ## `export_let_unused`
 
-```
-Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
-```
+> [!NOTE] Component has unused export property '%name%'. If it is for external reference only, please consider using 'export const %name%'
 
 ## `legacy_code`
 
-```
-`%code%` is no longer valid — please use `%suggestion%` instead
-```
+> [!NOTE] '%code%' is no longer valid — please use '%suggestion%' instead
 
 ## `legacy_component_creation`
 
-```
-Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
-```
+> [!NOTE] Svelte 5 components are no longer classes. Instantiate them using 'mount' or 'hydrate' (imported from 'svelte') instead.
 
 ## `node_invalid_placement_ssr`
 
-```
-%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
-```
+> [!NOTE] %thing% is invalid inside '\<%parent%>'. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a 'hydration_mismatch' warning
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
@@ -361,117 +552,79 @@ This code will work when the component is rendered on the client (which is why t
 
 ## `non_reactive_update`
 
-```
-`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
-```
+> [!NOTE] '%name%' is updated, but is not declared with '$state(...)'. Changing its value will not correctly trigger updates
 
 ## `options_deprecated_accessors`
 
-```
-The `accessors` option has been deprecated. It will have no effect in runes mode
-```
+> [!NOTE] The 'accessors' option has been deprecated. It will have no effect in runes mode
 
 ## `options_deprecated_immutable`
 
-```
-The `immutable` option has been deprecated. It will have no effect in runes mode
-```
+> [!NOTE] The 'immutable' option has been deprecated. It will have no effect in runes mode
 
 ## `options_missing_custom_element`
 
-```
-The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
-```
+> [!NOTE] The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
 
 ## `options_removed_enable_sourcemap`
 
-```
-The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
-```
+> [!NOTE] The 'enableSourcemap' option has been removed. Source maps are always generated now, and tooling can choose to ignore them
 
 ## `options_removed_hydratable`
 
-```
-The `hydratable` option has been removed. Svelte components are always hydratable now
-```
+> [!NOTE] The 'hydratable' option has been removed. Svelte components are always hydratable now
 
 ## `options_removed_loop_guard_timeout`
 
-```
-The `loopGuardTimeout` option has been removed
-```
+> [!NOTE] The 'loopGuardTimeout' option has been removed
 
 ## `options_renamed_ssr_dom`
 
-```
-`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
-```
+> [!NOTE] 'generate: "dom"' and 'generate: "ssr"' options have been renamed to "client" and "server" respectively
 
 ## `perf_avoid_inline_class`
 
-```
-Avoid 'new class' — instead, declare the class at the top level scope
-```
+> [!NOTE] Avoid 'new class' — instead, declare the class at the top level scope
 
 ## `perf_avoid_nested_class`
 
-```
-Avoid declaring classes below the top level scope
-```
+> [!NOTE] Avoid declaring classes below the top level scope
 
 ## `reactive_declaration_invalid_placement`
 
-```
-Reactive declarations only exist at the top level of the instance script
-```
+> [!NOTE] Reactive declarations only exist at the top level of the instance script
 
 ## `reactive_declaration_module_script_dependency`
 
-```
-Reassignments of module-level declarations will not cause reactive statements to update
-```
+> [!NOTE] Reassignments of module-level declarations will not cause reactive statements to update
 
 ## `reactive_declaration_non_reactive_property`
 
-```
-Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
-```
+> [!NOTE] Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
 
 ## `script_context_deprecated`
 
-```
-`context="module"` is deprecated, use the `module` attribute instead
-```
+> [!NOTE] 'context="module"' is deprecated, use the 'module' attribute instead
 
 ## `script_unknown_attribute`
 
-```
-Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
-```
+> [!NOTE] Unrecognized attribute — should be one of 'generics', 'lang' or 'module'. If this exists for a preprocessor, ensure that the preprocessor removes it
 
 ## `slot_element_deprecated`
 
-```
-Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
-```
+> [!NOTE] Using '\<slot>' to render parent content is deprecated. Use '{@render ...}' tags instead
 
 ## `state_referenced_locally`
 
-```
-State referenced in its own scope will never update. Did you mean to reference it inside a closure?
-```
+> [!NOTE] State referenced in its own scope will never update. Did you mean to reference it inside a closure?
 
 ## `store_rune_conflict`
 
-```
-It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
-```
+> [!NOTE] It looks like you're using the '$%name%' rune, but there is a local binding called '%name%'. Referencing a local variable with a '$' prefix will create a store subscription. Please rename '%name%' to avoid the ambiguity
 
 ## `svelte_component_deprecated`
 
-```
-`<svelte:component>` is deprecated in runes mode — components are dynamic by default
-```
+> [!NOTE] '\<svelte:component>' is deprecated in runes mode — components are dynamic by default
 
 In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
 
@@ -503,21 +656,14 @@ A derived value may be used in other contexts:
 
 ## `svelte_element_invalid_this`
 
-```
-`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
-```
+> [!NOTE] 'this' should be an '{expression}'. Using a string attribute value will cause an error in future versions of Svelte
 
 ## `svelte_self_deprecated`
 
-```
-`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
-```
+> [!NOTE] '\<svelte:self>' is deprecated — use self-imports (e.g. 'import %name% from './%basename%'') instead
 
 ## `unknown_code`
 
-```
-`%code%` is not a recognised code
-```
-```
-`%code%` is not a recognised code (did you mean `%suggestion%`?)
-```
+> [!NOTE] '%code%' is not a recognised code
+
+> [!NOTE] '%code%' is not a recognised code (did you mean '%suggestion%'?)
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index b5b4296ec0..3ab3605176 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -5,159 +5,106 @@ generated: 'generated by process-messages/index.js'
 
 ## `bind_invalid_checkbox_value`
 
-```
-Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
-```
+> [!NOTE] Using 'bind:value' together with a checkbox input is not allowed. Use 'bind:checked' instead
 
 ## `bind_invalid_export`
 
-```
-Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
-```
+> [!NOTE] Component %component% has an export named '%key%' that a consumer component is trying to access using 'bind:%key%', which is disallowed. Instead, use 'bind:this' (e.g. '\<%name% bind:this={component} />') and then access the property on the bound component instance (e.g. 'component.%key%')
 
 ## `bind_not_bindable`
 
-```
-A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
-```
+> [!NOTE] A component is attempting to bind to a non-bindable property '%key%' belonging to %component% (i.e. '\<%name% bind:%key%={...}>'). To mark a property as bindable: 'let { %key% = $bindable() } = $props()'
 
 ## `component_api_changed`
 
-```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
-```
+> [!NOTE] %parent% called '%method%' on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
 
 ## `component_api_invalid_new`
 
-```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
-```
+> [!NOTE] Attempted to instantiate %component% with 'new %name%', which is no longer valid in Svelte 5. If this component is not under your control, set the 'compatibility.componentApi' compiler option to '4' to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
 
 ## `derived_references_self`
 
-```
-A derived value cannot reference itself recursively
-```
+> [!NOTE] A derived value cannot reference itself recursively
 
 ## `each_key_duplicate`
 
-```
-Keyed each block has duplicate key at indexes %a% and %b%
-```
-```
-Keyed each block has duplicate key `%value%` at indexes %a% and %b%
-```
+> [!NOTE] Keyed each block has duplicate key at indexes %a% and %b%
+
+> [!NOTE] Keyed each block has duplicate key '%value%' at indexes %a% and %b%
 
 ## `effect_in_teardown`
 
-```
-`%rune%` cannot be used inside an effect cleanup function
-```
+> [!NOTE] '%rune%' cannot be used inside an effect cleanup function
 
 ## `effect_in_unowned_derived`
 
-```
-Effect cannot be created inside a `$derived` value that was not itself created inside an effect
-```
+> [!NOTE] Effect cannot be created inside a '$derived' value that was not itself created inside an effect
 
 ## `effect_orphan`
 
-```
-`%rune%` can only be used inside an effect (e.g. during component initialisation)
-```
+> [!NOTE] '%rune%' can only be used inside an effect (e.g. during component initialisation)
 
 ## `effect_update_depth_exceeded`
 
-```
-Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
-```
+> [!NOTE] Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
 
 ## `hydration_failed`
 
-```
-Failed to hydrate the application
-```
+> [!NOTE] Failed to hydrate the application
 
 ## `invalid_default_snippet`
 
-```
-Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
-```
+> [!NOTE] Cannot use '{@render children(...)}' if the parent component uses 'let:' directives. Consider using a named snippet instead
 
 ## `invalid_snippet`
 
-```
-Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
-```
+> [!NOTE] Could not '{@render}' snippet due to the expression being 'null' or 'undefined'. Consider using optional chaining '{@render snippet?.()}'
 
 ## `lifecycle_function_unavailable`
 
-```
-`%name%(...)` is not available on the server
-```
+> [!NOTE] '%name%(...)' is not available on the server
 
 ## `lifecycle_legacy_only`
 
-```
-`%name%(...)` cannot be used in runes mode
-```
+> [!NOTE] '%name%(...)' cannot be used in runes mode
 
 ## `lifecycle_outside_component`
 
-```
-`%name%(...)` can only be used during component initialisation
-```
+> [!NOTE] '%name%(...)' can only be used during component initialisation
 
 ## `props_invalid_value`
 
-```
-Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
-```
+> [!NOTE] Cannot do 'bind:%key%={undefined}' when '%key%' has a fallback value
 
 ## `props_rest_readonly`
 
-```
-Rest element properties of `$props()` such as `%property%` are readonly
-```
+> [!NOTE] Rest element properties of '$props()' such as '%property%' are readonly
 
 ## `rune_outside_svelte`
 
-```
-The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
-```
+> [!NOTE] The '%rune%' rune is only available inside '.svelte' and '.svelte.js/ts' files
 
 ## `state_descriptors_fixed`
 
-```
-Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
-```
+> [!NOTE] Property descriptors defined on '$state' objects must contain 'value' and always be 'enumerable', 'configurable' and 'writable'.
 
 ## `state_prototype_fixed`
 
-```
-Cannot set prototype of `$state` object
-```
+> [!NOTE] Cannot set prototype of '$state' object
 
 ## `state_unsafe_local_read`
 
-```
-Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
-```
+> [!NOTE] Reading state that was created inside the same derived is forbidden. Consider using 'untrack' to read locally created state
 
 ## `state_unsafe_mutation`
 
-```
-Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
-```
+> [!NOTE] Updating state inside a derived is forbidden. If the value should not be reactive, declare it without '$state'
 
 ## `store_invalid_shape`
 
-```
-`%name%` is not a store with a `subscribe` method
-```
+> [!NOTE] '%name%' is not a store with a 'subscribe' method
 
 ## `svelte_element_invalid_this_value`
 
-```
-The `this` prop on `<svelte:element>` must be a string, if defined
-```
+> [!NOTE] The 'this' prop on '\<svelte:element>' must be a string, if defined
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 3793e2ccc5..f21b8b1e86 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -5,18 +5,13 @@ generated: 'generated by process-messages/index.js'
 
 ## `binding_property_non_reactive`
 
-```
-`%binding%` is binding to a non-reactive property
-```
-```
-`%binding%` (%location%) is binding to a non-reactive property
-```
+> [!NOTE] '%binding%' is binding to a non-reactive property
+
+> [!NOTE] '%binding%' (%location%) is binding to a non-reactive property
 
 ## `console_log_state`
 
-```
-Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
-```
+> [!NOTE] Your 'console.%method%' contained '$state' proxies. Consider using '$inspect(...)' or '$state.snapshot(...)' instead
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
@@ -24,72 +19,49 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 
 ## `dynamic_void_element_content`
 
-```
-`<svelte:element this="%tag%">` is a void element — it cannot have content
-```
+> [!NOTE] '\<svelte:element this="%tag%">' is a void element — it cannot have content
 
 ## `event_handler_invalid`
 
-```
-%handler% should be a function. Did you mean to %suggestion%?
-```
+> [!NOTE] %handler% should be a function. Did you mean to %suggestion%?
 
 ## `hydration_attribute_changed`
 
-```
-The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
-```
+> [!NOTE] The '%attribute%' attribute on '%html%' changed its value between server and client renders. The client value, '%value%', will be ignored in favour of the server value
 
 ## `hydration_html_changed`
 
-```
-The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
-```
-```
-The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
-```
+> [!NOTE] The value of an '{@html ...}' block changed between server and client renders. The client value will be ignored in favour of the server value
+
+> [!NOTE] The value of an '{@html ...}' block %location% changed between server and client renders. The client value will be ignored in favour of the server value
 
 ## `hydration_mismatch`
 
-```
-Hydration failed because the initial UI does not match what was rendered on the server
-```
-```
-Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
-```
+> [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server
+
+> [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
 
 ## `invalid_raw_snippet_render`
 
-```
-The `render` function passed to `createRawSnippet` should return HTML for a single element
-```
+> [!NOTE] The 'render' function passed to 'createRawSnippet' should return HTML for a single element
 
 ## `lifecycle_double_unmount`
 
-```
-Tried to unmount a component that was not mounted
-```
+> [!NOTE] Tried to unmount a component that was not mounted
 
 ## `ownership_invalid_binding`
 
-```
-%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
-```
+> [!NOTE] %parent% passed a value to %child% with 'bind:', but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
 
 ## `ownership_invalid_mutation`
 
-```
-Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
-```
-```
-%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
-```
+> [!NOTE] Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with 'bind:', or use a callback instead
+
+> [!NOTE] %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with 'bind:', or use a callback instead
 
 ## `state_proxy_equality_mismatch`
 
-```
-Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
-```
+> [!NOTE] Reactive '$state(...)' proxies and the values they proxy have different identities. Because of this, comparisons with '%operator%' will produce unexpected results
 
 `$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
 
@@ -106,10 +78,7 @@ To resolve this, ensure you're comparing values where both values were created w
 
 ## `state_snapshot_uncloneable`
 
-```
-Value cannot be cloned with `$state.snapshot` — the original value was returned
-```
-```
-The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
+> [!NOTE] Value cannot be cloned with '$state.snapshot' — the original value was returned
+
+> [!NOTE] The following properties cannot be cloned with '$state.snapshot' — the return value contains the originals:
 %properties%
-```

From 0fd212ceb9187438392b9669249b64c0bca813f5 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 21:13:11 +0200
Subject: [PATCH 07/13] back to main

---
 apps/svelte.dev/scripts/sync-docs/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/scripts/sync-docs/index.ts b/apps/svelte.dev/scripts/sync-docs/index.ts
index 03e1d2688a..b7cff430ea 100644
--- a/apps/svelte.dev/scripts/sync-docs/index.ts
+++ b/apps/svelte.dev/scripts/sync-docs/index.ts
@@ -27,7 +27,7 @@ const packages: Package[] = [
 		name: 'svelte',
 		local: `${REPOS}/svelte`,
 		repo: 'sveltejs/svelte',
-		branch: 'generate-warnings-errors-docs',
+		branch: 'main',
 		pkg: 'packages/svelte',
 		docs: 'documentation/docs',
 		process_modules: async (modules: Modules) => {

From 2f2723441fba1582cbcef064a703dcaea669985f Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 10 Oct 2024 21:32:51 +0200
Subject: [PATCH 08/13] lint

---
 .../content/docs/svelte/98-reference/30-compiler-errors.md | 2 +-
 .../docs/svelte/98-reference/30-compiler-warnings.md       | 7 ++++++-
 .../docs/svelte/98-reference/30-runtime-warnings.md        | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index 4ba4761eea..b1d2c1161f 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -279,7 +279,7 @@ generated: 'generated by process-messages/index.js'
 
 ## `import_svelte_internal_forbidden`
 
-> [!NOTE] Imports of 'svelte/internal/*' are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from 'svelte/internal/*' to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
+> [!NOTE] Imports of 'svelte/internal/\*' are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from 'svelte/internal/\*' to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 
 ## `invalid_arguments_usage`
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 6cc22d2e66..6a2c27f525 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -25,6 +25,7 @@ You can list multiple rules in a single comment (separated by commas), and add a
 
 Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
 
+<!-- prettier-ignore -->
 ```svelte
 <!-- A11y: Avoid using accesskey -->
 <div accesskey="z"></div>
@@ -43,7 +44,7 @@ An element with `aria-activedescendant` must be tabbable, so it must either have
 
 ## `a11y_aria_attributes`
 
-> [!NOTE] '\<%name%>' should not have aria-* attributes
+> [!NOTE] '\<%name%>' should not have aria-\* attributes
 
 Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
 
@@ -376,6 +377,7 @@ A non-interactive element does not support event handlers (mouse and key handler
 
 Tab key navigation should be limited to elements on the page that can be interacted with.
 
+<!-- prettier-ignore -->
 ```svelte
 <!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
 <div tabindex="0"></div>
@@ -401,6 +403,7 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 
 Elements like `<div>` with interactive handlers like `click` must have an ARIA role.
 
+<!-- prettier-ignore -->
 ```svelte
 <!-- A11y: <div> with click handler must have an ARIA role -->
 <div onclick={() => ''}></div>
@@ -412,6 +415,7 @@ Elements like `<div>` with interactive handlers like `click` must have an ARIA r
 
 Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
 
+<!-- prettier-ignore -->
 ```svelte
 <!-- A11y: avoid tabindex values above zero -->
 <div tabindex="1"></div>
@@ -477,6 +481,7 @@ Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA
 
 Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
 
+<!-- prettier-ignore -->
 ```svelte
 <!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
 <div role="toooltip"></div>
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index f21b8b1e86..104daec4d3 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -81,4 +81,4 @@ To resolve this, ensure you're comparing values where both values were created w
 > [!NOTE] Value cannot be cloned with '$state.snapshot' — the original value was returned
 
 > [!NOTE] The following properties cannot be cloned with '$state.snapshot' — the return value contains the originals:
-%properties%
+> %properties%

From 2ccfc42cf0ab01d2bcb79f3d02004a7e58d9ec2e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Oct 2024 18:00:31 -0400
Subject: [PATCH 09/13] sync

---
 .../03-reactivity-fundamentals.md                |  6 +++---
 .../svelte/02-template-syntax/08-bindings.md     |  2 +-
 .../02-template-syntax/09-special-elements.md    | 16 ++++++++--------
 .../content/docs/svelte/03-runes/01-state.md     | 10 +++++-----
 .../docs/svelte/03-runes/02-side-effects.md      | 12 ++++++------
 .../content/docs/svelte/04-runtime/01-stores.md  | 10 +++++-----
 .../docs/svelte/04-runtime/03-lifecycle-hooks.md |  8 ++++----
 .../04-runtime/04-imperative-component-api.md    |  8 ++++----
 .../content/docs/svelte/05-misc/01-debugging.md  |  2 +-
 .../content/docs/svelte/05-misc/03-typescript.md | 10 +++++-----
 10 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
index fd884d22dc..e2038fade5 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
@@ -12,7 +12,7 @@ Runes are function-like symbols that provide instructions to the Svelte compiler
 
 The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
 
-## `$state`
+## $state
 
 Reactive state is declared with the `$state` rune:
 
@@ -53,7 +53,7 @@ class Todo {
 > </button>
 > ```
 
-## `$derived`
+## $derived
 
 Derived state is declared with the `$derived` rune:
 
@@ -92,7 +92,7 @@ As with `$state`, you can mark class fields as `$derived`.
 >
 > This only worked at the top level of a component.
 
-## `$effect`
+## $effect
 
 To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md b/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md
index cabbc45969..7bac2ea560 100644
--- a/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md
+++ b/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md
@@ -74,7 +74,7 @@ If you're using `bind:` directives together with `on` event attributes, the bind
 
 Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
 
-## Binding `<select>` value
+## Binding <select> value
 
 A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md b/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md
index 2b41d55fe4..e6735c0efe 100644
--- a/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md
@@ -6,7 +6,7 @@ title: Special elements
 
 Some of Svelte's concepts need special elements. Those are prefixed with `svelte:` and listed here.
 
-## `<svelte:self>`
+## <svelte:self>
 
 The `<svelte:self>` element allows a component to include itself, recursively.
 
@@ -25,7 +25,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
 {/if}
 ```
 
-## `<svelte:component>`
+## <svelte:component>
 
 ```svelte
 <svelte:component this={expression} />
@@ -39,7 +39,7 @@ If `this` is falsy, no component is rendered.
 <svelte:component this={currentSelection.component} foo={bar} />
 ```
 
-## `<svelte:element>`
+## <svelte:element>
 
 ```svelte
 <svelte:element this={expression} />
@@ -69,7 +69,7 @@ Svelte tries its best to infer the correct namespace from the element's surround
 <svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
 ```
 
-## `<svelte:window>`
+## <svelte:window>
 
 ```svelte
 <svelte:window onevent={handler} />
@@ -112,7 +112,7 @@ All except `scrollX` and `scrollY` are readonly.
 
 > Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
 
-## `<svelte:document>`
+## <svelte:document>
 
 ```svelte
 <svelte:document onevent={handler} />
@@ -139,7 +139,7 @@ You can also bind to the following properties:
 
 All are readonly.
 
-## `<svelte:body>`
+## <svelte:body>
 
 ```svelte
 <svelte:body onevent={handler} />
@@ -153,7 +153,7 @@ As with `<svelte:window>` and `<svelte:document>`, this element may only appear
 <svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
 ```
 
-## `<svelte:head>`
+## <svelte:head>
 
 ```svelte
 <svelte:head>...</svelte:head>
@@ -170,7 +170,7 @@ As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element
 </svelte:head>
 ```
 
-## `<svelte:options>`
+## <svelte:options>
 
 ```svelte
 <svelte:options option={value} />
diff --git a/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md b/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
index 7bcff2c968..79c64cdf78 100644
--- a/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
+++ b/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
@@ -6,7 +6,7 @@ Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity i
 
 Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application.
 
-## `$state`
+## $state
 
 The `$state` rune is the at the heart of the runes API. It is used to declare reactive state:
 
@@ -62,7 +62,7 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
 
 > Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
 
-## `$state.raw`
+## $state.raw
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
 
@@ -84,7 +84,7 @@ person = {
 
 This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
-## `$state.snapshot`
+## $state.snapshot
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 
@@ -101,7 +101,7 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
-## `$derived`
+## $derived
 
 Derived state is declared with the `$derived` rune:
 
@@ -122,7 +122,7 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
 
 As with `$state`, you can mark class fields as `$derived`.
 
-## `$derived.by`
+## $derived.by
 
 Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md b/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md
index 3d425f8ee3..560955e7ff 100644
--- a/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md
+++ b/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md
@@ -7,7 +7,7 @@ title: Side effects
 
 Side effects play a crucial role in applications. They are triggered by state changes and can then interact with external systems, like logging something, setting up a server connection or synchronize with a third-party library that has no knowledge of Svelte's reactivity model.
 
-## `$effect` fundamentals
+## $effect fundamentals
 
 To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
 
@@ -63,7 +63,7 @@ You can return a function from `$effect`, which will run immediately before the
 <button onclick={() => (milliseconds /= 2)}>faster</button>
 ```
 
-## `$effect` dependencies
+## $effect dependencies
 
 `$effect` automatically picks up any reactivy values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
 
@@ -139,7 +139,7 @@ $effect(() => {
 });
 ```
 
-## When not to use `$effect`
+## When not to use $effect
 
 In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
 
@@ -254,7 +254,7 @@ If you need to use bindings, for whatever reason (for example when you want some
 
 If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
 
-## `$effect.pre`
+## $effect.pre
 
 In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:
 
@@ -291,7 +291,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 
 Apart from the timing, `$effect.pre` works exactly like [`$effect`](#$effect) — refer to its documentation for more info.
 
-## `$effect.tracking`
+## $effect.tracking
 
 The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/#H4sIAAAAAAAAE3XP0QrCMAwF0F-JRXAD595rLfgdzodRUyl0bVgzQcb-3VYFQfExl5tDMgvrPCYhT7MI_YBCiiOR2Aq-UxnSDT1jnlOcRlMSlczoiHUXOjYxpOhx5-O12rgAJg4UAwaGhDyR3Gxhjdai4V1v2N2wqus9tC3Y3ifMQjbehaqq4aBhLtEv_Or893icCsdLve-Caj8nBkU67zMO5HtGCfM3sKiWNKhV0zwVaBqd3x3ixVmHFyFLuJyXB-moOe8pAQAA)):
 
@@ -355,7 +355,7 @@ export default function readable<T>(
 }
 ```
 
-## `$effect.root`
+## $effect.root
 
 The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
 nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md
index a6c3be06c3..4bef3423d0 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md
@@ -44,7 +44,7 @@ Stores are still a good solution when you have complex asynchronous data streams
 
 The `svelte/store` module contains a minimal store implementation which fulfil the store contract. It provides methods for creating stores that you can update from the outside, stores you can only update from the inside, and for combining and deriving stores.
 
-### `writable`
+### writable
 
 Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
 
@@ -89,7 +89,7 @@ unsubscribe(); // logs 'no more subscribers'
 
 Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
 
-### `readable`
+### readable
 
 Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
 
@@ -115,7 +115,7 @@ const ticktock = readable('tick', (set, update) => {
 });
 ```
 
-### `derived`
+### derived
 
 Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
 
@@ -229,7 +229,7 @@ const delayed = derived([a, b], ([$a, $b], set) => {
 });
 ```
 
-### `readonly`
+### readonly
 
 This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
 
@@ -246,7 +246,7 @@ writableStore.set(2); // console: 2
 readableStore.set(2); // ERROR
 ```
 
-### `get`
+### get
 
 Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
index 0f536cb8bc..16353ba67d 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
@@ -9,7 +9,7 @@ title: Lifecycle hooks
 
 In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
 
-## `onMount`
+## onMount
 
 The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
 
@@ -43,7 +43,7 @@ If a function is returned from `onMount`, it will be called when the component i
 
 > This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
 
-## `onDestroy`
+## onDestroy
 
 Schedules a callback to run immediately before the component is unmounted.
 
@@ -74,7 +74,7 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
 </script>
 ```
 
-## `tick`
+## tick
 
 While there's no "after update" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
 
@@ -90,7 +90,7 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 </script>
 ```
 
-## Deprecated: `beforeUpdate` / `afterUpdate`
+## Deprecated: beforeUpdate/afterUpdate
 
 Svelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md b/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md
index b4517bd34f..1594ae9e2d 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md
@@ -12,7 +12,7 @@ better title needed?
 
 Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.
 
-## `mount`
+## mount
 
 Instantiates a component and mounts it to the given target:
 
@@ -31,7 +31,7 @@ You can mount multiple components per page, and you can also mount from within y
 
 Note that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.
 
-## `unmount`
+## unmount
 
 Unmounts a component created with [`mount`](#mount) or [`hydrate`](#hydrate):
 
@@ -46,7 +46,7 @@ const app = mount(App, {...});
 unmount(app);
 ```
 
-## `render`
+## render
 
 Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
 
@@ -62,7 +62,7 @@ result.body; // HTML for somewhere in this <body> tag
 result.head; // HTML for somewhere in this <head> tag
 ```
 
-## `hydrate`
+## hydrate
 
 Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#server-render) function) inside the target and make it interactive:
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md b/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
index f07baa13fd..428cd066af 100644
--- a/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
+++ b/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
@@ -7,7 +7,7 @@ title: Debugging
 
 Svelte provides two built-in ways to debug your application.
 
-## `$inspect`
+## $inspect
 
 The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its
 argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object
diff --git a/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md
index 10f0dd30eb..1d95c36984 100644
--- a/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md
@@ -10,7 +10,7 @@ title: TypeScript
 
 You can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
 
-## `<script lang="ts">`
+## <script lang="ts">
 
 To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
 
@@ -77,7 +77,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S
 
 > If you're starting a new project, we recommend using SvelteKit or Vite instead
 
-## Typing `$props`
+## Typing $props
 
 Type `$props` just like a regular object with certain properties.
 
@@ -107,7 +107,7 @@ Type `$props` just like a regular object with certain properties.
 </button>
 ```
 
-## Generic `$props`
+## Generic $props
 
 Components can declare a generic relationship between their properties. One example is a generic list component that receives a list of items and a callback property that reveives an item from the list. To declare that the `items` property and the `select` callback operate on the same types, add the `generics` attribute to the `script` tag:
 
@@ -130,7 +130,7 @@ Components can declare a generic relationship between their properties. One exam
 
 The content of `generics` is what you would put between the `<...>` tags of a generic function. In other words, you can use multiple generics, `extends` and fallback types.
 
-## Typing `$state`
+## Typing $state
 
 You can type `$state` like any other variable.
 
@@ -157,7 +157,7 @@ class Counter {
 }
 ```
 
-## The `Component` type
+## The Component type
 
 Svelte components or of type `Component`. You can use it and its related types to express a variety of constraints.
 

From 6aa93f5919e0719cf6d0e01ea0f1852f175cc6e1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Oct 2024 18:44:04 -0400
Subject: [PATCH 10/13] Revert "add [!NOTE] type"

This reverts commit 3d6ceaaf4ac893c27fe4a8f88b09d92f85dc1f41.
---
 packages/site-kit/src/lib/components/Text.svelte | 7 -------
 packages/site-kit/src/lib/markdown/renderer.ts   | 7 +------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 80fde96626..c370839cc6 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -409,13 +409,6 @@
 				}
 			}
 
-			&.note {
-				background: none;
-				margin-left: 0.2rem;
-				padding: 0 0 0 3.8rem;
-				border-left: 0.5rem solid var(--sk-back-5);
-			}
-
 			em,
 			i {
 				font-style: normal;
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index ec7cb75c1e..73bed8fea7 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -279,12 +279,7 @@ export async function render_content_markdown(
 			if (content.includes('[!LEGACY]')) {
 				content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
 			}
-
-			// TODO get a shared understanding of what kinds of blockquotes we have and how to name them. [!TIP] ? [!WARNING] ? [!QUOTE] ?
-			// Should the default be a generic blockquote that is just italic, without any icon?
-			// Should we rely on consistent class names everywhere instead of styling blockquotes one way on blogs and another way in the docs?
-			const klass = content.includes('[!NOTE]') ? ' class="note"' : '';
-			return `<blockquote${klass}>${content.replace('[!NOTE]', '')}</blockquote>`;
+			return `<blockquote>${content}</blockquote>`;
 		}
 	});
 }

From e1ca906a4641ad7f47b8f772a7212e4516c8268e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Oct 2024 18:44:26 -0400
Subject: [PATCH 11/13] sync

---
 .../03-reactivity-fundamentals.md             |   6 +-
 .../svelte/02-template-syntax/08-bindings.md  |   2 +-
 .../02-template-syntax/09-special-elements.md |  16 +-
 .../content/docs/svelte/03-runes/01-state.md  |  10 +-
 .../docs/svelte/03-runes/02-side-effects.md   |  12 +-
 .../docs/svelte/04-runtime/01-stores.md       |  10 +-
 .../svelte/04-runtime/03-lifecycle-hooks.md   |   8 +-
 .../04-runtime/04-imperative-component-api.md |   8 +-
 .../docs/svelte/05-misc/01-debugging.md       |   2 +-
 .../docs/svelte/05-misc/03-typescript.md      |  10 +-
 .../svelte/98-reference/30-compiler-errors.md | 934 ++++++++++++------
 .../98-reference/30-compiler-warnings.md      | 486 ++++++---
 .../svelte/98-reference/30-runtime-errors.md  | 160 ++-
 .../98-reference/30-runtime-warnings.md       | 100 +-
 14 files changed, 1165 insertions(+), 599 deletions(-)

diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
index e2038fade5..fd884d22dc 100644
--- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
+++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md
@@ -12,7 +12,7 @@ Runes are function-like symbols that provide instructions to the Svelte compiler
 
 The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
 
-## $state
+## `$state`
 
 Reactive state is declared with the `$state` rune:
 
@@ -53,7 +53,7 @@ class Todo {
 > </button>
 > ```
 
-## $derived
+## `$derived`
 
 Derived state is declared with the `$derived` rune:
 
@@ -92,7 +92,7 @@ As with `$state`, you can mark class fields as `$derived`.
 >
 > This only worked at the top level of a component.
 
-## $effect
+## `$effect`
 
 To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md b/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md
index 7bac2ea560..cabbc45969 100644
--- a/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md
+++ b/apps/svelte.dev/content/docs/svelte/02-template-syntax/08-bindings.md
@@ -74,7 +74,7 @@ If you're using `bind:` directives together with `on` event attributes, the bind
 
 Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
 
-## Binding <select> value
+## Binding `<select>` value
 
 A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md b/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md
index e6735c0efe..2b41d55fe4 100644
--- a/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md
+++ b/apps/svelte.dev/content/docs/svelte/02-template-syntax/09-special-elements.md
@@ -6,7 +6,7 @@ title: Special elements
 
 Some of Svelte's concepts need special elements. Those are prefixed with `svelte:` and listed here.
 
-## <svelte:self>
+## `<svelte:self>`
 
 The `<svelte:self>` element allows a component to include itself, recursively.
 
@@ -25,7 +25,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
 {/if}
 ```
 
-## <svelte:component>
+## `<svelte:component>`
 
 ```svelte
 <svelte:component this={expression} />
@@ -39,7 +39,7 @@ If `this` is falsy, no component is rendered.
 <svelte:component this={currentSelection.component} foo={bar} />
 ```
 
-## <svelte:element>
+## `<svelte:element>`
 
 ```svelte
 <svelte:element this={expression} />
@@ -69,7 +69,7 @@ Svelte tries its best to infer the correct namespace from the element's surround
 <svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
 ```
 
-## <svelte:window>
+## `<svelte:window>`
 
 ```svelte
 <svelte:window onevent={handler} />
@@ -112,7 +112,7 @@ All except `scrollX` and `scrollY` are readonly.
 
 > Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
 
-## <svelte:document>
+## `<svelte:document>`
 
 ```svelte
 <svelte:document onevent={handler} />
@@ -139,7 +139,7 @@ You can also bind to the following properties:
 
 All are readonly.
 
-## <svelte:body>
+## `<svelte:body>`
 
 ```svelte
 <svelte:body onevent={handler} />
@@ -153,7 +153,7 @@ As with `<svelte:window>` and `<svelte:document>`, this element may only appear
 <svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
 ```
 
-## <svelte:head>
+## `<svelte:head>`
 
 ```svelte
 <svelte:head>...</svelte:head>
@@ -170,7 +170,7 @@ As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element
 </svelte:head>
 ```
 
-## <svelte:options>
+## `<svelte:options>`
 
 ```svelte
 <svelte:options option={value} />
diff --git a/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md b/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
index 79c64cdf78..7bcff2c968 100644
--- a/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
+++ b/apps/svelte.dev/content/docs/svelte/03-runes/01-state.md
@@ -6,7 +6,7 @@ Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity i
 
 Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application.
 
-## $state
+## `$state`
 
 The `$state` rune is the at the heart of the runes API. It is used to declare reactive state:
 
@@ -62,7 +62,7 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
 
 > Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
 
-## $state.raw
+## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
 
@@ -84,7 +84,7 @@ person = {
 
 This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
-## $state.snapshot
+## `$state.snapshot`
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 
@@ -101,7 +101,7 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
-## $derived
+## `$derived`
 
 Derived state is declared with the `$derived` rune:
 
@@ -122,7 +122,7 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
 
 As with `$state`, you can mark class fields as `$derived`.
 
-## $derived.by
+## `$derived.by`
 
 Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
 
diff --git a/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md b/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md
index 560955e7ff..3d425f8ee3 100644
--- a/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md
+++ b/apps/svelte.dev/content/docs/svelte/03-runes/02-side-effects.md
@@ -7,7 +7,7 @@ title: Side effects
 
 Side effects play a crucial role in applications. They are triggered by state changes and can then interact with external systems, like logging something, setting up a server connection or synchronize with a third-party library that has no knowledge of Svelte's reactivity model.
 
-## $effect fundamentals
+## `$effect` fundamentals
 
 To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
 
@@ -63,7 +63,7 @@ You can return a function from `$effect`, which will run immediately before the
 <button onclick={() => (milliseconds /= 2)}>faster</button>
 ```
 
-## $effect dependencies
+## `$effect` dependencies
 
 `$effect` automatically picks up any reactivy values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
 
@@ -139,7 +139,7 @@ $effect(() => {
 });
 ```
 
-## When not to use $effect
+## When not to use `$effect`
 
 In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
 
@@ -254,7 +254,7 @@ If you need to use bindings, for whatever reason (for example when you want some
 
 If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
 
-## $effect.pre
+## `$effect.pre`
 
 In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:
 
@@ -291,7 +291,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 
 Apart from the timing, `$effect.pre` works exactly like [`$effect`](#$effect) — refer to its documentation for more info.
 
-## $effect.tracking
+## `$effect.tracking`
 
 The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/#H4sIAAAAAAAAE3XP0QrCMAwF0F-JRXAD595rLfgdzodRUyl0bVgzQcb-3VYFQfExl5tDMgvrPCYhT7MI_YBCiiOR2Aq-UxnSDT1jnlOcRlMSlczoiHUXOjYxpOhx5-O12rgAJg4UAwaGhDyR3Gxhjdai4V1v2N2wqus9tC3Y3ifMQjbehaqq4aBhLtEv_Or893icCsdLve-Caj8nBkU67zMO5HtGCfM3sKiWNKhV0zwVaBqd3x3ixVmHFyFLuJyXB-moOe8pAQAA)):
 
@@ -355,7 +355,7 @@ export default function readable<T>(
 }
 ```
 
-## $effect.root
+## `$effect.root`
 
 The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
 nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md
index 4bef3423d0..a6c3be06c3 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/01-stores.md
@@ -44,7 +44,7 @@ Stores are still a good solution when you have complex asynchronous data streams
 
 The `svelte/store` module contains a minimal store implementation which fulfil the store contract. It provides methods for creating stores that you can update from the outside, stores you can only update from the inside, and for combining and deriving stores.
 
-### writable
+### `writable`
 
 Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
 
@@ -89,7 +89,7 @@ unsubscribe(); // logs 'no more subscribers'
 
 Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
 
-### readable
+### `readable`
 
 Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
 
@@ -115,7 +115,7 @@ const ticktock = readable('tick', (set, update) => {
 });
 ```
 
-### derived
+### `derived`
 
 Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
 
@@ -229,7 +229,7 @@ const delayed = derived([a, b], ([$a, $b], set) => {
 });
 ```
 
-### readonly
+### `readonly`
 
 This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
 
@@ -246,7 +246,7 @@ writableStore.set(2); // console: 2
 readableStore.set(2); // ERROR
 ```
 
-### get
+### `get`
 
 Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
index 16353ba67d..0f536cb8bc 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
@@ -9,7 +9,7 @@ title: Lifecycle hooks
 
 In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
 
-## onMount
+## `onMount`
 
 The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
 
@@ -43,7 +43,7 @@ If a function is returned from `onMount`, it will be called when the component i
 
 > This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
 
-## onDestroy
+## `onDestroy`
 
 Schedules a callback to run immediately before the component is unmounted.
 
@@ -74,7 +74,7 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
 </script>
 ```
 
-## tick
+## `tick`
 
 While there's no "after update" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
 
@@ -90,7 +90,7 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
 </script>
 ```
 
-## Deprecated: beforeUpdate/afterUpdate
+## Deprecated: `beforeUpdate` / `afterUpdate`
 
 Svelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md b/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md
index 1594ae9e2d..b4517bd34f 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/04-imperative-component-api.md
@@ -12,7 +12,7 @@ better title needed?
 
 Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.
 
-## mount
+## `mount`
 
 Instantiates a component and mounts it to the given target:
 
@@ -31,7 +31,7 @@ You can mount multiple components per page, and you can also mount from within y
 
 Note that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.
 
-## unmount
+## `unmount`
 
 Unmounts a component created with [`mount`](#mount) or [`hydrate`](#hydrate):
 
@@ -46,7 +46,7 @@ const app = mount(App, {...});
 unmount(app);
 ```
 
-## render
+## `render`
 
 Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
 
@@ -62,7 +62,7 @@ result.body; // HTML for somewhere in this <body> tag
 result.head; // HTML for somewhere in this <head> tag
 ```
 
-## hydrate
+## `hydrate`
 
 Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#server-render) function) inside the target and make it interactive:
 
diff --git a/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md b/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
index 428cd066af..f07baa13fd 100644
--- a/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
+++ b/apps/svelte.dev/content/docs/svelte/05-misc/01-debugging.md
@@ -7,7 +7,7 @@ title: Debugging
 
 Svelte provides two built-in ways to debug your application.
 
-## $inspect
+## `$inspect`
 
 The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its
 argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object
diff --git a/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md
index 1d95c36984..10f0dd30eb 100644
--- a/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md
+++ b/apps/svelte.dev/content/docs/svelte/05-misc/03-typescript.md
@@ -10,7 +10,7 @@ title: TypeScript
 
 You can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
 
-## <script lang="ts">
+## `<script lang="ts">`
 
 To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
 
@@ -77,7 +77,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S
 
 > If you're starting a new project, we recommend using SvelteKit or Vite instead
 
-## Typing $props
+## Typing `$props`
 
 Type `$props` just like a regular object with certain properties.
 
@@ -107,7 +107,7 @@ Type `$props` just like a regular object with certain properties.
 </button>
 ```
 
-## Generic $props
+## Generic `$props`
 
 Components can declare a generic relationship between their properties. One example is a generic list component that receives a list of items and a callback property that reveives an item from the list. To declare that the `items` property and the `select` callback operate on the same types, add the `generics` attribute to the `script` tag:
 
@@ -130,7 +130,7 @@ Components can declare a generic relationship between their properties. One exam
 
 The content of `generics` is what you would put between the `<...>` tags of a generic function. In other words, you can use multiple generics, `extends` and fallback types.
 
-## Typing $state
+## Typing `$state`
 
 You can type `$state` like any other variable.
 
@@ -157,7 +157,7 @@ class Counter {
 }
 ```
 
-## The Component type
+## The `Component` type
 
 Svelte components or of type `Component`. You can use it and its related types to express a variety of constraints.
 
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
index b1d2c1161f..40b9b33d58 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md
@@ -3,323 +3,483 @@ title: 'Compiler errors'
 generated: 'generated by process-messages/index.js'
 ---
 
-## `animation_duplicate`
+### `animation_duplicate`
 
-> [!NOTE] An element can only have one 'animate' directive
+```
+An element can only have one 'animate' directive
+```
 
-## `animation_invalid_placement`
+### `animation_invalid_placement`
 
-> [!NOTE] An element that uses the 'animate:' directive must be the only child of a keyed '{#each ...}' block
+```
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
+```
 
-## `animation_missing_key`
+### `animation_missing_key`
 
-> [!NOTE] An element that uses the 'animate:' directive must be the only child of a keyed '{#each ...}' block. Did you forget to add a key to your each block?
+```
+An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block?
+```
 
-## `attribute_contenteditable_dynamic`
+### `attribute_contenteditable_dynamic`
 
-> [!NOTE] 'contenteditable' attribute cannot be dynamic if element uses two-way binding
+```
+'contenteditable' attribute cannot be dynamic if element uses two-way binding
+```
 
-## `attribute_contenteditable_missing`
+### `attribute_contenteditable_missing`
 
-> [!NOTE] 'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
+```
+'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
+```
 
-## `attribute_duplicate`
+### `attribute_duplicate`
 
-> [!NOTE] Attributes need to be unique
+```
+Attributes need to be unique
+```
 
-## `attribute_empty_shorthand`
+### `attribute_empty_shorthand`
 
-> [!NOTE] Attribute shorthand cannot be empty
+```
+Attribute shorthand cannot be empty
+```
 
-## `attribute_invalid_event_handler`
+### `attribute_invalid_event_handler`
 
-> [!NOTE] Event attribute must be a JavaScript expression, not a string
+```
+Event attribute must be a JavaScript expression, not a string
+```
 
-## `attribute_invalid_multiple`
+### `attribute_invalid_multiple`
 
-> [!NOTE] 'multiple' attribute must be static if select uses two-way binding
+```
+'multiple' attribute must be static if select uses two-way binding
+```
 
-## `attribute_invalid_name`
+### `attribute_invalid_name`
 
-> [!NOTE] '%name%' is not a valid attribute name
+```
+'%name%' is not a valid attribute name
+```
 
-## `attribute_invalid_sequence_expression`
+### `attribute_invalid_sequence_expression`
 
-> [!NOTE] Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+```
+Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+```
 
-## `attribute_invalid_type`
+### `attribute_invalid_type`
 
-> [!NOTE] 'type' attribute must be a static text value if input uses two-way binding
+```
+'type' attribute must be a static text value if input uses two-way binding
+```
 
-## `attribute_unquoted_sequence`
+### `attribute_unquoted_sequence`
 
-> [!NOTE] Attribute values containing '{...}' must be enclosed in quote marks, unless the value only contains the expression
+```
+Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
+```
 
-## `bind_invalid_expression`
+### `bind_invalid_expression`
 
-> [!NOTE] Can only bind to an Identifier or MemberExpression
+```
+Can only bind to an Identifier or MemberExpression
+```
 
-## `bind_invalid_name`
+### `bind_invalid_name`
 
-> [!NOTE] 'bind:%name%' is not a valid binding
+```
+`bind:%name%` is not a valid binding
+```
 
-> [!NOTE] 'bind:%name%' is not a valid binding. %explanation%
+```
+`bind:%name%` is not a valid binding. %explanation%
+```
 
-## `bind_invalid_target`
+### `bind_invalid_target`
 
-> [!NOTE] 'bind:%name%' can only be used with %elements%
+```
+`bind:%name%` can only be used with %elements%
+```
 
-## `bind_invalid_value`
+### `bind_invalid_value`
 
-> [!NOTE] Can only bind to state or props
+```
+Can only bind to state or props
+```
 
-## `bindable_invalid_location`
+### `bindable_invalid_location`
 
-> [!NOTE] '$bindable()' can only be used inside a '$props()' declaration
+```
+`$bindable()` can only be used inside a `$props()` declaration
+```
 
-## `block_duplicate_clause`
+### `block_duplicate_clause`
 
-> [!NOTE] %name% cannot appear more than once within a block
+```
+%name% cannot appear more than once within a block
+```
 
-## `block_invalid_continuation_placement`
+### `block_invalid_continuation_placement`
 
-> [!NOTE] {:...} block is invalid at this position (did you forget to close the preceeding element or block?)
+```
+{:...} block is invalid at this position (did you forget to close the preceeding element or block?)
+```
 
-## `block_invalid_elseif`
+### `block_invalid_elseif`
 
-> [!NOTE] 'elseif' should be 'else if'
+```
+'elseif' should be 'else if'
+```
 
-## `block_invalid_placement`
+### `block_invalid_placement`
 
-> [!NOTE] {#%name% ...} block cannot be %location%
+```
+{#%name% ...} block cannot be %location%
+```
 
-## `block_unclosed`
+### `block_unclosed`
 
-> [!NOTE] Block was left open
+```
+Block was left open
+```
 
-## `block_unexpected_character`
+### `block_unexpected_character`
 
-> [!NOTE] Expected a '%character%' character immediately following the opening bracket
+```
+Expected a `%character%` character immediately following the opening bracket
+```
 
-## `block_unexpected_close`
+### `block_unexpected_close`
 
-> [!NOTE] Unexpected block closing tag
+```
+Unexpected block closing tag
+```
 
-## `component_invalid_directive`
+### `component_invalid_directive`
 
-> [!NOTE] This type of directive is not valid on components
+```
+This type of directive is not valid on components
+```
 
-## `const_tag_cycle`
+### `const_tag_cycle`
 
-> [!NOTE] Cyclical dependency detected: %cycle%
+```
+Cyclical dependency detected: %cycle%
+```
 
-## `const_tag_invalid_expression`
+### `const_tag_invalid_expression`
 
-> [!NOTE] {@const ...} must consist of a single variable declaration
+```
+{@const ...} must consist of a single variable declaration
+```
 
-## `const_tag_invalid_placement`
+### `const_tag_invalid_placement`
 
-> [!NOTE] '{@const}' must be the immediate child of '{#snippet}', '{#if}', '{:else if}', '{:else}', '{#each}', '{:then}', '{:catch}', '\<svelte:fragment>' or '\<Component>'
+```
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+```
 
-## `constant_assignment`
+### `constant_assignment`
 
-> [!NOTE] Cannot assign to %thing%
+```
+Cannot assign to %thing%
+```
 
-## `constant_binding`
+### `constant_binding`
 
-> [!NOTE] Cannot bind to %thing%
+```
+Cannot bind to %thing%
+```
 
-## `css_empty_declaration`
+### `css_empty_declaration`
 
-> [!NOTE] Declaration cannot be empty
+```
+Declaration cannot be empty
+```
 
-## `css_expected_identifier`
+### `css_expected_identifier`
 
-> [!NOTE] Expected a valid CSS identifier
+```
+Expected a valid CSS identifier
+```
 
-## `css_global_block_invalid_combinator`
+### `css_global_block_invalid_combinator`
 
-> [!NOTE] A ':global' selector cannot follow a '%name%' combinator
+```
+A `:global` selector cannot follow a `%name%` combinator
+```
 
-## `css_global_block_invalid_declaration`
+### `css_global_block_invalid_declaration`
 
-> [!NOTE] A top-level ':global {...}' block can only contain rules, not declarations
+```
+A top-level `:global {...}` block can only contain rules, not declarations
+```
 
-## `css_global_block_invalid_list`
+### `css_global_block_invalid_list`
 
-> [!NOTE] A ':global' selector cannot be part of a selector list with more than one item
+```
+A `:global` selector cannot be part of a selector list with more than one item
+```
 
-## `css_global_block_invalid_modifier`
+### `css_global_block_invalid_modifier`
 
-> [!NOTE] A ':global' selector cannot modify an existing selector
+```
+A `:global` selector cannot modify an existing selector
+```
 
-## `css_global_block_invalid_modifier_start`
+### `css_global_block_invalid_modifier_start`
 
-> [!NOTE] A ':global' selector can only be modified if it is a descendant of other selectors
+```
+A `:global` selector can only be modified if it is a descendant of other selectors
+```
 
-## `css_global_invalid_placement`
+### `css_global_invalid_placement`
 
-> [!NOTE] ':global(...)' can be at the start or end of a selector sequence, but not in the middle
+```
+`:global(...)` can be at the start or end of a selector sequence, but not in the middle
+```
 
-## `css_global_invalid_selector`
+### `css_global_invalid_selector`
 
-> [!NOTE] ':global(...)' must contain exactly one selector
+```
+`:global(...)` must contain exactly one selector
+```
 
-## `css_global_invalid_selector_list`
+### `css_global_invalid_selector_list`
 
-> [!NOTE] ':global(...)' must not contain type or universal selectors when used in a compound selector
+```
+`:global(...)` must not contain type or universal selectors when used in a compound selector
+```
 
-## `css_nesting_selector_invalid_placement`
+### `css_nesting_selector_invalid_placement`
 
-> [!NOTE] Nesting selectors can only be used inside a rule or as the first selector inside a lone ':global(...)'
+```
+Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
+```
 
-## `css_selector_invalid`
+### `css_selector_invalid`
 
-> [!NOTE] Invalid selector
+```
+Invalid selector
+```
 
-## `css_type_selector_invalid_placement`
+### `css_type_selector_invalid_placement`
 
-> [!NOTE] ':global(...)' must not be followed by a type selector
+```
+`:global(...)` must not be followed by a type selector
+```
 
-## `debug_tag_invalid_arguments`
+### `debug_tag_invalid_arguments`
 
-> [!NOTE] {@debug ...} arguments must be identifiers, not arbitrary expressions
+```
+{@debug ...} arguments must be identifiers, not arbitrary expressions
+```
 
-## `declaration_duplicate`
+### `declaration_duplicate`
 
-> [!NOTE] '%name%' has already been declared
+```
+`%name%` has already been declared
+```
 
-## `declaration_duplicate_module_import`
+### `declaration_duplicate_module_import`
 
-> [!NOTE] Cannot declare a variable with the same name as an import inside '\<script module>'
+```
+Cannot declare a variable with the same name as an import inside `<script module>`
+```
 
-## `derived_invalid_export`
+### `derived_invalid_export`
 
-> [!NOTE] Cannot export derived state from a module. To expose the current derived value, export a function returning its value
+```
+Cannot export derived state from a module. To expose the current derived value, export a function returning its value
+```
 
-## `directive_invalid_value`
+### `directive_invalid_value`
 
-> [!NOTE] Directive value must be a JavaScript expression enclosed in curly braces
+```
+Directive value must be a JavaScript expression enclosed in curly braces
+```
 
-## `directive_missing_name`
+### `directive_missing_name`
 
-> [!NOTE] '%type%' name cannot be empty
+```
+`%type%` name cannot be empty
+```
 
-## `dollar_binding_invalid`
+### `dollar_binding_invalid`
 
-> [!NOTE] The $ name is reserved, and cannot be used for variables and imports
+```
+The $ name is reserved, and cannot be used for variables and imports
+```
 
-## `dollar_prefix_invalid`
+### `dollar_prefix_invalid`
 
-> [!NOTE] The $ prefix is reserved, and cannot be used for variables and imports
+```
+The $ prefix is reserved, and cannot be used for variables and imports
+```
 
-## `each_item_invalid_assignment`
+### `each_item_invalid_assignment`
 
-> [!NOTE] Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. 'array[i] = value' instead of 'entry = value')
+```
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+```
 
-## `effect_invalid_placement`
+### `effect_invalid_placement`
 
-> [!NOTE] '$effect()' can only be used as an expression statement
+```
+`$effect()` can only be used as an expression statement
+```
 
-## `element_invalid_closing_tag`
+### `element_invalid_closing_tag`
 
-> [!NOTE] '\</%name%>' attempted to close an element that was not open
+```
+`</%name%>` attempted to close an element that was not open
+```
 
-## `element_invalid_closing_tag_autoclosed`
+### `element_invalid_closing_tag_autoclosed`
 
-> [!NOTE] '\</%name%>' attempted to close element that was already automatically closed by '\<%reason%>' (cannot nest '\<%reason%>' inside '\<%name%>')
+```
+`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)
+```
 
-## `element_unclosed`
+### `element_unclosed`
 
-> [!NOTE] '\<%name%>' was left open
+```
+`<%name%>` was left open
+```
 
-## `event_handler_invalid_component_modifier`
+### `event_handler_invalid_component_modifier`
 
-> [!NOTE] Event modifiers other than 'once' can only be used on DOM elements
+```
+Event modifiers other than 'once' can only be used on DOM elements
+```
 
-## `event_handler_invalid_modifier`
+### `event_handler_invalid_modifier`
 
-> [!NOTE] Valid event modifiers are %list%
+```
+Valid event modifiers are %list%
+```
 
-## `event_handler_invalid_modifier_combination`
+### `event_handler_invalid_modifier_combination`
 
-> [!NOTE] The '%modifier1%' and '%modifier2%' modifiers cannot be used together
+```
+The '%modifier1%' and '%modifier2%' modifiers cannot be used together
+```
 
-## `expected_attribute_value`
+### `expected_attribute_value`
 
-> [!NOTE] Expected attribute value
+```
+Expected attribute value
+```
 
-## `expected_block_type`
+### `expected_block_type`
 
-> [!NOTE] Expected 'if', 'each', 'await', 'key' or 'snippet'
+```
+Expected 'if', 'each', 'await', 'key' or 'snippet'
+```
 
-## `expected_identifier`
+### `expected_identifier`
 
-> [!NOTE] Expected an identifier
+```
+Expected an identifier
+```
 
-## `expected_pattern`
+### `expected_pattern`
 
-> [!NOTE] Expected identifier or destructure pattern
+```
+Expected identifier or destructure pattern
+```
 
-## `expected_token`
+### `expected_token`
 
-> [!NOTE] Expected token %token%
+```
+Expected token %token%
+```
 
-## `expected_whitespace`
+### `expected_whitespace`
 
-> [!NOTE] Expected whitespace
+```
+Expected whitespace
+```
 
-## `global_reference_invalid`
+### `global_reference_invalid`
 
-> [!NOTE] '%name%' is an illegal variable name. To reference a global variable called '%name%', use 'globalThis.%name%'
+```
+`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
+```
 
-## `host_invalid_placement`
+### `host_invalid_placement`
 
-> [!NOTE] '$host()' can only be used inside custom element component instances
+```
+`$host()` can only be used inside custom element component instances
+```
 
-## `import_svelte_internal_forbidden`
+### `import_svelte_internal_forbidden`
 
-> [!NOTE] Imports of 'svelte/internal/\*' are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from 'svelte/internal/\*' to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
+```
+Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
+```
 
-## `invalid_arguments_usage`
+### `invalid_arguments_usage`
 
-> [!NOTE] The arguments keyword cannot be used within the template or at the top level of a component
+```
+The arguments keyword cannot be used within the template or at the top level of a component
+```
 
-## `js_parse_error`
+### `js_parse_error`
 
-> [!NOTE] %message%
+```
+%message%
+```
 
-## `legacy_export_invalid`
+### `legacy_export_invalid`
 
-> [!NOTE] Cannot use 'export let' in runes mode — use '$props()' instead
+```
+Cannot use `export let` in runes mode — use `$props()` instead
+```
 
-## `legacy_props_invalid`
+### `legacy_props_invalid`
 
-> [!NOTE] Cannot use '$$props' in runes mode
+```
+Cannot use `$$props` in runes mode
+```
 
-## `legacy_reactive_statement_invalid`
+### `legacy_reactive_statement_invalid`
 
-> [!NOTE] '$:' is not allowed in runes mode, use '$derived' or '$effect' instead
+```
+`$:` is not allowed in runes mode, use `$derived` or `$effect` instead
+```
 
-## `legacy_rest_props_invalid`
+### `legacy_rest_props_invalid`
 
-> [!NOTE] Cannot use '$$restProps' in runes mode
+```
+Cannot use `$$restProps` in runes mode
+```
 
-## `let_directive_invalid_placement`
+### `let_directive_invalid_placement`
 
-> [!NOTE] 'let:' directive at invalid position
+```
+`let:` directive at invalid position
+```
 
-## `mixed_event_handler_syntaxes`
+### `mixed_event_handler_syntaxes`
 
-> [!NOTE] Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
+```
+Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
+```
 
-## `module_illegal_default_export`
+### `module_illegal_default_export`
 
-> [!NOTE] A component cannot have a default export
+```
+A component cannot have a default export
+```
 
-## `node_invalid_placement`
+### `node_invalid_placement`
 
-> [!NOTE] %thing% is invalid inside '\<%parent%>'
+```
+%thing% is invalid inside `<%parent%>`
+```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
@@ -327,312 +487,464 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 - `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
 - `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
-## `options_invalid_value`
+### `options_invalid_value`
 
-> [!NOTE] Invalid compiler option: %details%
+```
+Invalid compiler option: %details%
+```
 
-## `options_removed`
+### `options_removed`
 
-> [!NOTE] Invalid compiler option: %details%
+```
+Invalid compiler option: %details%
+```
 
-## `options_unrecognised`
+### `options_unrecognised`
 
-> [!NOTE] Unrecognised compiler option %keypath%
+```
+Unrecognised compiler option %keypath%
+```
 
-## `props_duplicate`
+### `props_duplicate`
 
-> [!NOTE] Cannot use '$props()' more than once
+```
+Cannot use `$props()` more than once
+```
 
-## `props_illegal_name`
+### `props_illegal_name`
 
-> [!NOTE] Declaring or accessing a prop starting with '$$' is illegal (they are reserved for Svelte internals)
+```
+Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)
+```
 
-## `props_invalid_identifier`
+### `props_invalid_identifier`
 
-> [!NOTE] '$props()' can only be used with an object destructuring pattern
+```
+`$props()` can only be used with an object destructuring pattern
+```
 
-## `props_invalid_pattern`
+### `props_invalid_pattern`
 
-> [!NOTE] '$props()' assignment must not contain nested properties or computed keys
+```
+`$props()` assignment must not contain nested properties or computed keys
+```
 
-## `props_invalid_placement`
+### `props_invalid_placement`
 
-> [!NOTE] '$props()' can only be used at the top level of components as a variable declaration initializer
+```
+`$props()` can only be used at the top level of components as a variable declaration initializer
+```
 
-## `reactive_declaration_cycle`
+### `reactive_declaration_cycle`
 
-> [!NOTE] Cyclical dependency detected: %cycle%
+```
+Cyclical dependency detected: %cycle%
+```
 
-## `render_tag_invalid_call_expression`
+### `render_tag_invalid_call_expression`
 
-> [!NOTE] Calling a snippet function using apply, bind or call is not allowed
+```
+Calling a snippet function using apply, bind or call is not allowed
+```
 
-## `render_tag_invalid_expression`
+### `render_tag_invalid_expression`
 
-> [!NOTE] '{@render ...}' tags can only contain call expressions
+```
+`{@render ...}` tags can only contain call expressions
+```
 
-## `render_tag_invalid_spread_argument`
+### `render_tag_invalid_spread_argument`
 
-> [!NOTE] cannot use spread arguments in '{@render ...}' tags
+```
+cannot use spread arguments in `{@render ...}` tags
+```
 
-## `rune_invalid_arguments`
+### `rune_invalid_arguments`
 
-> [!NOTE] '%rune%' cannot be called with arguments
+```
+`%rune%` cannot be called with arguments
+```
 
-## `rune_invalid_arguments_length`
+### `rune_invalid_arguments_length`
 
-> [!NOTE] '%rune%' must be called with %args%
+```
+`%rune%` must be called with %args%
+```
 
-## `rune_invalid_computed_property`
+### `rune_invalid_computed_property`
 
-> [!NOTE] Cannot access a computed property of a rune
+```
+Cannot access a computed property of a rune
+```
 
-## `rune_invalid_name`
+### `rune_invalid_name`
 
-> [!NOTE] '%name%' is not a valid rune
+```
+`%name%` is not a valid rune
+```
 
-## `rune_invalid_usage`
+### `rune_invalid_usage`
 
-> [!NOTE] Cannot use '%rune%' rune in non-runes mode
+```
+Cannot use `%rune%` rune in non-runes mode
+```
 
-## `rune_missing_parentheses`
+### `rune_missing_parentheses`
 
-> [!NOTE] Cannot use rune without parentheses
+```
+Cannot use rune without parentheses
+```
 
-## `rune_removed`
+### `rune_removed`
 
-> [!NOTE] The '%name%' rune has been removed
+```
+The `%name%` rune has been removed
+```
 
-## `rune_renamed`
+### `rune_renamed`
 
-> [!NOTE] '%name%' is now '%replacement%'
+```
+`%name%` is now `%replacement%`
+```
 
-## `runes_mode_invalid_import`
+### `runes_mode_invalid_import`
 
-> [!NOTE] %name% cannot be used in runes mode
+```
+%name% cannot be used in runes mode
+```
 
-## `script_duplicate`
+### `script_duplicate`
 
-> [!NOTE] A component can have a single top-level '\<script>' element and/or a single top-level '\<script module>' element
+```
+A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
+```
 
-## `script_invalid_attribute_value`
+### `script_invalid_attribute_value`
 
-> [!NOTE] If the '%name%' attribute is supplied, it must be a boolean attribute
+```
+If the `%name%` attribute is supplied, it must be a boolean attribute
+```
 
-## `script_invalid_context`
+### `script_invalid_context`
 
-> [!NOTE] If the context attribute is supplied, its value must be "module"
+```
+If the context attribute is supplied, its value must be "module"
+```
 
-## `script_reserved_attribute`
+### `script_reserved_attribute`
 
-> [!NOTE] The '%name%' attribute is reserved and cannot be used
+```
+The `%name%` attribute is reserved and cannot be used
+```
 
-## `slot_attribute_duplicate`
+### `slot_attribute_duplicate`
 
-> [!NOTE] Duplicate slot name '%name%' in \<%component%>
+```
+Duplicate slot name '%name%' in <%component%>
+```
 
-## `slot_attribute_invalid`
+### `slot_attribute_invalid`
 
-> [!NOTE] slot attribute must be a static value
+```
+slot attribute must be a static value
+```
 
-## `slot_attribute_invalid_placement`
+### `slot_attribute_invalid_placement`
 
-> [!NOTE] Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
+```
+Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
+```
 
-## `slot_default_duplicate`
+### `slot_default_duplicate`
 
-> [!NOTE] Found default slot content alongside an explicit slot="default"
+```
+Found default slot content alongside an explicit slot="default"
+```
 
-## `slot_element_invalid_attribute`
+### `slot_element_invalid_attribute`
 
-> [!NOTE] '\<slot>' can only receive attributes and (optionally) let directives
+```
+`<slot>` can only receive attributes and (optionally) let directives
+```
 
-## `slot_element_invalid_name`
+### `slot_element_invalid_name`
 
-> [!NOTE] slot attribute must be a static value
+```
+slot attribute must be a static value
+```
 
-## `slot_element_invalid_name_default`
+### `slot_element_invalid_name_default`
 
-> [!NOTE] 'default' is a reserved word — it cannot be used as a slot name
+```
+`default` is a reserved word — it cannot be used as a slot name
+```
 
-## `slot_snippet_conflict`
+### `slot_snippet_conflict`
 
-> [!NOTE] Cannot use '\<slot>' syntax and '{@render ...}' tags in the same component. Migrate towards '{@render ...}' tags completely
+```
+Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely
+```
 
-## `snippet_conflict`
+### `snippet_conflict`
 
-> [!NOTE] Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
+```
+Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
+```
 
-## `snippet_invalid_rest_parameter`
+### `snippet_invalid_rest_parameter`
 
-> [!NOTE] Snippets do not support rest parameters; use an array instead
+```
+Snippets do not support rest parameters; use an array instead
+```
 
-## `snippet_parameter_assignment`
+### `snippet_parameter_assignment`
 
-> [!NOTE] Cannot reassign or bind to snippet parameter
+```
+Cannot reassign or bind to snippet parameter
+```
 
-## `snippet_shadowing_prop`
+### `snippet_shadowing_prop`
 
-> [!NOTE] This snippet is shadowing the prop '%prop%' with the same name
+```
+This snippet is shadowing the prop `%prop%` with the same name
+```
 
-## `state_invalid_export`
+### `state_invalid_export`
 
-> [!NOTE] Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
+```
+Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
+```
 
-## `state_invalid_placement`
+### `state_invalid_placement`
 
-> [!NOTE] '%rune%(...)' can only be used as a variable declaration initializer or a class field
+```
+`%rune%(...)` can only be used as a variable declaration initializer or a class field
+```
 
-## `store_invalid_scoped_subscription`
+### `store_invalid_scoped_subscription`
 
-> [!NOTE] Cannot subscribe to stores that are not declared at the top level of the component
+```
+Cannot subscribe to stores that are not declared at the top level of the component
+```
 
-## `store_invalid_subscription`
+### `store_invalid_subscription`
 
-> [!NOTE] Cannot reference store value inside '\<script module>'
+```
+Cannot reference store value inside `<script module>`
+```
 
-## `store_invalid_subscription_module`
+### `store_invalid_subscription_module`
 
-> [!NOTE] Cannot reference store value outside a '.svelte' file
+```
+Cannot reference store value outside a `.svelte` file
+```
 
 Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
 
-## `style_directive_invalid_modifier`
+### `style_directive_invalid_modifier`
 
-> [!NOTE] 'style:' directive can only use the 'important' modifier
+```
+`style:` directive can only use the `important` modifier
+```
 
-## `style_duplicate`
+### `style_duplicate`
 
-> [!NOTE] A component can have a single top-level '\<style>' element
+```
+A component can have a single top-level `<style>` element
+```
 
-## `svelte_body_illegal_attribute`
+### `svelte_body_illegal_attribute`
 
-> [!NOTE] '\<svelte:body>' does not support non-event attributes or spread attributes
+```
+`<svelte:body>` does not support non-event attributes or spread attributes
+```
 
-## `svelte_component_invalid_this`
+### `svelte_component_invalid_this`
 
-> [!NOTE] Invalid component definition — must be an '{expression}'
+```
+Invalid component definition — must be an `{expression}`
+```
 
-## `svelte_component_missing_this`
+### `svelte_component_missing_this`
 
-> [!NOTE] '\<svelte:component>' must have a 'this' attribute
+```
+`<svelte:component>` must have a 'this' attribute
+```
 
-## `svelte_element_missing_this`
+### `svelte_element_missing_this`
 
-> [!NOTE] '\<svelte:element>' must have a 'this' attribute with a value
+```
+`<svelte:element>` must have a 'this' attribute with a value
+```
 
-## `svelte_fragment_invalid_attribute`
+### `svelte_fragment_invalid_attribute`
 
-> [!NOTE] '\<svelte:fragment>' can only have a slot attribute and (optionally) a let: directive
+```
+`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive
+```
 
-## `svelte_fragment_invalid_placement`
+### `svelte_fragment_invalid_placement`
 
-> [!NOTE] '\<svelte:fragment>' must be the direct child of a component
+```
+`<svelte:fragment>` must be the direct child of a component
+```
 
-## `svelte_head_illegal_attribute`
+### `svelte_head_illegal_attribute`
 
-> [!NOTE] '\<svelte:head>' cannot have attributes nor directives
+```
+`<svelte:head>` cannot have attributes nor directives
+```
 
-## `svelte_meta_duplicate`
+### `svelte_meta_duplicate`
 
-> [!NOTE] A component can only have one '\<%name%>' element
+```
+A component can only have one `<%name%>` element
+```
 
-## `svelte_meta_invalid_content`
+### `svelte_meta_invalid_content`
 
-> [!NOTE] \<%name%> cannot have children
+```
+<%name%> cannot have children
+```
 
-## `svelte_meta_invalid_placement`
+### `svelte_meta_invalid_placement`
 
-> [!NOTE] '\<%name%>' tags cannot be inside elements or blocks
+```
+`<%name%>` tags cannot be inside elements or blocks
+```
 
-## `svelte_meta_invalid_tag`
+### `svelte_meta_invalid_tag`
 
-> [!NOTE] Valid '\<svelte:...>' tag names are %list%
+```
+Valid `<svelte:...>` tag names are %list%
+```
 
-## `svelte_options_deprecated_tag`
+### `svelte_options_deprecated_tag`
 
-> [!NOTE] "tag" option is deprecated — use "customElement" instead
+```
+"tag" option is deprecated — use "customElement" instead
+```
 
-## `svelte_options_invalid_attribute`
+### `svelte_options_invalid_attribute`
 
-> [!NOTE] '\<svelte:options>' can only receive static attributes
+```
+`<svelte:options>` can only receive static attributes
+```
 
-## `svelte_options_invalid_attribute_value`
+### `svelte_options_invalid_attribute_value`
 
-> [!NOTE] Value must be %list%, if specified
+```
+Value must be %list%, if specified
+```
 
-## `svelte_options_invalid_customelement`
+### `svelte_options_invalid_customelement`
 
-> [!NOTE] "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+```
+"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+```
 
-## `svelte_options_invalid_customelement_props`
+### `svelte_options_invalid_customelement_props`
 
-> [!NOTE] "props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
+```
+"props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
+```
 
-## `svelte_options_invalid_customelement_shadow`
+### `svelte_options_invalid_customelement_shadow`
 
-> [!NOTE] "shadow" must be either "open" or "none"
+```
+"shadow" must be either "open" or "none"
+```
 
-## `svelte_options_invalid_tagname`
+### `svelte_options_invalid_tagname`
 
-> [!NOTE] Tag name must be lowercase and hyphenated
+```
+Tag name must be lowercase and hyphenated
+```
 
 See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
 
-## `svelte_options_reserved_tagname`
+### `svelte_options_reserved_tagname`
 
-> [!NOTE] Tag name is reserved
+```
+Tag name is reserved
+```
 
 See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
 
-## `svelte_options_unknown_attribute`
+### `svelte_options_unknown_attribute`
 
-> [!NOTE] '\<svelte:options>' unknown attribute '%name%'
+```
+`<svelte:options>` unknown attribute '%name%'
+```
 
-## `svelte_self_invalid_placement`
+### `svelte_self_invalid_placement`
 
-> [!NOTE] '\<svelte:self>' components can only exist inside '{#if}' blocks, '{#each}' blocks, '{#snippet}' blocks or slots passed to components
+```
+`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components
+```
 
-## `tag_invalid_name`
+### `tag_invalid_name`
 
-> [!NOTE] Expected a valid element or component name. Components must have a valid variable name or dot notation expression
+```
+Expected a valid element or component name. Components must have a valid variable name or dot notation expression
+```
 
-## `tag_invalid_placement`
+### `tag_invalid_placement`
 
-> [!NOTE] {@%name% ...} tag cannot be %location%
+```
+{@%name% ...} tag cannot be %location%
+```
 
-## `textarea_invalid_content`
+### `textarea_invalid_content`
 
-> [!NOTE] A '\<textarea>' can have either a value attribute or (equivalently) child content, but not both
+```
+A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
+```
 
-## `title_illegal_attribute`
+### `title_illegal_attribute`
 
-> [!NOTE] '\<title>' cannot have attributes nor directives
+```
+`<title>` cannot have attributes nor directives
+```
 
-## `title_invalid_content`
+### `title_invalid_content`
 
-> [!NOTE] '\<title>' can only contain text and {tags}
+```
+`<title>` can only contain text and {tags}
+```
 
-## `transition_conflict`
+### `transition_conflict`
 
-> [!NOTE] Cannot use '%type%:' alongside existing '%existing%:' directive
+```
+Cannot use `%type%:` alongside existing `%existing%:` directive
+```
 
-## `transition_duplicate`
+### `transition_duplicate`
 
-> [!NOTE] Cannot use multiple '%type%:' directives on a single element
+```
+Cannot use multiple `%type%:` directives on a single element
+```
 
-## `typescript_invalid_feature`
+### `typescript_invalid_feature`
 
-> [!NOTE] TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of '\<script>' tags, these features are not supported. For use within '\<script>' tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using 'vitePreprocess', make sure to specifically enable preprocessing script tags ('vitePreprocess({ script: true })')
+```
+TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
+```
 
-## `unexpected_eof`
+### `unexpected_eof`
 
-> [!NOTE] Unexpected end of input
+```
+Unexpected end of input
+```
 
-## `unexpected_reserved_word`
+### `unexpected_reserved_word`
 
-> [!NOTE] '%word%' is a reserved word in JavaScript and cannot be used here
+```
+'%word%' is a reserved word in JavaScript and cannot be used here
+```
 
-## `void_element_invalid_content`
+### `void_element_invalid_content`
 
-> [!NOTE] Void elements cannot have children or closing tags
+```
+Void elements cannot have children or closing tags
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 6a2c27f525..9217a88f75 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -19,9 +19,11 @@ You can list multiple rules in a single comment (separated by commas), and add a
 <div onclick>...</div>
 ```
 
-## `a11y_accesskey`
+### `a11y_accesskey`
 
-> [!NOTE] Avoid using accesskey
+```
+Avoid using accesskey
+```
 
 Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
 
@@ -31,9 +33,11 @@ Enforce no `accesskey` on element. Access keys are HTML attributes that allow we
 <div accesskey="z"></div>
 ```
 
-## `a11y_aria_activedescendant_has_tabindex`
+### `a11y_aria_activedescendant_has_tabindex`
 
-> [!NOTE] An element with an aria-activedescendant attribute should have a tabindex value
+```
+An element with an aria-activedescendant attribute should have a tabindex value
+```
 
 An element with `aria-activedescendant` must be tabbable, so it must either have an inherent `tabindex` or declare `tabindex` as an attribute.
 
@@ -42,9 +46,11 @@ An element with `aria-activedescendant` must be tabbable, so it must either have
 <div aria-activedescendant="some-id"></div>
 ```
 
-## `a11y_aria_attributes`
+### `a11y_aria_attributes`
 
-> [!NOTE] '\<%name%>' should not have aria-\* attributes
+```
+`<%name%>` should not have aria-* attributes
+```
 
 Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
 
@@ -53,13 +59,17 @@ Certain reserved DOM elements do not support ARIA roles, states and properties.
 <meta aria-hidden="false" />
 ```
 
-## `a11y_autocomplete_valid`
+### `a11y_autocomplete_valid`
 
-> [!NOTE] '%value%' is an invalid value for 'autocomplete' on '\<input type="%type%">'
+```
+'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
+```
 
-## `a11y_autofocus`
+### `a11y_autofocus`
 
-> [!NOTE] Avoid using autofocus
+```
+Avoid using autofocus
+```
 
 Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
 
@@ -68,9 +78,11 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 <input autofocus />
 ```
 
-## `a11y_click_events_have_key_events`
+### `a11y_click_events_have_key_events`
 
-> [!NOTE] Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as '\<button type="button">' or '\<a>' might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+```
+Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+```
 
 Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.
 
@@ -85,13 +97,17 @@ If a non-interactive element is required then `onclick` should be accompanied by
 
 Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
 
-## `a11y_consider_explicit_label`
+### `a11y_consider_explicit_label`
 
-> [!NOTE] Buttons and links should either contain text or have an 'aria-label' or 'aria-labelledby' attribute
+```
+Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+```
 
-## `a11y_distracting_elements`
+### `a11y_distracting_elements`
 
-> [!NOTE] Avoid '\<%name%>' elements
+```
+Avoid `<%name%>` elements
+```
 
 Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
 
@@ -102,13 +118,17 @@ The following elements are visually distracting: `<marquee>` and `<blink>`.
 <marquee></marquee>
 ```
 
-## `a11y_figcaption_index`
+### `a11y_figcaption_index`
 
-> [!NOTE] '\<figcaption>' must be first or last child of '\<figure>'
+```
+`<figcaption>` must be first or last child of `<figure>`
+```
 
-## `a11y_figcaption_parent`
+### `a11y_figcaption_parent`
 
-> [!NOTE] '\<figcaption>' must be an immediate child of '\<figure>'
+```
+`<figcaption>` must be an immediate child of `<figure>`
+```
 
 Enforce that certain DOM elements have the correct structure.
 
@@ -119,9 +139,11 @@ Enforce that certain DOM elements have the correct structure.
 </div>
 ```
 
-## `a11y_hidden`
+### `a11y_hidden`
 
-> [!NOTE] '\<%name%>' element should not be hidden
+```
+`<%name%>` element should not be hidden
+```
 
 Certain DOM elements are useful for screen reader navigation and should not be hidden.
 
@@ -131,9 +153,11 @@ Certain DOM elements are useful for screen reader navigation and should not be h
 <h2 aria-hidden="true">invisible header</h2>
 ```
 
-## `a11y_img_redundant_alt`
+### `a11y_img_redundant_alt`
 
-> [!NOTE] Screenreaders already announce '\<img>' elements as an image
+```
+Screenreaders already announce `<img>` elements as an image
+```
 
 Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
 
@@ -153,9 +177,11 @@ Enforce img alt attribute does not contain the word image, picture, or photo. Sc
 <img src="foo" alt="Picture of baz fixing a bug." />
 ```
 
-## `a11y_incorrect_aria_attribute_type`
+### `a11y_incorrect_aria_attribute_type`
 
-> [!NOTE] The value of '%attribute%' must be a %type%
+```
+The value of '%attribute%' must be a %type%
+```
 
 Enforce that only the correct type of value is used for aria attributes. For example, `aria-hidden`
 should only receive a boolean.
@@ -165,37 +191,53 @@ should only receive a boolean.
 <div aria-hidden="yes"></div>
 ```
 
-## `a11y_incorrect_aria_attribute_type_boolean`
+### `a11y_incorrect_aria_attribute_type_boolean`
 
-> [!NOTE] The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
+```
+The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
+```
 
-## `a11y_incorrect_aria_attribute_type_id`
+### `a11y_incorrect_aria_attribute_type_id`
 
-> [!NOTE] The value of '%attribute%' must be a string that represents a DOM element ID
+```
+The value of '%attribute%' must be a string that represents a DOM element ID
+```
 
-## `a11y_incorrect_aria_attribute_type_idlist`
+### `a11y_incorrect_aria_attribute_type_idlist`
 
-> [!NOTE] The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
+```
+The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
+```
 
-## `a11y_incorrect_aria_attribute_type_integer`
+### `a11y_incorrect_aria_attribute_type_integer`
 
-> [!NOTE] The value of '%attribute%' must be an integer
+```
+The value of '%attribute%' must be an integer
+```
 
-## `a11y_incorrect_aria_attribute_type_token`
+### `a11y_incorrect_aria_attribute_type_token`
 
-> [!NOTE] The value of '%attribute%' must be exactly one of %values%
+```
+The value of '%attribute%' must be exactly one of %values%
+```
 
-## `a11y_incorrect_aria_attribute_type_tokenlist`
+### `a11y_incorrect_aria_attribute_type_tokenlist`
 
-> [!NOTE] The value of '%attribute%' must be a space-separated list of one or more of %values%
+```
+The value of '%attribute%' must be a space-separated list of one or more of %values%
+```
 
-## `a11y_incorrect_aria_attribute_type_tristate`
+### `a11y_incorrect_aria_attribute_type_tristate`
 
-> [!NOTE] The value of '%attribute%' must be exactly one of true, false, or mixed
+```
+The value of '%attribute%' must be exactly one of true, false, or mixed
+```
 
-## `a11y_interactive_supports_focus`
+### `a11y_interactive_supports_focus`
 
-> [!NOTE] Elements with the '%role%' interactive role must have a tabindex value
+```
+Elements with the '%role%' interactive role must have a tabindex value
+```
 
 Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.
 
@@ -204,9 +246,11 @@ Enforce that elements with an interactive role and interactive handlers (mouse o
 <div role="button" onkeypress={() => {}} />
 ```
 
-## `a11y_invalid_attribute`
+### `a11y_invalid_attribute`
 
-> [!NOTE] '%href_value%' is not a valid %href_attribute% attribute
+```
+'%href_value%' is not a valid %href_attribute% attribute
+```
 
 Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
 
@@ -215,9 +259,11 @@ Enforce that attributes important for accessibility have a valid value. For exam
 <a href="">invalid</a>
 ```
 
-## `a11y_label_has_associated_control`
+### `a11y_label_has_associated_control`
 
-> [!NOTE] A form label must be associated with a control
+```
+A form label must be associated with a control
+```
 
 Enforce that a label tag has a text label and an associated control.
 
@@ -235,9 +281,11 @@ There are two supported ways to associate a label with a control:
 <label>A</label>
 ```
 
-## `a11y_media_has_caption`
+### `a11y_media_has_caption`
 
-> [!NOTE] '\<video>' elements must have a '\<track kind="captions">'
+```
+`<video>` elements must have a `<track kind="captions">`
+```
 
 Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
 
@@ -255,9 +303,11 @@ The captions should contain all important and relevant information to understand
 <video><track /></video>
 ```
 
-## `a11y_misplaced_role`
+### `a11y_misplaced_role`
 
-> [!NOTE] '\<%name%>' should not have role attribute
+```
+`<%name%>` should not have role attribute
+```
 
 Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
 
@@ -266,9 +316,11 @@ Certain reserved DOM elements do not support ARIA roles, states and properties.
 <meta role="tooltip" />
 ```
 
-## `a11y_misplaced_scope`
+### `a11y_misplaced_scope`
 
-> [!NOTE] The scope attribute should only be used with '\<th>' elements
+```
+The scope attribute should only be used with `<th>` elements
+```
 
 The scope attribute should only be used on `<th>` elements.
 
@@ -278,9 +330,11 @@ The scope attribute should only be used on `<th>` elements.
 <div scope="row" />
 ```
 
-## `a11y_missing_attribute`
+### `a11y_missing_attribute`
 
-> [!NOTE] '\<%name%>' element should have %article% %sequence% attribute
+```
+`<%name%>` element should have %article% %sequence% attribute
+```
 
 Enforce that attributes required for accessibility are present on an element. This includes the following checks:
 
@@ -303,9 +357,11 @@ Enforce that attributes required for accessibility are present on an element. Th
 <a>text</a>
 ```
 
-## `a11y_missing_content`
+### `a11y_missing_content`
 
-> [!NOTE] '\<%name%>' element should contain text
+```
+`<%name%>` element should contain text
+```
 
 Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
 
@@ -317,9 +373,11 @@ Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and th
 <h1></h1>
 ```
 
-## `a11y_mouse_events_have_key_events`
+### `a11y_mouse_events_have_key_events`
 
-> [!NOTE] '%event%' event must be accompanied by '%accompanied_by%' event
+```
+'%event%' event must be accompanied by '%accompanied_by%' event
+```
 
 Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `onblur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
 
@@ -331,13 +389,17 @@ Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `on
 <div onmouseout={handleMouseout} />
 ```
 
-## `a11y_no_abstract_role`
+### `a11y_no_abstract_role`
 
-> [!NOTE] Abstract role '%role%' is forbidden
+```
+Abstract role '%role%' is forbidden
+```
 
-## `a11y_no_interactive_element_to_noninteractive_role`
+### `a11y_no_interactive_element_to_noninteractive_role`
 
-> [!NOTE] '\<%element%>' cannot have role '%role%'
+```
+`<%element%>` cannot have role '%role%'
+```
 
 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
 
@@ -346,9 +408,11 @@ Enforce that `onmouseover` and `onmouseout` are accompanied by `onfocus` and `on
 <textarea role="listitem"></textarea>
 ```
 
-## `a11y_no_noninteractive_element_interactions`
+### `a11y_no_noninteractive_element_interactions`
 
-> [!NOTE] Non-interactive element '\<%element%>' should not be assigned mouse or keyboard event listeners
+```
+Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners
+```
 
 A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `<main>`, `<area>`, `<h1>` (,`<h2>`, etc), `<p>`, `<img>`, `<li>`, `<ul>` and `<ol>`. Non-interactive [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region` and `tooltip`.
 
@@ -360,9 +424,11 @@ A non-interactive element does not support event handlers (mouse and key handler
 <div role="listitem" onclick={() => {}}></div>
 ```
 
-## `a11y_no_noninteractive_element_to_interactive_role`
+### `a11y_no_noninteractive_element_to_interactive_role`
 
-> [!NOTE] Non-interactive element '\<%element%>' cannot have interactive role '%role%'
+```
+Non-interactive element `<%element%>` cannot have interactive role '%role%'
+```
 
 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch` and `textbox`.
 
@@ -371,9 +437,11 @@ A non-interactive element does not support event handlers (mouse and key handler
 <h3 role="searchbox">Button</h3>
 ```
 
-## `a11y_no_noninteractive_tabindex`
+### `a11y_no_noninteractive_tabindex`
 
-> [!NOTE] noninteractive element cannot have nonnegative tabIndex value
+```
+noninteractive element cannot have nonnegative tabIndex value
+```
 
 Tab key navigation should be limited to elements on the page that can be interacted with.
 
@@ -383,9 +451,11 @@ Tab key navigation should be limited to elements on the page that can be interac
 <div tabindex="0"></div>
 ```
 
-## `a11y_no_redundant_roles`
+### `a11y_no_redundant_roles`
 
-> [!NOTE] Redundant role '%role%'
+```
+Redundant role '%role%'
+```
 
 Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
 
@@ -397,9 +467,11 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 <img role="img" src="foo.jpg" />
 ```
 
-## `a11y_no_static_element_interactions`
+### `a11y_no_static_element_interactions`
 
-> [!NOTE] '\<%element%>' with a %handler% handler must have an ARIA role
+```
+`<%element%>` with a %handler% handler must have an ARIA role
+```
 
 Elements like `<div>` with interactive handlers like `click` must have an ARIA role.
 
@@ -409,9 +481,11 @@ Elements like `<div>` with interactive handlers like `click` must have an ARIA r
 <div onclick={() => ''}></div>
 ```
 
-## `a11y_positive_tabindex`
+### `a11y_positive_tabindex`
 
-> [!NOTE] Avoid tabindex values above zero
+```
+Avoid tabindex values above zero
+```
 
 Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
 
@@ -421,9 +495,11 @@ Avoid positive `tabindex` property values. This will move elements out of the ex
 <div tabindex="1"></div>
 ```
 
-## `a11y_role_has_required_aria_props`
+### `a11y_role_has_required_aria_props`
 
-> [!NOTE] Elements with the ARIA role "%role%" must have the following attributes defined: %props%
+```
+Elements with the ARIA role "%role%" must have the following attributes defined: %props%
+```
 
 Elements with ARIA roles must have all required attributes for that role.
 
@@ -432,9 +508,11 @@ Elements with ARIA roles must have all required attributes for that role.
 <span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
 ```
 
-## `a11y_role_supports_aria_props`
+### `a11y_role_supports_aria_props`
 
-> [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'
+```
+The attribute '%attribute%' is not supported by the role '%role%'
+```
 
 Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
 
@@ -446,9 +524,11 @@ Elements with explicit or implicit roles defined contain only `aria-*` propertie
 <li aria-required></li>
 ```
 
-## `a11y_role_supports_aria_props_implicit`
+### `a11y_role_supports_aria_props_implicit`
 
-> [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element '\<%name%>'
+```
+The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`
+```
 
 Elements with explicit or implicit roles defined contain only `aria-*` properties supported by that role.
 
@@ -460,11 +540,15 @@ Elements with explicit or implicit roles defined contain only `aria-*` propertie
 <li aria-required></li>
 ```
 
-## `a11y_unknown_aria_attribute`
+### `a11y_unknown_aria_attribute`
 
-> [!NOTE] Unknown aria attribute 'aria-%attribute%'
+```
+Unknown aria attribute 'aria-%attribute%'
+```
 
-> [!NOTE] Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
+```
+Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
+```
 
 Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
 
@@ -473,11 +557,15 @@ Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA
 <input type="image" aria-labeledby="foo" />
 ```
 
-## `a11y_unknown_role`
+### `a11y_unknown_role`
 
-> [!NOTE] Unknown role '%role%'
+```
+Unknown role '%role%'
+```
 
-> [!NOTE] Unknown role '%role%'. Did you mean '%suggestion%'?
+```
+Unknown role '%role%'. Did you mean '%suggestion%'?
+```
 
 Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
 
@@ -487,65 +575,95 @@ Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference t
 <div role="toooltip"></div>
 ```
 
-## `attribute_avoid_is`
+### `attribute_avoid_is`
 
-> [!NOTE] The "is" attribute is not supported cross-browser and should be avoided
+```
+The "is" attribute is not supported cross-browser and should be avoided
+```
 
-## `attribute_global_event_reference`
+### `attribute_global_event_reference`
 
-> [!NOTE] You are referencing 'globalThis.%name%'. Did you forget to declare a variable with that name?
+```
+You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
+```
 
-## `attribute_illegal_colon`
+### `attribute_illegal_colon`
 
-> [!NOTE] Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
+```
+Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
+```
 
-## `attribute_invalid_property_name`
+### `attribute_invalid_property_name`
 
-> [!NOTE] '%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
+```
+'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
+```
 
-## `attribute_quoted`
+### `attribute_quoted`
 
-> [!NOTE] Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
+```
+Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
+```
 
-## `bind_invalid_each_rest`
+### `bind_invalid_each_rest`
 
-> [!NOTE] The rest operator (...) will create a new object and binding '%name%' with the original object will not work
+```
+The rest operator (...) will create a new object and binding '%name%' with the original object will not work
+```
 
-## `block_empty`
+### `block_empty`
 
-> [!NOTE] Empty block
+```
+Empty block
+```
 
-## `component_name_lowercase`
+### `component_name_lowercase`
 
-> [!NOTE] '\<%name%>' will be treated as an HTML element unless it begins with a capital letter
+```
+`<%name%>` will be treated as an HTML element unless it begins with a capital letter
+```
 
-## `css_unused_selector`
+### `css_unused_selector`
 
-> [!NOTE] Unused CSS selector "%name%"
+```
+Unused CSS selector "%name%"
+```
 
-## `element_invalid_self_closing_tag`
+### `element_invalid_self_closing_tag`
 
-> [!NOTE] Self-closing HTML tags for non-void elements are ambiguous — use '\<%name% ...>\</%name%>' rather than '\<%name% ... />'
+```
+Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
+```
 
-## `event_directive_deprecated`
+### `event_directive_deprecated`
 
-> [!NOTE] Using 'on:%name%' to listen to the %name% event is deprecated. Use the event attribute 'on%name%' instead
+```
+Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
+```
 
-## `export_let_unused`
+### `export_let_unused`
 
-> [!NOTE] Component has unused export property '%name%'. If it is for external reference only, please consider using 'export const %name%'
+```
+Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
+```
 
-## `legacy_code`
+### `legacy_code`
 
-> [!NOTE] '%code%' is no longer valid — please use '%suggestion%' instead
+```
+`%code%` is no longer valid — please use `%suggestion%` instead
+```
 
-## `legacy_component_creation`
+### `legacy_component_creation`
 
-> [!NOTE] Svelte 5 components are no longer classes. Instantiate them using 'mount' or 'hydrate' (imported from 'svelte') instead.
+```
+Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
+```
 
-## `node_invalid_placement_ssr`
+### `node_invalid_placement_ssr`
 
-> [!NOTE] %thing% is invalid inside '\<%parent%>'. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a 'hydration_mismatch' warning
+```
+%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+```
 
 HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
 
@@ -555,81 +673,119 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
 
-## `non_reactive_update`
+### `non_reactive_update`
 
-> [!NOTE] '%name%' is updated, but is not declared with '$state(...)'. Changing its value will not correctly trigger updates
+```
+`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
+```
 
-## `options_deprecated_accessors`
+### `options_deprecated_accessors`
 
-> [!NOTE] The 'accessors' option has been deprecated. It will have no effect in runes mode
+```
+The `accessors` option has been deprecated. It will have no effect in runes mode
+```
 
-## `options_deprecated_immutable`
+### `options_deprecated_immutable`
 
-> [!NOTE] The 'immutable' option has been deprecated. It will have no effect in runes mode
+```
+The `immutable` option has been deprecated. It will have no effect in runes mode
+```
 
-## `options_missing_custom_element`
+### `options_missing_custom_element`
 
-> [!NOTE] The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
+```
+The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
+```
 
-## `options_removed_enable_sourcemap`
+### `options_removed_enable_sourcemap`
 
-> [!NOTE] The 'enableSourcemap' option has been removed. Source maps are always generated now, and tooling can choose to ignore them
+```
+The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
+```
 
-## `options_removed_hydratable`
+### `options_removed_hydratable`
 
-> [!NOTE] The 'hydratable' option has been removed. Svelte components are always hydratable now
+```
+The `hydratable` option has been removed. Svelte components are always hydratable now
+```
 
-## `options_removed_loop_guard_timeout`
+### `options_removed_loop_guard_timeout`
 
-> [!NOTE] The 'loopGuardTimeout' option has been removed
+```
+The `loopGuardTimeout` option has been removed
+```
 
-## `options_renamed_ssr_dom`
+### `options_renamed_ssr_dom`
 
-> [!NOTE] 'generate: "dom"' and 'generate: "ssr"' options have been renamed to "client" and "server" respectively
+```
+`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
+```
 
-## `perf_avoid_inline_class`
+### `perf_avoid_inline_class`
 
-> [!NOTE] Avoid 'new class' — instead, declare the class at the top level scope
+```
+Avoid 'new class' — instead, declare the class at the top level scope
+```
 
-## `perf_avoid_nested_class`
+### `perf_avoid_nested_class`
 
-> [!NOTE] Avoid declaring classes below the top level scope
+```
+Avoid declaring classes below the top level scope
+```
 
-## `reactive_declaration_invalid_placement`
+### `reactive_declaration_invalid_placement`
 
-> [!NOTE] Reactive declarations only exist at the top level of the instance script
+```
+Reactive declarations only exist at the top level of the instance script
+```
 
-## `reactive_declaration_module_script_dependency`
+### `reactive_declaration_module_script_dependency`
 
-> [!NOTE] Reassignments of module-level declarations will not cause reactive statements to update
+```
+Reassignments of module-level declarations will not cause reactive statements to update
+```
 
-## `reactive_declaration_non_reactive_property`
+### `reactive_declaration_non_reactive_property`
 
-> [!NOTE] Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
+```
+Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
+```
 
-## `script_context_deprecated`
+### `script_context_deprecated`
 
-> [!NOTE] 'context="module"' is deprecated, use the 'module' attribute instead
+```
+`context="module"` is deprecated, use the `module` attribute instead
+```
 
-## `script_unknown_attribute`
+### `script_unknown_attribute`
 
-> [!NOTE] Unrecognized attribute — should be one of 'generics', 'lang' or 'module'. If this exists for a preprocessor, ensure that the preprocessor removes it
+```
+Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+```
 
-## `slot_element_deprecated`
+### `slot_element_deprecated`
 
-> [!NOTE] Using '\<slot>' to render parent content is deprecated. Use '{@render ...}' tags instead
+```
+Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
+```
 
-## `state_referenced_locally`
+### `state_referenced_locally`
 
-> [!NOTE] State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+```
+State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+```
 
-## `store_rune_conflict`
+### `store_rune_conflict`
 
-> [!NOTE] It looks like you're using the '$%name%' rune, but there is a local binding called '%name%'. Referencing a local variable with a '$' prefix will create a store subscription. Please rename '%name%' to avoid the ambiguity
+```
+It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
+```
 
-## `svelte_component_deprecated`
+### `svelte_component_deprecated`
 
-> [!NOTE] '\<svelte:component>' is deprecated in runes mode — components are dynamic by default
+```
+`<svelte:component>` is deprecated in runes mode — components are dynamic by default
+```
 
 In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
 
@@ -659,16 +815,24 @@ A derived value may be used in other contexts:
 + <Component />
 ```
 
-## `svelte_element_invalid_this`
+### `svelte_element_invalid_this`
 
-> [!NOTE] 'this' should be an '{expression}'. Using a string attribute value will cause an error in future versions of Svelte
+```
+`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
+```
 
-## `svelte_self_deprecated`
+### `svelte_self_deprecated`
 
-> [!NOTE] '\<svelte:self>' is deprecated — use self-imports (e.g. 'import %name% from './%basename%'') instead
+```
+`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
+```
 
-## `unknown_code`
+### `unknown_code`
 
-> [!NOTE] '%code%' is not a recognised code
+```
+`%code%` is not a recognised code
+```
 
-> [!NOTE] '%code%' is not a recognised code (did you mean '%suggestion%'?)
+```
+`%code%` is not a recognised code (did you mean `%suggestion%`?)
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
index 3ab3605176..f5df54ea17 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md
@@ -3,108 +3,162 @@ title: 'Runtime errors'
 generated: 'generated by process-messages/index.js'
 ---
 
-## `bind_invalid_checkbox_value`
+### `bind_invalid_checkbox_value`
 
-> [!NOTE] Using 'bind:value' together with a checkbox input is not allowed. Use 'bind:checked' instead
+```
+Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
+```
 
-## `bind_invalid_export`
+### `bind_invalid_export`
 
-> [!NOTE] Component %component% has an export named '%key%' that a consumer component is trying to access using 'bind:%key%', which is disallowed. Instead, use 'bind:this' (e.g. '\<%name% bind:this={component} />') and then access the property on the bound component instance (e.g. 'component.%key%')
+```
+Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
+```
 
-## `bind_not_bindable`
+### `bind_not_bindable`
 
-> [!NOTE] A component is attempting to bind to a non-bindable property '%key%' belonging to %component% (i.e. '\<%name% bind:%key%={...}>'). To mark a property as bindable: 'let { %key% = $bindable() } = $props()'
+```
+A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
+```
 
-## `component_api_changed`
+### `component_api_changed`
 
-> [!NOTE] %parent% called '%method%' on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+```
+%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+```
 
-## `component_api_invalid_new`
+### `component_api_invalid_new`
 
-> [!NOTE] Attempted to instantiate %component% with 'new %name%', which is no longer valid in Svelte 5. If this component is not under your control, set the 'compatibility.componentApi' compiler option to '4' to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+```
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+```
 
-## `derived_references_self`
+### `derived_references_self`
 
-> [!NOTE] A derived value cannot reference itself recursively
+```
+A derived value cannot reference itself recursively
+```
 
-## `each_key_duplicate`
+### `each_key_duplicate`
 
-> [!NOTE] Keyed each block has duplicate key at indexes %a% and %b%
+```
+Keyed each block has duplicate key at indexes %a% and %b%
+```
 
-> [!NOTE] Keyed each block has duplicate key '%value%' at indexes %a% and %b%
+```
+Keyed each block has duplicate key `%value%` at indexes %a% and %b%
+```
 
-## `effect_in_teardown`
+### `effect_in_teardown`
 
-> [!NOTE] '%rune%' cannot be used inside an effect cleanup function
+```
+`%rune%` cannot be used inside an effect cleanup function
+```
 
-## `effect_in_unowned_derived`
+### `effect_in_unowned_derived`
 
-> [!NOTE] Effect cannot be created inside a '$derived' value that was not itself created inside an effect
+```
+Effect cannot be created inside a `$derived` value that was not itself created inside an effect
+```
 
-## `effect_orphan`
+### `effect_orphan`
 
-> [!NOTE] '%rune%' can only be used inside an effect (e.g. during component initialisation)
+```
+`%rune%` can only be used inside an effect (e.g. during component initialisation)
+```
 
-## `effect_update_depth_exceeded`
+### `effect_update_depth_exceeded`
 
-> [!NOTE] Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+```
+Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
+```
 
-## `hydration_failed`
+### `hydration_failed`
 
-> [!NOTE] Failed to hydrate the application
+```
+Failed to hydrate the application
+```
 
-## `invalid_default_snippet`
+### `invalid_default_snippet`
 
-> [!NOTE] Cannot use '{@render children(...)}' if the parent component uses 'let:' directives. Consider using a named snippet instead
+```
+Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
+```
 
-## `invalid_snippet`
+### `invalid_snippet`
 
-> [!NOTE] Could not '{@render}' snippet due to the expression being 'null' or 'undefined'. Consider using optional chaining '{@render snippet?.()}'
+```
+Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
+```
 
-## `lifecycle_function_unavailable`
+### `lifecycle_function_unavailable`
 
-> [!NOTE] '%name%(...)' is not available on the server
+```
+`%name%(...)` is not available on the server
+```
 
-## `lifecycle_legacy_only`
+### `lifecycle_legacy_only`
 
-> [!NOTE] '%name%(...)' cannot be used in runes mode
+```
+`%name%(...)` cannot be used in runes mode
+```
 
-## `lifecycle_outside_component`
+### `lifecycle_outside_component`
 
-> [!NOTE] '%name%(...)' can only be used during component initialisation
+```
+`%name%(...)` can only be used during component initialisation
+```
 
-## `props_invalid_value`
+### `props_invalid_value`
 
-> [!NOTE] Cannot do 'bind:%key%={undefined}' when '%key%' has a fallback value
+```
+Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
+```
 
-## `props_rest_readonly`
+### `props_rest_readonly`
 
-> [!NOTE] Rest element properties of '$props()' such as '%property%' are readonly
+```
+Rest element properties of `$props()` such as `%property%` are readonly
+```
 
-## `rune_outside_svelte`
+### `rune_outside_svelte`
 
-> [!NOTE] The '%rune%' rune is only available inside '.svelte' and '.svelte.js/ts' files
+```
+The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
+```
 
-## `state_descriptors_fixed`
+### `state_descriptors_fixed`
 
-> [!NOTE] Property descriptors defined on '$state' objects must contain 'value' and always be 'enumerable', 'configurable' and 'writable'.
+```
+Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+```
 
-## `state_prototype_fixed`
+### `state_prototype_fixed`
 
-> [!NOTE] Cannot set prototype of '$state' object
+```
+Cannot set prototype of `$state` object
+```
 
-## `state_unsafe_local_read`
+### `state_unsafe_local_read`
 
-> [!NOTE] Reading state that was created inside the same derived is forbidden. Consider using 'untrack' to read locally created state
+```
+Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+```
 
-## `state_unsafe_mutation`
+### `state_unsafe_mutation`
 
-> [!NOTE] Updating state inside a derived is forbidden. If the value should not be reactive, declare it without '$state'
+```
+Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
+```
 
-## `store_invalid_shape`
+### `store_invalid_shape`
 
-> [!NOTE] '%name%' is not a store with a 'subscribe' method
+```
+`%name%` is not a store with a `subscribe` method
+```
 
-## `svelte_element_invalid_this_value`
+### `svelte_element_invalid_this_value`
 
-> [!NOTE] The 'this' prop on '\<svelte:element>' must be a string, if defined
+```
+The `this` prop on `<svelte:element>` must be a string, if defined
+```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
index 104daec4d3..b1823db956 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md
@@ -3,65 +3,97 @@ title: 'Runtime warnings'
 generated: 'generated by process-messages/index.js'
 ---
 
-## `binding_property_non_reactive`
+### `binding_property_non_reactive`
 
-> [!NOTE] '%binding%' is binding to a non-reactive property
+```
+`%binding%` is binding to a non-reactive property
+```
 
-> [!NOTE] '%binding%' (%location%) is binding to a non-reactive property
+```
+`%binding%` (%location%) is binding to a non-reactive property
+```
 
-## `console_log_state`
+### `console_log_state`
 
-> [!NOTE] Your 'console.%method%' contained '$state' proxies. Consider using '$inspect(...)' or '$state.snapshot(...)' instead
+```
+Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+```
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
 The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
 
-## `dynamic_void_element_content`
+### `dynamic_void_element_content`
 
-> [!NOTE] '\<svelte:element this="%tag%">' is a void element — it cannot have content
+```
+`<svelte:element this="%tag%">` is a void element — it cannot have content
+```
 
-## `event_handler_invalid`
+### `event_handler_invalid`
 
-> [!NOTE] %handler% should be a function. Did you mean to %suggestion%?
+```
+%handler% should be a function. Did you mean to %suggestion%?
+```
 
-## `hydration_attribute_changed`
+### `hydration_attribute_changed`
 
-> [!NOTE] The '%attribute%' attribute on '%html%' changed its value between server and client renders. The client value, '%value%', will be ignored in favour of the server value
+```
+The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
+```
 
-## `hydration_html_changed`
+### `hydration_html_changed`
 
-> [!NOTE] The value of an '{@html ...}' block changed between server and client renders. The client value will be ignored in favour of the server value
+```
+The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
+```
 
-> [!NOTE] The value of an '{@html ...}' block %location% changed between server and client renders. The client value will be ignored in favour of the server value
+```
+The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
+```
 
-## `hydration_mismatch`
+### `hydration_mismatch`
 
-> [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server
+```
+Hydration failed because the initial UI does not match what was rendered on the server
+```
 
-> [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
+```
+Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
+```
 
-## `invalid_raw_snippet_render`
+### `invalid_raw_snippet_render`
 
-> [!NOTE] The 'render' function passed to 'createRawSnippet' should return HTML for a single element
+```
+The `render` function passed to `createRawSnippet` should return HTML for a single element
+```
 
-## `lifecycle_double_unmount`
+### `lifecycle_double_unmount`
 
-> [!NOTE] Tried to unmount a component that was not mounted
+```
+Tried to unmount a component that was not mounted
+```
 
-## `ownership_invalid_binding`
+### `ownership_invalid_binding`
 
-> [!NOTE] %parent% passed a value to %child% with 'bind:', but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+```
+%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+```
 
-## `ownership_invalid_mutation`
+### `ownership_invalid_mutation`
 
-> [!NOTE] Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with 'bind:', or use a callback instead
+```
+Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+```
 
-> [!NOTE] %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with 'bind:', or use a callback instead
+```
+%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+```
 
-## `state_proxy_equality_mismatch`
+### `state_proxy_equality_mismatch`
 
-> [!NOTE] Reactive '$state(...)' proxies and the values they proxy have different identities. Because of this, comparisons with '%operator%' will produce unexpected results
+```
+Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
+```
 
 `$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
 
@@ -76,9 +108,13 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
-## `state_snapshot_uncloneable`
+### `state_snapshot_uncloneable`
 
-> [!NOTE] Value cannot be cloned with '$state.snapshot' — the original value was returned
+```
+Value cannot be cloned with `$state.snapshot` — the original value was returned
+```
 
-> [!NOTE] The following properties cannot be cloned with '$state.snapshot' — the return value contains the originals:
-> %properties%
+```
+The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
+%properties%
+```

From d840d333c9644bed9726c3c846966824cee6f22b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Oct 2024 18:44:51 -0400
Subject: [PATCH 12/13] Revert "allow (and properly style) code blocks in
 headings"

This reverts commit 1501e5bc805d5b646cb8e4c5ed778f98ee07d8b0.
---
 apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte | 1 -
 packages/site-kit/src/lib/markdown/renderer.ts           | 5 ++++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index 4e6df3af8c..c90495b60e 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -31,7 +31,6 @@
 
 	.page :global(:where(h2, h3) code) {
 		all: unset;
-		font-family: var(--sk-font-mono);
 	}
 
 	@media (min-width: 832px) {
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 73bed8fea7..694d258d19 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -269,7 +269,10 @@ export async function render_content_markdown(
 			headings[depth - 1] = slugify(raw);
 			headings.length = depth;
 			const slug = headings.filter(Boolean).join('-');
-			return `<h${depth} id="${slug}">${text}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
+			return `<h${depth} id="${slug}">${text.replace(
+				/<\/?code>/g,
+				''
+			)}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${depth}>`;
 		},
 		code({ text }) {
 			return snippets.get(text);

From 2641983e2586fc93456f6b5bb6d1d2023a473f72 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 10 Oct 2024 18:46:50 -0400
Subject: [PATCH 13/13] remove copy-to-clipboard buttons from code blocks
 without a lang

---
 packages/site-kit/src/lib/markdown/renderer.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index 694d258d19..3a05bcbd50 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -552,7 +552,11 @@ function hash_graph(hash: Hash, file: string, seen = new Set<string>()) {
 function parse_options(source: string, language: string) {
 	METADATA_REGEX.lastIndex = 0;
 
-	const options: SnippetOptions = { file: null, link: false, copy: language !== 'dts' };
+	const options: SnippetOptions = {
+		file: null,
+		link: false,
+		copy: language !== '' && language !== 'dts'
+	};
 
 	source = source.replace(METADATA_REGEX, (_, key, value) => {
 		switch (key) {