<!-- svelte-ignore a11y_autofocus --><inputautofocus/>

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) --><divonclick>...</div>

Avoid using accesskey

<!-- A11y: Avoid using accesskey --><divaccesskey="z"></div>

An element with an aria-activedescendant attribute should have a tabindex value

<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value --><divaria-activedescendant="some-id"></div>

`<%name%>` should not have aria-* attributes

<!-- A11y: <meta> should not have aria-* attributes --><metaaria-hidden="false"/>

'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`

Avoid using autofocus

<!-- A11y: Avoid using autofocus --><inputautofocus/>

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

<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. --><divonclick={()=>{}}></div>

Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute

Avoid `<%name%>` elements

<!-- A11y: Avoid <marquee> elements --><marquee></marquee>

`<figcaption>` must be first or last child of `<figure>`

`<figcaption>` must be an immediate child of `<figure>`

<!-- A11y: <figcaption> must be an immediate child of <figure> --><div><figcaption>Image caption</figcaption></div>

`<%name%>` element should not be hidden

<!-- A11y: <h2> element should not be hidden --><h2aria-hidden="true">invisible header</h2>

Screenreaders already announce `<img>` elements as an image

<imgsrc="foo"alt="Foo eating a sandwich."/><!-- aria-hidden, won't be announced by screen reader --><imgsrc="bar"aria-hidden="true"alt="Picture of me taking a photo of an image"/><!-- A11y: Screen readers already announce <img> elements as an image. --><imgsrc="foo"alt="Photo of foo being weird."/><!-- A11y: Screen readers already announce <img> elements as an image. --><imgsrc="bar"alt="Image of me at a bar!"/><!-- A11y: Screen readers already announce <img> elements as an image. --><imgsrc="foo"alt="Picture of baz fixing a bug."/>

The value of '%attribute%' must be a %type%

<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false --><divaria-hidden="yes"></div>

The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty

The value of '%attribute%' must be a string that represents a DOM element ID

The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs

The value of '%attribute%' must be an integer

The value of '%attribute%' must be exactly one of %values%

The value of '%attribute%' must be a space-separated list of one or more of %values%

The value of '%attribute%' must be exactly one of true, false, or mixed

Elements with the '%role%' interactive role must have a tabindex value

<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. --><divrole="button"onkeypress={()=>{}} />

'%href_value%' is not a valid %href_attribute% attribute

<!-- A11y: '' is not a valid href attribute --><ahref="">invalid</a>

A form label must be associated with a control

<labelfor="id">B</label><label>C <inputtype="text"/></label><!-- A11y: A form label must be associated with a control. --><label>A</label>

`<video>` elements must have a `<track kind="captions">`

<video><trackkind="captions"/></video><audiomuted></audio><!-- A11y: Media elements must have a <track kind=\"captions\"> --><video></video><!-- A11y: Media elements must have a <track kind=\"captions\"> --><video><track/></video>

`<%name%>` should not have role attribute

<!-- A11y: <meta> should not have role attribute --><metarole="tooltip"/>

The scope attribute should only be used with `<th>` elements

<!-- A11y: The scope attribute should only be used with <th> elements --><divscope="row"/>

`<%name%>` element should have %article% %sequence% attribute

<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute --><inputtype="image"/><!-- A11y: <html> element should have a lang attribute --><html></html><!-- A11y: <a> element should have an href attribute --><a>text</a>

`<%name%>` element should contain text

<!-- A11y: <a> element should have child content --><ahref="/foo"></a><!-- A11y: <h1> element should have child content --><h1></h1>

'%event%' event must be accompanied by '%accompanied_by%' event

<!-- A11y: onmouseover must be accompanied by onfocus --><divonmouseover={handleMouseover} /><!-- A11y: onmouseout must be accompanied by onblur --><divonmouseout={handleMouseout} />

Abstract role '%role%' is forbidden

`<%element%>` cannot have role '%role%'

<!-- A11y: <textarea> cannot have role 'listitem' --><textarearole="listitem"></textarea>

Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners

<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` --><lionclick={()=>{}}></li><!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` --><divrole="listitem"onclick={()=>{}}></div>

Non-interactive element `<%element%>` cannot have interactive role '%role%'

<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' --><h3role="searchbox">Button</h3>

noninteractive element cannot have nonnegative tabIndex value

<!-- A11y: noninteractive element cannot have nonnegative tabIndex value --><divtabindex="0"></div>

Redundant role '%role%'

<!-- A11y: Redundant role 'button' --><buttonrole="button">...</button><!-- A11y: Redundant role 'img' --><imgrole="img"src="foo.jpg"/>

`<%element%>` with a %handler% handler must have an ARIA role

<!-- A11y: <div> with click handler must have an ARIA role --><divonclick={()=>''}></div>

Avoid tabindex values above zero

<!-- A11y: avoid tabindex values above zero --><divtabindex="1"></div>

Elements with the ARIA role "%role%" must have the following attributes defined: %props%

<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" --><spanrole="checkbox"aria-labelledby="foo"tabindex="0"></span>

The attribute '%attribute%' is not supported by the role '%role%'

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. --><divrole="link"aria-multiline></div><!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. --><liaria-required></li>

The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. --><divrole="link"aria-multiline></div><!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. --><liaria-required></li>

Unknown aria attribute 'aria-%attribute%'

Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?

<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) --><inputtype="image"aria-labeledby="foo"/>

Unknown role '%role%'

Unknown role '%role%'. Did you mean '%suggestion%'?

<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) --><divrole="toooltip"></div>

The "is" attribute is not supported cross-browser and should be avoided

You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?

Attributes should not contain ':' characters to prevent ambiguity with Svelte directives

'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?

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

A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences

The rest operator (...) will create a new object and binding '%name%' with the original object will not work

Empty block

`<%name%>` will be treated as an HTML element unless it begins with a capital letter

Unused CSS selector "%name%"

<divclass="post">{@htmlcontent}</div><style>.post:global {p{...}}</style>

Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.

This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.

<!-- this HTML... --><p><p>hello</p><!-- results in this DOM structure --><p></p><p>hello</p>

Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`

<div><spanclass="icon"/> some text!</div>

<div><spanclass="icon"> some text! </span></div>

npxsvmigrateself-closing-tags

Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead

Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`

`%code%` is no longer valid — please use `%suggestion%` instead

Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.

%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning

`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates

<script>letreactive=$state('reactive');letstale='stale';</script><p>This value updates: {reactive}</p><p>This value does not update: {stale}</p><buttononclick={()=>{stale='updated';reactive='updated';}}>update</button>

The `accessors` 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

The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?

The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them

The `hydratable` option has been removed. Svelte components are always hydratable now

The `loopGuardTimeout` option has been removed

`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively

Avoid 'new class' — instead, declare the class at the top level scope

Avoid declaring classes below the top level scope

Reactive declarations only exist at the top level of the instance script

Reassignments of module-level declarations will not cause reactive statements to update

`context="module"` is deprecated, use the `module` attribute instead

<scriptcontext="module"module>letfoo='bar';</script>

Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it

Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead

This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?

<script>import{ setContext }from'svelte';letcount=$state(0);// warning: state_referenced_locallysetContext('count',count);</script><buttononclick={()=>count++}>increment</button>

<scriptlang="ts">import{ setContext }from'svelte';letcount=$state(0);// warning: state_referenced_locallysetContext('count',count);</script><buttononclick={()=>count++}>increment</button>

<script>import{ getContext }from'svelte';constcount=getContext('count');</script><!-- This will never update --><p>The count is {count}</p>

<scriptlang="ts">import{ getContext }from'svelte';constcount=getContext('count');</script><!-- This will never update --><p>The count is {count}</p>

<script>import{ setContext }from'svelte';letcount=$state(0);setContext('count',()=>count);</script><buttononclick={()=>count++}>increment</button>

<scriptlang="ts">import{ setContext }from'svelte';letcount=$state(0);setContext('count',()=>count);</script><buttononclick={()=>count++}>increment</button>

<script>import{ getContext }from'svelte';constcount=getContext('count');</script><!-- This will update --><p>The count is {count()}</p>

<scriptlang="ts">import{ getContext }from'svelte';constcount=getContext('count');</script><!-- This will update --><p>The count is {count()}</p>

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>` is deprecated in runes mode — components are dynamic by default

{#eachitemsasitem}<svelte:componentthis={item.condition?Y:Z} />{@constComponent=item.condition?Y:Z}<Component/>{/each}

<script>// ...letcondition=$state(false);constComponent=$derived(condition?Y:Z);</script><svelte:componentthis={condition?Y:Z} /><Component/>

`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte

`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead

`%code%` is not a recognised code

`%code%` is not a recognised code (did you mean `%suggestion%`?)