docs(usage): security, boolean/form/SVG, accessibility 🚧

- Add Security, Boolean Attributes, Form Elements, SVG Attributes, Accessibility sections and TOC
- Update Attrs type description for boolean attrs

Author: NeaByteLab

USAGE.md

@@ -11,6 +11,11 @@ API, node shape, layout and style — create schema from definition, render to D
 - [Node Shape](#node-shape)
 - [Layout and Style](#layout-and-style)
 - [Void Tags and Special Elements](#void-tags-and-special-elements)
+- [Security](#security)
+- [Boolean Attributes](#boolean-attributes)
+- [Form Elements](#form-elements)
+- [SVG Attributes](#svg-attributes)
+- [Accessibility](#accessibility)
 - [API Reference](#api-reference)
 - [Type Reference](#type-reference)
 - [Reference](#reference)
@@ -107,6 +112,38 @@ Allowed keys are exactly the above. Extra keys cause validation to throw.
 - **template** — Child nodes are appended to `element.content` (DocumentFragment), not to the template element itself.
 - **svg** — SVG elements are created with `createElementNS(SVG_NS, type)`; descendants stay in SVG namespace when under an `svg` node.
 
+## Security
+
+- **Text content** — `content` is applied via `createTextNode()`, so it is safe from HTML injection. Do not interpret `content` as HTML.
+- **Attributes** — `attrs` values are set with `setAttribute()` or property assignment. Do not pass unsanitized user input into `attrs` (e.g. `href`, `src`) without validation or sanitization. For strict policies, consider [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API) where supported.
+
+## Boolean Attributes
+
+These attributes are treated as boolean (MDN: presence = true, absence = false): `checked`, `disabled`, `readonly`, `selected`, `inert`, `hidden`. Use `true` or `false` (or string `'true'`/`'false'`). When the value is false, the attribute is removed from the DOM and the corresponding property is set to false; when true, only the property is set (no attribute string is written). This avoids invalid markup such as `disabled="false"` (which would still disable the element).
+
+```typescript
+{ type: 'input', attrs: { checked: false } }   // unchecked, no checked attribute
+{ type: 'button', attrs: { disabled: true } }  // disabled
+{ type: 'div', attrs: { hidden: false } }      // visible, no hidden attribute
+```
+
+## Form Elements
+
+- **disabled** — Applied via property on `input`, `button`, `select`, `textarea`, `fieldset`, `optgroup`, and `option`. Boolean handling as above.
+- **readonly** — Applied via `readOnly` property on `input` and `textarea`.
+- **selected** — Applied via `selected` property on `option`.
+- **checked** — Applied via `checked` property on `input` (e.g. checkbox/radio).
+
+## SVG Attributes
+
+Layout and style from the schema are applied only to HTML elements. For SVG nodes (e.g. `circle`, `rect`, `path` under `svg`), set dimensions and appearance via `attrs` (e.g. `attrs.fill`, `attrs.stroke`, `attrs.width`, `attrs.height`, or `attrs.viewBox` on `svg`). Use `attrs.style` for a CSS string if needed.
+
+## Accessibility
+
+- Prefer **semantic HTML** (`type: 'header'`, `main`, `nav`, `button`, etc.) so built-in roles and behavior are available.
+- **ARIA** — Pass ARIA attributes through `attrs` (e.g. `attrs['aria-label']`, `attrs['aria-live']`, `attrs['aria-hidden']`). For dynamic content that updates without a full re-render, consider `aria-live` regions so assistive technologies can announce changes.
+- **inert** and **hidden** — Supported as boolean attributes (see [Boolean Attributes](#boolean-attributes)) for visibility and focus behavior.
+
 ## API Reference
 
 ### create(definition)
@@ -134,7 +171,7 @@ Types are re-exported under the `Types` namespace: `import type * as Types from
 - **Node:** Object with `type` (string) and optional `id`, `layout`, `style`, `attrs`, `content`, `src`, `alt`, `children` (readonly array of Node). Void tags must not have `children`.
 - **Layout:** Optional `width`, `height`, `x`, `y`, `flex`, `gap` — each `number | string`.
 - **Style:** Optional `border`, `borderRadius`, `boxShadow`, `color`, `fill`, `font`, `margin`, `opacity`, `padding`, `stroke`, `transition` — each `string`.
-- **Attrs:** `Record<string, string | number | boolean>` — HTML attributes. Special handling for `class`/`className`, `style` (string), `value`, `checked`, `disabled` on form elements.
+- **Attrs:** `Record<string, string | number | boolean>` — HTML attributes. Special handling for `class`/`className`, `style` (string), `value`, and boolean attributes (`checked`, `disabled`, `readonly`, `selected`, `inert`, `hidden`) on the relevant elements.
 - **Schema2UIDefault:** `{ create, render }` — shape returned when calling the default export. **Schema2UIDefaultExport:** callable with `.create`, `.render`, `.el`; calling it returns `Schema2UIDefault & { el: El }`.
 
 ## Reference