Fix trigger selector docs

src/skills/htmx-guidance.md

@@ -56,7 +56,7 @@ Specify what event triggers the request:
 | `capture`           | listen in the capture phase instead of the bubble phase                              |
 | `passive`           | tell the browser the handler will not call `preventDefault()`                         |
 
-A selector with whitespace needs parentheses: `from:(form input)`.
+A `from` or `target` selector with whitespace or commas needs single quotes, double quotes, or `<.../>`: `from:'form input'`, `from:"form input"`, or `from:<form input/>`.
 
 **Filters** (JavaScript expressions in brackets):
 

www/src/content/docs.md

@@ -280,7 +280,13 @@ Other modifiers you can use for triggers are:
 | `capture`                  | listen during the capture phase, from the top down, rather than the bubble phase                                                                                                                                            |
 | `passive`                  | tell the browser that the handler will not call `preventDefault()`, so the browser can scroll without waiting for your code                                                                                                 |
 
-Note that a selector with whitespace in `from` or `target` needs parentheses, for example `from:(form input)`.
+Wrap a [`from`](/reference/attributes/hx-trigger#fromselector) or [`target`](/reference/attributes/hx-trigger#targetselector) selector that contains whitespace or commas in single quotes, double quotes, or `<.../>`:
+
+```html
+<div hx-trigger="submit from:'closest form'">
+<div hx-trigger='submit from:"closest form"'>
+<div hx-trigger="submit from:<closest form/>">
+```
 
 Multiple triggers can be specified by separating the triggers with a comma.
 

www/src/content/docs/hcon-guide.md

@@ -105,11 +105,12 @@ Wrap values in quotes when they contain commas, spaces, or HCON delimiters.
 <button hx-vals='message:"hello world"'>
 ```
 
-Use whichever quote style the HTML attribute is not using:
+For selector values, use single quotes, double quotes, or the `<.../>` form. Choose a form that does not conflict with the HTML attribute quotes:
 
 ```html
 <input hx-trigger="keyup from:'.a, .b'">
 <input hx-trigger='keyup from:".a, .b"'>
+<input hx-trigger="keyup from:<.a, .b/>">
 ```
 
 ---
@@ -210,7 +211,7 @@ This works for any attribute that accepts HCON/JSON, including `hx-vals` and `hx
 - **Quote values for grouping, not type control.** Quotes preserve spaces, commas, and delimiters. Quoted numeric and boolean values still parse as numbers and booleans.
 - **Write durations naturally.** `200ms`, `2s`, and `1m` stay strings in HCON; htmx converts them where durations are expected.
 - **Quote dotted keys to keep them literal.** `"a.b":1` produces `{"a.b": 1}`. Bare `a.b:1` produces `{a: {b: 1}}`.
-- **Quote spaces and commas.** HCON-aware comma splitting preserves commas inside `[...]`, `(...)`, `<.../>`, and quotes.
+- **Group spaces and commas.** Use single quotes, double quotes, or `<.../>`.
 - **Use JSON for arrays.** HCON has no array literal syntax, so use JSON fallback, such as `{"items":[1,2,3]}`.
 - **Use dot-notation for nested objects.** `a.b.c:value` works; `a:{b:{c:value}}` does not.
 - **Use `js:` for expressions.** HCON values are literals, so write `hx-vals="js:{token: getToken()}"` for dynamic values.

www/src/content/reference/01-attributes/07-hx-trigger.md

@@ -44,7 +44,7 @@ Defaults to:
 
 Custom events work too. Dispatch them from JavaScript with [`htmx.trigger()`](/reference/methods/htmx-trigger), or from the server via the [`HX-Trigger`](/reference/headers/HX-Trigger) response header.
 
-Events from `HX-Trigger` are dispatched on the `body`, so use [`from:body`](#from) to listen for them:
+Events from `HX-Trigger` are dispatched on the `body`, so use [`from:body`](#fromselector) to listen for them:
 
 ```html
 <div hx-trigger="productsUpdated from:body" hx-get="...">...</div>
@@ -163,11 +163,19 @@ Listens on a different element. Takes a CSS selector or an [extended selector](/
 ```html
 <div hx-trigger="keyup[key=='Enter'] from:body" hx-get="...">...</div>
 <div hx-trigger="my-event from:document" hx-get="...">...</div>
-<div hx-trigger="submit from:closest form" hx-get="...">...</div>
+<div hx-trigger="submit from:<closest form/>" hx-get="...">...</div>
 <div hx-trigger="click from:self" hx-get="...">...</div>
 <div hx-trigger="click from:outside" hx-get="...">...</div>
 ```
 
+Wrap [`from`](#fromselector) or [`target`](#targetselector) selectors that contain whitespace or commas in single quotes, double quotes, or `<.../>`:
+
+```html
+<div hx-trigger="submit from:'closest form'" hx-get="...">...</div>
+<div hx-trigger='submit from:"closest form"' hx-get="...">...</div>
+<div hx-trigger="submit from:<closest form/>" hx-get="...">...</div>
+```
+
 ### `target:<selector>`
 
 Only fires if `event.target` matches the given CSS selector.
@@ -229,7 +237,6 @@ A search box that searches on `input`, but only if the value has [`changed`](#ch
 
 ## Notes
 
-* Selectors with whitespace in [`from`](#from) or [`target`](#target) need parentheses: `from:(form input)`.
 * `hx-trigger="change, reset"` may fire before the browser resets the form. As a workaround, add a short delay: `hx-trigger="change, reset delay:0.01s"`.
 
 ## See Also