sync again

benmccann · benmccann · commit a306102f6f64 · 2024-10-23T10:53:50.000-07:00
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/10-accessibility.md b/apps/svelte.dev/content/docs/kit/40-best-practices/10-accessibility.md
@@ -29,7 +29,7 @@ This will allow screen readers and other assistive technology to identify the ne
 
 In traditional server-rendered applications, every navigation will reset focus to the top of the page. This ensures that people browsing the web with a keyboard or screen reader will start interacting with the page from the beginning.
 
-To simulate this behavior during client-side routing, SvelteKit focuses the `<body>` element after each navigation and [enhanced form submission](form-actions#progressive-enhancement). There is one exception - if an element with the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute is present, SvelteKit will focus that element instead. Make sure to [consider the implications for assistive technology](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations) when using that attribute.
+To simulate this behavior during client-side routing, SvelteKit focuses the `<body>` element after each navigation and [enhanced form submission](form-actions#Progressive-enhancement). There is one exception - if an element with the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute is present, SvelteKit will focus that element instead. Make sure to [consider the implications for assistive technology](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations) when using that attribute.
 
 If you want to customize SvelteKit's focus management, you can use the `afterNavigate` hook:
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md
@@ -130,6 +130,22 @@ 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 wrapper components
+
+In case you're writing a component that wraps a native element, you may want to expose all the attributes of underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
+
+```svelte
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let { children, ...rest }: HTMLButtonAttributes = $props();
+</script>
+
+<button {...rest}>
+	{@render children()}
+</button>
+```
+
 ## Typing `$state`
 
 You can type `$state` like any other variable.
@@ -159,9 +175,9 @@ class Counter {
 
 ## The `Component` type
 
-Svelte components or of type `Component`. You can use it and its related types to express a variety of constraints.
+Svelte components are of type `Component`. You can use it and its related types to express a variety of constraints.
 
-Using it together with `<svelte:component>` to restrict what kinds of component can be passed to it:
+Using it together with dynamic components to restrict what kinds of component can be passed to it:
 
 ```svelte
 <script lang="ts">
@@ -170,13 +186,13 @@ Using it together with `<svelte:component>` to restrict what kinds of component
 	interface Props {
 		// only components that have at most the "prop"
 		// property required can be passed
-		component: Component<{ prop: string }>;
+		DynamicComponent: Component<{ prop: string }>;
 	}
 
-	let { component }: Props = $props();
+	let { DynamicComponent }: Props = $props();
 </script>
 
-<svelte:component this={component} prop="foo" />
+<DynamicComponent prop="foo" />
 ```
 
 Closely related to the `Component` type is the `ComponentProps` type which extracts the properties a component expects.
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -581,9 +581,11 @@ import type { ComponentProps } from 'svelte';
 import MyComponent from './MyComponent.svelte';
 
 // Errors if these aren't the correct props expected by MyComponent.
-const props: ComponentProps<MyComponent> = { foo: 'bar' };
+const props: ComponentProps<typeof MyComponent> = { foo: 'bar' };
 ```
 
+> [!NOTE] In Svelte 4, you would do `ComponentProps<MyComponent>` because `MyComponent` was a class.
+
 Example: A generic function that accepts some component and infers the type of its props:
 
 ```ts
