update docs for accuracy

Author: LadyBluenotes

src/routes/reference/jsx-attributes/on.mdx

@@ -24,7 +24,7 @@ description: >-
 
 ## Value
 
-- **Type:** event handler function or `EventListenerObject & AddEventListenerOptions`
+- **Type:** event handler function or object with `handleEvent` and optional `AddEventListenerOptions`
 
 Listener passed to `addEventListener`.
 
@@ -33,6 +33,7 @@ Listener passed to `addEventListener`.
 - `on:name={handler}` attaches a listener for the event named `name`.
 - The listener is attached directly to the element instead of using Solid's delegated event system.
 - Event names keep the text after `on:` exactly as written.
+- Use `on:*` when you need exact event casing, such as case-sensitive custom events.
 - When the value changes, Solid removes the previous direct listener and adds the new one.
 - Listener options such as `once`, `passive`, `capture`, and `signal` can be provided by passing an object that implements `handleEvent`.
 - `oncapture:*` remains available as a deprecated capture-specific form.
@@ -42,26 +43,43 @@ Listener passed to `addEventListener`.
 ### Basic usage
 
 ```tsx
-<div on:DOMContentLoaded={(e) => console.log("Welcome!", e)} />
+const [message, setMessage] = createSignal("Waiting");
+let el;
+
+<>
+	<button
+		onClick={() =>
+			el.dispatchEvent(new CustomEvent("MyEvent", { detail: "Hello" }))
+		}
+	>
+		Dispatch event
+	</button>
+
+	<div on:MyEvent={(e) => setMessage(e.detail)} ref={el} />
+	<p>{message()}</p>
+</>;
 ```
 
 ### Listener options
 
 ```tsx
+const [count, setCount] = createSignal(0);
+
 const handler = {
-	handleEvent(e) {
-		console.log(e);
+	handleEvent() {
+		setCount((count) => count + 1);
 	},
 	once: true,
-	passive: false,
-	capture: true,
 };
 
-<div on:wheel={handler} />;
+<>
+	<button on:click={handler}>Click me</button>
+	<p>Clicked {count()} time(s)</p>
+</>;
 ```
 
 :::note
-The object-listener form was added in Solid 1.9.0.
+The object-listener form was added in Solid 1.9.0. It is useful when you need options such as `once`, `passive`, `capture`, or `signal`.
 :::
 
 ## Related

src/routes/reference/jsx-attributes/style.mdx

@@ -24,15 +24,16 @@ description: >-
 
 ## Value
 
-- **Type:** `string | Record<string, string | undefined | null>`
+- **Type:** `string | CSSProperties`
 
 CSS string or style object.
 
 ## Behavior
 
 - String values are written as inline CSS text.
-- Object values are applied property by property with `element.style.setProperty`, so keys should use lower-case, dash-separated CSS property names. CSS custom properties can use keys such as `--my-color`.
+- Object values are applied property by property with `element.style.setProperty`, so keys should use lower-case, dash-separated CSS property names instead of camelCase. CSS custom properties can use keys such as `--my-color`.
 - Nullish values in a style object remove that property, and falsy overall `style` values remove the `style` attribute.
+- In SSR output, object values are serialized into the emitted `style` attribute.
 
 ## Examples
 

src/routes/reference/jsx-attributes/use.mdx

@@ -25,20 +25,20 @@ description: >-
 ```ts
 type Accessor<T> = () => T;
 
-function directive(element: Element, accessor: Accessor<any>): void;
+function directive(element: Element, accessor?: Accessor<any>): void;
 ```
 
 ## Value
 
 - **Type:** directive argument
 
-Value exposed to the directive through an accessor.
-When no explicit value is passed, the accessor returns `true`.
+The directive reads the value through an accessor. Without an explicit value, the accessor returns `true`.
 
 ## Behavior
 
-- The compiler lowers `use:name={value}` to a directive helper call with the element and an accessor for `value`. Without an explicit value, the accessor returns `true`.
-- The directive runs during rendering before the element is connected to the DOM.
+- `use:name={value}` passes the element and an accessor for `value` to the directive.
+- Without an explicit value, the accessor returns `true`.
+- The directive runs during rendering in the current owner, before the element is connected to the DOM, so it can create effects and register cleanup.
 - `use:*` works only on native elements, including custom elements, and is not forwarded through user-defined components.
 
 ## Examples
@@ -48,8 +48,11 @@ When no explicit value is passed, the accessor returns `true`.
 ```tsx
 function model(element, value) {
 	const [field, setField] = value();
+	const onInput = ({ currentTarget }) => setField(currentTarget.value);
+
 	createRenderEffect(() => (element.value = field()));
-	element.addEventListener("input", ({ target }) => setField(target.value));
+	element.addEventListener("input", onInput);
+	onCleanup(() => element.removeEventListener("input", onInput));
 }
 
 const [name, setName] = createSignal("");