From 63071ecba41805cbd4021d4ab14f3a74b4db8443 Mon Sep 17 00:00:00 2001
From: Juan-Pablo Scaletti <juanpablo@jpscaletti.com>
Date: Fri, 19 Jul 2024 13:10:14 -0500
Subject: [PATCH] Update Docs (#82)

Update docs
---
 docs/components/Copyright.jinja               |   3 +-
 docs/components/Home.jinja                    |  12 +-
 docs/components/NavExtra.jinja                |   4 +-
 docs/components/ui/Accordion/DemoResult.jinja |   3 +-
 docs/components/ui/Dialog/DemoPreview.jinja   |   4 -
 .../components/ui/LinkedList/DemoResult.jinja |   3 +-
 docs/components/ui/Menu/DemoResult.jinja      |   3 +-
 docs/components/ui/Popover/DemoResult.jinja   |   3 +-
 docs/components/ui/Tabs/DemoResult.jinja      |   3 +-
 docs/components/ui/Tabs/ManualResult.jinja    |   3 +-
 docs/components/ui/Tabs/SelectResult.jinja    |   3 +-
 docs/components/ui/Tabs/VerticalResult.jinja  |   3 +-
 docs/content/api.md                           |  27 +
 docs/content/guide/components.md              | 338 +++++++++++-
 docs/content/guide/css_and_js.md              |  45 +-
 docs/content/guide/extra.md                   | 170 ------
 docs/content/guide/index.md                   | 130 +++--
 docs/content/guide/integrations.md            |   3 +
 docs/content/guide/motivation.md              | 115 +++++
 docs/content/guide/performance.md             |   3 +
 docs/content/ui/index.md                      |   2 +-
 docs/content/ui/menu.md                       |   6 +-
 docs/content/ui/popover.md                    |   4 +-
 docs/content/ui/reldate.md                    |  28 +-
 docs/content/ui/tabs.md                       |  20 +-
 docs/deploy.sh                                |   1 +
 docs/docs.py                                  |  16 +-
 docs/static/docs.css                          |   7 +
 docs/static/prose.css                         | 117 +++--
 docs/static/theme.css                         | 487 +++++++++++++-----
 docs/theme/Autodoc.jinja                      | 127 +++++
 docs/theme/Callout.jinja                      |   4 +-
 docs/theme/ExampleTabs.jinja                  |   4 +-
 docs/theme/Footer.jinja                       |   2 +-
 docs/theme/Header.jinja                       |  15 +-
 docs/theme/Key.jinja                          |   1 -
 docs/theme/Layout.jinja                       |  18 +-
 docs/theme/LinkButton.jinja                   |   1 -
 docs/theme/MetaTags.jinja                     |   8 +-
 docs/theme/NavBar.jinja                       |   2 +-
 docs/theme/NavGlobal.jinja                    |   4 +-
 docs/theme/NavLocal.jinja                     |   6 +-
 docs/theme/NavMobile.jinja                    |  12 +-
 docs/theme/NavTop.jinja                       |  14 +-
 docs/theme/Page.jinja                         |  14 +-
 docs/theme/PageSingle.jinja                   |   6 +-
 docs/theme/PrevNext.jinja                     |   2 +-
 docs/theme/Source.jinja                       |  24 +
 docs/theme/Source.js                          | 123 +++++
 docs/theme/Test.jinja                         |   2 +-
 docs/theme/ThemeSwitch.jinja                  |   3 +-
 docs/theme/ThemeSwitch.js                     |   2 +-
 docs/theme/Toc.jinja                          |   2 +-
 docs/theme/TocPage.jinja                      |   6 +-
 docs/theme/TocPage.js                         |  16 +-
 docs/theme/svg/github.svg                     |   1 -
 src/jinjax/__init__.py                        |   2 +-
 src/jinjax/catalog.py                         | 179 ++++++-
 src/jinjax/component.py                       |   2 +
 src/jinjax/exceptions.py                      |  19 +-
 src/jinjax/html_attrs.py                      | 218 +++++++-
 61 files changed, 1802 insertions(+), 603 deletions(-)
 create mode 100644 docs/content/api.md
 delete mode 100644 docs/content/guide/extra.md
 create mode 100644 docs/content/guide/integrations.md
 create mode 100644 docs/content/guide/motivation.md
 create mode 100644 docs/content/guide/performance.md
 create mode 100644 docs/theme/Autodoc.jinja
 delete mode 100644 docs/theme/Key.jinja
 delete mode 100644 docs/theme/LinkButton.jinja
 create mode 100644 docs/theme/Source.jinja
 create mode 100644 docs/theme/Source.js
 delete mode 100644 docs/theme/svg/github.svg

diff --git a/docs/components/Copyright.jinja b/docs/components/Copyright.jinja
index 9ecbb19..99cc4e3 100644
--- a/docs/components/Copyright.jinja
+++ b/docs/components/Copyright.jinja
@@ -1,3 +1,4 @@
 <div {{ attrs.render(class="copy") }}>
-  &copy; <a href="https://jpscaletti.com">Juan-Pablo Scaletti</a>
+  Website content copyright &copy; <a href="https://jpscaletti.com">Juan-Pablo Scaletti</a>.
+  JinjaX and its documentation are licensed under the MIT license.
 </div>
\ No newline at end of file
diff --git a/docs/components/Home.jinja b/docs/components/Home.jinja
index 9abb19a..2d067cb 100644
--- a/docs/components/Home.jinja
+++ b/docs/components/Home.jinja
@@ -69,11 +69,11 @@
     <h2>
       Better than <code>include</code> and&nbsp;<code>macros</code>
     </h2>
-    <div class="cards">
+    <div class="cd-cards">
       <article class="card">
         <div class="header">
-          <img src="/static/img/encapsulated.svg" width="32" height="32">
           <h3>Encapsulated</h3>
+          <img src="/static/img/encapsulated.svg" width="32" height="32">
         </div>
         <div class="body prose prose-zinc">
           <div>
@@ -85,8 +85,8 @@
 
       <article class="card">
         <div class="header">
-          <img src="/static/img/simple.svg" width="32" height="32">
           <h3>Simple</h3>
+          <img src="/static/img/simple.svg" width="32" height="32">
         </div>
         <div class="body prose prose-zinc">
           <div>
@@ -98,8 +98,8 @@
 
       <article class="card">
         <div class="header">
-          <img src="/static/img/modern.svg" width="32" height="32">
           <h3>Modern</h3>
+          <img src="/static/img/modern.svg" width="32" height="32">
         </div>
         <div class="body prose prose-zinc">
           <div>
@@ -113,8 +113,8 @@
 
       <article class="card">
         <div class="header">
-          <img src="/static/img/composable.svg" width="32" height="32">
           <h3>Composable</h3>
+          <img src="/static/img/composable.svg" width="32" height="32">
         </div>
         <div class="body prose prose-zinc">
           <div>
@@ -144,7 +144,7 @@
     </div>
   </section>
 
-  <section class="engage">
+  <section class="engage" data-md-skip>
     <div class="wrapper">
       <h3>Ready to get going? Engage!</h3>
       <a href="./guide/">Get started <i>&rarr;</i></a>
diff --git a/docs/components/NavExtra.jinja b/docs/components/NavExtra.jinja
index dcd113f..e6bb984 100644
--- a/docs/components/NavExtra.jinja
+++ b/docs/components/NavExtra.jinja
@@ -1,3 +1 @@
-<a title="Source code" href="https://github.com/jpsca/jinjax">
-  {% include "svg/github.svg" %}
-</a>
\ No newline at end of file
+<Source title="Go to repo" url="https://github.com/jpsca/jinjax" />
\ No newline at end of file
diff --git a/docs/components/ui/Accordion/DemoResult.jinja b/docs/components/ui/Accordion/DemoResult.jinja
index 9ab8b9e..8666e2d 100644
--- a/docs/components/ui/Accordion/DemoResult.jinja
+++ b/docs/components/ui/Accordion/DemoResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(252,211,77, 0.9), rgba(251,146,60, 0.9))"
+  data-md-skip
 ></div>
 
-<Accordion id="accordion-demo">
+<Accordion id="accordion-demo" data-md-skip>
   <details>
     <summary>Is it accessible?</summary>
     <div class="panel">
diff --git a/docs/components/ui/Dialog/DemoPreview.jinja b/docs/components/ui/Dialog/DemoPreview.jinja
index b994685..e69de29 100644
--- a/docs/components/ui/Dialog/DemoPreview.jinja
+++ b/docs/components/ui/Dialog/DemoPreview.jinja
@@ -1,4 +0,0 @@
-<div class="h-96 w-full max-w-xl px-2 py-16 sm:mr-10">
-  <div class="relative w-fit mx-auto">
-  </div>
-</div>
diff --git a/docs/components/ui/LinkedList/DemoResult.jinja b/docs/components/ui/LinkedList/DemoResult.jinja
index c689671..e3d9631 100644
--- a/docs/components/ui/LinkedList/DemoResult.jinja
+++ b/docs/components/ui/LinkedList/DemoResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(132,204,22,0.7), rgba(22,163,74,0.7))"
+  data-md-skip
 ></div>
 
-<div id="linkedlist-demo">
+<div id="linkedlist-demo" data-md-skip>
   <div>
     <label>Known Mutants</label>
     <LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2">
diff --git a/docs/components/ui/Menu/DemoResult.jinja b/docs/components/ui/Menu/DemoResult.jinja
index bf2165b..b62226c 100644
--- a/docs/components/ui/Menu/DemoResult.jinja
+++ b/docs/components/ui/Menu/DemoResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(244,114,182, 0.9), rgba(219,39,119, 0.9))"
+  data-md-skip
 ></div>
 
-<div id="menu-demo">
+<div id="menu-demo" data-md-skip>
   <MenuButton id="menu-demo-btn" target="menu-demo-menu">
     Menu <i class="icon">keyboard_arrow_down</i>
   </MenuButton>
diff --git a/docs/components/ui/Popover/DemoResult.jinja b/docs/components/ui/Popover/DemoResult.jinja
index d878f2b..0bf47cb 100644
--- a/docs/components/ui/Popover/DemoResult.jinja
+++ b/docs/components/ui/Popover/DemoResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(217,70,239, 0.9), rgba(147,51,234, 0.9))"
+  data-md-skip
 ></div>
 
-<div id="pop-demo">
+<div id="pop-demo" data-md-skip>
   <PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>
 
   <Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
diff --git a/docs/components/ui/Tabs/DemoResult.jinja b/docs/components/ui/Tabs/DemoResult.jinja
index 0b0f54f..3306eac 100644
--- a/docs/components/ui/Tabs/DemoResult.jinja
+++ b/docs/components/ui/Tabs/DemoResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(56,189,248, 0.9), rgba(37,99,235, 0.9))"
+  data-md-skip
 ></div>
 
-<div class="horizontal-tabs">
+<div class="horizontal-tabs" data-md-skip>
   <TabGroup>
     <TabList>
       <Tab target="demo-recent" selected>Recent</Tab>
diff --git a/docs/components/ui/Tabs/ManualResult.jinja b/docs/components/ui/Tabs/ManualResult.jinja
index c916b5c..2a067bd 100644
--- a/docs/components/ui/Tabs/ManualResult.jinja
+++ b/docs/components/ui/Tabs/ManualResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
+  data-md-skip
 ></div>
 
-<div class="horizontal-tabs">
+<div class="horizontal-tabs" data-md-skip>
   <TabGroup>
     <TabList manual>
       <Tab target="manual-recent" selected>Recent</Tab>
diff --git a/docs/components/ui/Tabs/SelectResult.jinja b/docs/components/ui/Tabs/SelectResult.jinja
index 81dd33b..ffdf0ea 100644
--- a/docs/components/ui/Tabs/SelectResult.jinja
+++ b/docs/components/ui/Tabs/SelectResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
+  data-md-skip
 ></div>
 
-<div class="horizontal-tabs">
+<div class="horizontal-tabs" data-md-skip>
   <TabGroup>
     <TabSelect>
       <TabOption target="select-recent">Recent</TabOption>
diff --git a/docs/components/ui/Tabs/VerticalResult.jinja b/docs/components/ui/Tabs/VerticalResult.jinja
index af2b703..b83204a 100644
--- a/docs/components/ui/Tabs/VerticalResult.jinja
+++ b/docs/components/ui/Tabs/VerticalResult.jinja
@@ -2,9 +2,10 @@
 
 <div class="bg-cover"
   style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
+  data-md-skip
 ></div>
 
-<div class="vertical-tabs">
+<div class="vertical-tabs" data-md-skip>
   <TabGroup>
     <TabList vertical>
       <Tab target="vertical-recent" selected>Recent</Tab>
diff --git a/docs/content/api.md b/docs/content/api.md
new file mode 100644
index 0000000..b2eaf50
--- /dev/null
+++ b/docs/content/api.md
@@ -0,0 +1,27 @@
+---
+title: "API reference"
+---
+
+<Header title="API reference" section={{ None }}>
+</Header>
+
+<Autodoc name="jinjax.Catalog" />
+
+----
+
+<Autodoc name="jinjax.LazyString" members={{ False }} />
+
+<Autodoc name="jinjax.HTMLAttrs" />
+
+----
+
+## Exceptions
+
+<Autodoc name="jinjax.ComponentNotFound" level={{ 3 }} members={{ False }} />
+
+<Autodoc name="jinjax.MissingRequiredArgument" level={{ 3 }} members={{ False }} />
+
+<Autodoc name="jinjax.DuplicateDefDeclaration" level={{ 3 }} members={{ False }} />
+
+<Autodoc name="jinjax.InvalidArgument" level={{ 3 }} members={{ False }} />
+
diff --git a/docs/content/guide/components.md b/docs/content/guide/components.md
index f67d1ce..c4a1b29 100644
--- a/docs/content/guide/components.md
+++ b/docs/content/guide/components.md
@@ -1,24 +1,86 @@
 ---
 title: Components
-description: The components are `.jinja` files with snippets of template code. They look like a fragment of a regular Jinja template – and they could be – except for the optional special comments at the beginning of the file.
+description: All about declaring and using components.
 ---
 
 <Header title="Components">
-The components are `.jinja` files with snippets of template code.
-They look like a fragment of a regular Jinja template – and they could be – except for the optional special comments at the beginning of the file.
 </Header>
+## Declaring and Using Components
 
-<a href="" target="_blank">
-  <img src="/static/img/anatomy-en.png" style="margin:0 auto;width:100%;max-width:40rem;">
-</a>
+The components are simple text files that look like regular Jinja templates, with three requirements:
+
+**First**, components must be placed inside a folder registered in the catalog or a subfolder of it.
+
+```python
+catalog.add_folder("myapp/components")
+```
+
+You can call that folder whatever you want, not just "components". You can also add more than one folder:
+
+```python
+catalog.add_folder("myapp/layouts")
+catalog.add_folder("myapp/components")
+```
+
+If you end up having more than one component with the same name, the one in the first folder will take priority.
+
+**Second**, they must have a ".jinja" extension. This also helps code editors automatically select the correct language syntax to highlight. However, you can configure it in the catalog.
+
+**Third**, the component name must start with an uppercase letter. Why? This is how JinjaX differentiates a component from a regular HTML tag when using it. I recommend using PascalCase names, like Python classes.
+
+The name of the file (minus the extension) is also how you call the component. For example, if the file is "components/PersonForm.jinja":
+
+```
+└ myapp/
+  ├── app.py
+  ├── components/
+        └─ PersonForm.jinja
+```
+
+The name of the component is "PersonForm" and can be called like this:
+
+From Python code or a non-component template:
+
+- `catalog.render("PersonForm")`
+
+From another component:
+
+- `<PersonForm> some content </PersonForm>`, or
+- `<PersonForm />`
+
+If the component is in a subfolder, the name of that folder becomes part of its name too:
+
+```
+└ myapp/
+  ├── app.py
+  ├── components/
+        └─ person
+            └─ PersonForm.jinja
+```
+
+A "components/person/PersonForm.jinja" component is named "person.PersonForm", meaning the name of the subfolder and the name of the file separated by a dot. This is the full name you use to call it:
+
+From Python code or a non-component template:
+
+- `catalog.render("person.PersonForm")`
+
+From another component:
+
+- `<person.PersonForm> some content </person.PersonForm>`, or
+- `<person.PersonForm />`
+
+Notice how the folder name doesn't need to start with an uppercase if you don't want it to.
 
+<a href="/static/img/anatomy-en.png" target="_blank">
+  <img src="/static/img/anatomy-en.png" style="margin:0 auto;width:90%;max-width:35rem;">
+</a>
 
-## Component Arguments
+## Taking Arguments
 
-More often than not, a component takes one or more arguments to render. Every argument must be declared at the beginning of the component with `{#def arguments #}`. The syntax is very similar to how you declare the arguments of a python function:
+More often than not, a component takes one or more arguments to render. Every argument must be declared at the beginning of the component with `{#def arg1, arg2, ... #}`.
 
-```html+jinja title="components/Form.jinja"
-{#def action, method='post', multipart=False #}
+```html+jinja
+{#def action, method="post", multipart=False #}
 
 <form method="{{ method }}" action="{{ action }}"
   {%- if multipart %} enctype="multipart/form-data"{% endif %}
@@ -27,22 +89,85 @@ More often than not, a component takes one or more arguments to render. Every ar
 </form>
 ```
 
-In this example, the component takes three arguments: "action", "method", and "multipart". The last two have a default value, so they are optional, but the first one doesn't. That means it must be passed a value when rendering the component.
+In this example, the component takes three arguments: "action", "method", and "multipart". The last two have default values, so they are optional, but the first one doesn't. That means it must be passed a value when rendering the component.
+
+The syntax is exactly like how you declare the arguments of a Python function (in fact, it's parsed by the same code), so it can even include type comments, although they are not used by JinjaX (yet!).
+
+```python
+{#def
+  data: dict[str, str],
+  method: str = "post",
+  multipart: bool = False
+#}
+...
+```
+
+## Passing Arguments
+
+There are two types of arguments: strings and expressions.
 
-So all of these are valid forms to use this component:
+### String
+
+Strings are passed like regular HTML attributes:
 
 ```html+jinja
-<Form action="/new"> ... </Form>
 <Form action="/new" method="PATCH"> ... </Form>
-<Form :multipart="False" action="/new"> ... </Form>
+
+<Alert message="Profile updated" />
+
+<Card title="Hello world" type="big"> ... </Card>
 ```
 
-The values of the declared arguments can be used in the template as values with the same name.
+### Expressions
+
+There are two different but equivalent ways to pass non-string arguments:
 
+"Jinja-like", where you use double curly braces instead of quotes:
 
-### Components with content
+```html+jinja title="Jinja-like"
+<Example
+    columns={{ 2 }}
+    tabbed={{ False }}
+    panels={{ {'one': 'lorem', 'two': 'ipsum'} }}
+    class={{ 'bg-' + color }}
+/>
+```
 
-There is actually always an extra implicit argument: the content inside the component. This could be anything: text, HTML, and/or other components; but the component recieves it already rendered to a string.
+... and "Vue-like", where you keep using quotes, but prefix the name of the attribute with a colon:
+
+```html+jinja title="Vue-like"
+<Example
+    :columns="2"
+    :tabbed="False"
+    :panels="{'one': 'lorem', 'two': 'ipsum'}"
+    :class="'bg-' + color"
+/>
+```
+
+<Callout type="note">
+  For `True` values, you can just use the name, like in HTML:
+  <br>
+  ```html+jinja
+  <Example class="green" hidden />
+  ```
+</Callout>
+
+<Callout type="note">
+  You can also use dashes when passing an argument, but they will be translated to underscores:
+  <br>
+  ```html+jinja
+  <Example aria-label="Hi" />
+  ```
+  <br>
+  ```html+jinja title="Example.jinja"
+  {#def aria_label = "" #}
+  ...
+  ```
+</Callout>
+
+## With Content
+
+There is always an extra implicit argument: **the content** inside the component. This could be anything: text, HTML, and/or other components; but when the component receives it, it is already rendered to a string.
 
 ```html+jinja
 {# Component with content #}
@@ -62,7 +187,7 @@ A great use case of the `content` is to make layout components:
   }"
 />
 
-Everything between the open and close tags of the components will be rendered and passed to the `Layout` component as a implicit, `content` variable.
+Everything between the open and close tags of the components will be rendered and passed to the `Layout` component as an implicit `content` variable.
 
 To test a component in isolation, you can also manually send a content argument using the special `__content` argument:
 
@@ -70,6 +195,179 @@ To test a component in isolation, you can also manually send a content argument
 catalog.render("PageLayout", title="Hello world", __content="TEST")
 ```
 
-### Extra arguments
+## Extra Arguments
+
+If you pass arguments not declared in a component, those are not discarded but rather collected in an `attrs` object.
+
+You then call `attrs.render()` to render the received arguments as HTML attributes.
+
+For example, this component:
+
+```html+jinja title="Card.jinja"
+{#def title #}
+<div {{ attrs.render() }}>
+  <h1>{{ title }}</h1>
+  {{ content }}
+</div>
+```
+
+Called as:
+
+```html
+<Card title="Products" class="mb-10" open>bla</Card>
+```
+
+Will be rendered as:
+
+```html
+<div class="mb-10" open>
+  <h1>Products</h1>
+  bla
+</div>
+```
+
+You can add or remove arguments before rendering them using the other methods of the `attrs` object. For example:
+
+```html+jinja
+{#def title #}
+{% do attrs.set(id="mycard") -%}
+
+<div {{ attrs.render() }}>
+  <h1>{{ title }}</h1>
+  {{ content }}
+</div>
+```
+
+Or directly in the `attrs.render()` call:
+
+```html+jinja
+{#def title #}
+
+<div {{ attrs.render(id="mycard") }}>
+  <h1>{{ title }}</h1>
+  {{ content }}
+</div>
+```
+
+<Callout type="info">
+The string values passed into components as attrs are not cast to `str` until the string representation is **actually** needed, for example when `attrs.render()` is invoked.
+</Callout>
+
+### `attrs` Methods
+
+#### `.render(name=value, ...)`
+
+Renders the attributes and properties as a string.
+
+Any arguments you use with this function are merged with the existing
+attibutes/properties by the same rules as the `HTMLAttrs.set()` function:
+
+- Pass a name and a value to set an attribute (e.g. `type="text"`)
+- Use `True` as a value to set a property (e.g. `disabled`)
+- Use `False` to remove an attribute or property
+- The existing attribute/property is overwritten **except** if it is `class`.
+  The new classes are appended to the old ones instead of replacing them.
+- The underscores in the names will be translated automatically to dashes,
+  so `aria_selected` becomes the attribute `aria-selected`.
+
+To provide consistent output, the attributes and properties
+are sorted by name and rendered like this:
+`<sorted attributes> + <sorted properties>`.
+
+```html+jinja
+<Example class="ipsum" width="42" data-good />
+```
+```html+jinja
+<div {{ attrs.render() }}>
+<!-- <div class="ipsum" width="42" data-good> -->
+
+<div {{ attrs.render(class="abc", data_good=False, tabindex=0) }}>
+<!-- <div class="abc ipsum" width="42" tabindex="0"> -->
+```
+
+<Callout type="warning">
+Using `<Component {{ attrs.render() }}>` to pass the extra arguments to other components **WILL NOT WORK**. That is because the components are translated to macros before the page render.
+
+You must pass them as the special argument `__attrs`.
+
+```html+jinja
+{#--- WRONG 😵 ---#}
+<MyButton {{ attrs.render() }} />
+
+{#--- GOOD 👍 ---#}
+<MyButton __attrs={{ attrs }} />
+<MyButton :__attrs="attrs" />
+```
+</Callout>
+
+#### `.set(name=value, ...)`
+
+Sets an attribute or property
+
+- Pass a name and a value to set an attribute (e.g. `type="text"`)
+- Use `True` as a value to set a property (e.g. `disabled`)
+- Use `False` to remove an attribute or property
+- If the attribute is "class", the new classes are appended to
+  the old ones (if not repeated) instead of replacing them.
+- The underscores in the names will be translated automatically to dashes,
+  so `aria_selected` becomes the attribute `aria-selected`.
+
+```html+jinja title="Adding attributes/properties"
+{% do attrs.set(
+  id="loremipsum",
+  disabled=True,
+  data_test="foobar",
+  class="m-2 p-4",
+) %}
+```
+
+```html+jinja title="Removing attributes/properties"
+{% do attrs.set(
+  title=False,
+  disabled=False,
+  data_test=False,
+  class=False,
+) %}
+```
+
+#### `.setdefault(name=value, ...)`
+
+Adds an attribute, but only if it's not already present.
+
+The underscores in the names will be translated automatically to dashes, so `aria_selected`
+becomes the attribute `aria-selected`.
+
+```html+jinja
+{% do attrs.setdefault(
+    aria_label="Products"
+) %}
+```
+
+#### `.add_class(name1, name2, ...)`
+
+Adds one or more classes to the list of classes, if not already present.
+
+```html+jinja
+{% do attrs.add_class("hidden") %}
+{% do attrs.add_class("active", "animated") %}
+```
+
+#### `.remove_class(name1, name2, ...)`
+
+Removes one or more classes from the list of classes.
+
+```html+jinja
+{% do attrs.remove_class("hidden") %}
+{% do attrs.remove_class("active", "animated") %}
+```
+
+#### `.get(name, default=None)`
+
+Returns the value of the attribute or property,
+or the default value if it doesn't exist.
+
+```html+jinja
+{%- set role = attrs.get("role", "tab") %}
+```
 
-If you pass arguments not declared in a component, those are not discarded, but rather collected in a `attrs` object. Read more about it in the next section.
+...
\ No newline at end of file
diff --git a/docs/content/guide/css_and_js.md b/docs/content/guide/css_and_js.md
index fd83ef3..8e296e2 100644
--- a/docs/content/guide/css_and_js.md
+++ b/docs/content/guide/css_and_js.md
@@ -6,23 +6,19 @@ description: Your components might need custom styles or custom JavaScript for m
 <Header title="Adding CSS and JS">
 Your components might need custom styles or custom JavaScript for many reasons.
 </Header>
-
-Instead of using global stylesheet or script files, writing assets for each individual
-component has several advantages:
+Instead of using global stylesheet or script files, writing assets for each individual component has several advantages:
 
 - **Portability**: You can copy a component from one project to another, knowing it will keep working as expected.
-- **Performance**: Only load the CSS and JS that you need on each page. Also, the browser will already have cached the assets of the components for other pages that use them.
+- **Performance**: Only load the CSS and JS that you need on each page. Additionally, the browser will have already cached the assets of the components for other pages that use them.
 - **Simple testing**: You can test the JS of a component independently from others.
 
-
 ## Auto-loading assets
 
-JinjaX searches for `.css` and `.js` files with the same name as your component in the same folder and automatically adds them to the list of assets that will be included in the page. For example, if your component is `components/common/Form.jinja`, both `components/common/Form.css` and `components/common/Form.js` will be added to the list, but only if those files exist.
-
+JinjaX searches for `.css` and `.js` files with the same name as your component in the same folder and automatically adds them to the list of assets included on the page. For example, if your component is `components/common/Form.jinja`, both `components/common/Form.css` and `components/common/Form.js` will be added to the list, but only if those files exist.
 
 ## Manually declaring assets
 
-In addition to auto-loading assets, the CSS and/or the JS of a component can be declared in the metadata header with `{#css ... #}` and `{#js ... #}`.
+In addition to auto-loading assets, the CSS and/or JS of a component can be declared in the metadata header with `{#css ... #}` and `{#js ... #}`.
 
 ```html
 {#css lorem.css, ipsum.css #}
@@ -31,23 +27,15 @@ In addition to auto-loading assets, the CSS and/or the JS of a component can be
 
 - The file paths must be relative to the root of your components catalog (e.g., `components/form.js`) or absolute (e.g., `http://example.com/styles.css`).
 - Multiple assets must be separated by commas.
-- Only **one** `{#css ... #}` and **one** `{#js ... #}` tag is allowed per component at most,
-  but both are optional.
-
+- Only **one** `{#css ... #}` and **one** `{#js ... #}` tag is allowed per component at most, but both are optional.
 
 ### Global assets
 
-The best practice is to store both CSS and JS files of the component within the same folder.
-Doing this has several advantages, including easier component reuse in other
-projects, improved code readability, and simplified debugging.
+The best practice is to store both CSS and JS files of the component within the same folder. Doing this has several advantages, including easier component reuse in other projects, improved code readability, and simplified debugging.
 
-However, there are instances when you may need to rely on global CSS or JS files,
-such as third-party libraries. In such cases, you can specify these dependencies
-in the component's metadata using URLs that start with either
-"/", "http://," or "https://."
+However, there are instances when you may need to rely on global CSS or JS files, such as third-party libraries. In such cases, you can specify these dependencies in the component's metadata using URLs that start with either "/", "http://," or "https://."
 
-When you do this, JinjaX will render them as is; instead of prepending them
-with the component's prefix like it normally does.
+When you do this, JinjaX will render them as is, instead of prepending them with the component's prefix like it normally does.
 
 For example, this code:
 
@@ -68,7 +56,6 @@ will be rendered as this HTML output:
 <script type="module" src="/static/components/bar.js"></script>
 ```
 
-
 ## Including assets in your pages
 
 The catalog will collect all CSS and JS file paths from the components used on a "page" render on the `catalog.collected_css` and `catalog.collected_js` lists.
@@ -92,7 +79,7 @@ For example, after rendering this component:
 </Layout>
 ```
 
-Assuming the `Card`, and `Button` components declare CSS assets, this will be the state of the `collected_css` list:
+Assuming the `Card` and `Button` components declare CSS assets, this will be the state of the `collected_css` list:
 
 ```py
 catalog.collected_css
@@ -130,9 +117,9 @@ The variable will be rendered as:
 
 ## Middleware
 
-The tags above will not work at all if your application can't return the content of those files, and right now it can't.
+The tags above will not work if your application can't return the content of those files. Currently, it can't.
 
-For that reason, JinjaX includes a WSGI middleware that will process those URLs if you add it to your application.
+For that reason, JinjaX includes WSGI middleware that will process those URLs if you add it to your application.
 
 ```py
 from flask import Flask
@@ -154,17 +141,16 @@ app.wsgi_app = catalog.get_middleware(
 The middleware uses the battle-tested [Whitenoise library](http://whitenoise.evans.io/) and will only respond to the *.css* and *.js* files inside the component(s) folder(s). You can configure it to also return files with other extensions. For example:
 
 ```python
-catalog.get_middleware(app, allowed_ext=[".css", ".js", ".svg", ".png"])
+catalog.get_middleware(app, allowed_ext=[".css", .js", .svg", ".png"])
 ```
 
-Be aware that, if you use this option, `get_middleware()` must be called **after** all folders are added.
-
+Be aware that if you use this option, `get_middleware()` must be called **after** all folders are added.
 
 ## Good practices
 
 ### CSS Scoping
 
-The styles of your components will not be auto-scoped. This means the styles of a component can affect other components, and, likewise, it will be affected by global styles or the styles of other components.
+The styles of your components will not be auto-scoped. This means the styles of a component can affect other components and likewise, it will be affected by global styles or the styles of other components.
 
 To protect yourself against that, *always* add a custom class to the root element(s) of your component and use it to scope the rest of the component styles.
 
@@ -218,7 +204,6 @@ a { color: blue; }
 Always use a class **instead of** an `id`, or the component will not be usable more than once per page.
 </Callout>
 
-
 ### JS events
 
 Your components might be inserted in the page on-the-fly, after the JavaScript files have been loaded and executed. So, attaching events to the elements on the page on load will not be enough:
@@ -226,7 +211,7 @@ Your components might be inserted in the page on-the-fly, after the JavaScript f
 ```js title="components/card.js"
 // This will fail for any Card component inserted after page load
 document.querySelectorAll('.Card button.share')
-  .forEach( (node) => {
+  .forEach((node) => {
     node.addEventListener("click", handleClick)
   })
 
diff --git a/docs/content/guide/extra.md b/docs/content/guide/extra.md
deleted file mode 100644
index 49c5541..0000000
--- a/docs/content/guide/extra.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: Extra Arguments
-description: If you pass arguments not declared in a component, those are not discarded, but rather collected in a `attrs` object that can render these extra arguments calling `attrs.render()`
----
-
-<Header title="Extra Arguments">
-If you pass arguments not declared in a component, those are not discarded, but rather collected in a `attrs` object that can render these extra arguments calling `attrs.render()`
-</Header>
-
-For example, this component:
-
-```html+jinja title="components/Card.jinja"
-{#def title #}
-<div {{ attrs.render() }}>
-  <h1>{{ title }}</h1>
-  {{ content }}
-</div>
-```
-
-Called as:
-
-```html+jinja
-<Card title="Products" class="mb-10" open>bla</Card>
-```
-
-Will be rendered as:
-
-```html
-<div class="mb-10" open>
-  <h1>Products</h1>
-  bla
-</div>
-```
-
-You can add or remove arguments before rendering them using the other methods of the `attrs` object. For example:
-
-```html+jinja
-{#def title #}
-{% do attrs.set(id="mycard") -%}
-
-<div {{ attrs.render() }}>
-  <h1>{{ title }}</h1>
-  {{ content }}
-</div>
-```
-
-Or directly in the `attrs.render()` call:
-
-```html+jinja
-{#def title #}
-
-<div {{ attrs.render(id="mycard") }}>
-  <h1>{{ title }}</h1>
-  {{ content }}
-</div>
-```
-
-## `attrs` methods
-
-
-### `.render(name=value, ...)`
-
-Renders the current attributes and properties as a string.
-Any attributes/properties you pass to this method, will be used to call `attrs.set(**kwargs)` before rendering.
-
-- Pass a name and a value to set an attribute (e.g. `type="text"`)
-- Use `True` as value to set a property (e.g. `disabled`)
-- Use `False` to remove an attribute or property
-
-The underscores in the names will be translated automatically to dashes, so `aria_selected`
-becomes the attribute `aria-selected`.
-
-The current attribute/property are overwritten **except** if is "class" or "classes".
-In those cases, the new classes are appended to the old ones instead of replacing them.
-
-To provide consistent output, the attributes and properties are sorted by name and rendered like this: `<sorted attributes> + <sorted properties>`.
-
-```html+jinja
-<button {{ attrs.render() }}>
-  {{ content }}
-</button>
-```
-
-<Callout type="warning">
-Using `<Component {{ attrs.render() }}>` to pass the extra arguments to other components **WILL NOT WORK**. That is because the components are translated to macros before the page render.
-
-You must pass them as the special argument `__attrs`.
-
-```html+jinja
-{#--- WRONG 😵 ---#}
-<MyButton {{ attrs.render() }} />
-
-{#--- GOOD 👍 ---#}
-<MyButton :__attrs="attrs" />
-```
-</Callout>
-
-
-### `.set(name=value, ...)`
-
-Sets an attribute or property:
-
-- Pass a name and a value to set an attribute (e.g. `type="text"`)
-- Use `True` as value to set a property (e.g. `disabled`)
-- Use `False` to remove an attribute or property
-
-The underscores in the names will be translated automatically to dashes, so `aria_selected`
-becomes the attribute `aria-selected`.
-
-The current attribute/property are overwritten **except** if is "class" or "classes".
-In those cases, the new classes are appended to the old ones instead of replacing them.
-
-
-#### Adding attributes/properties
-
-```html+jinja
-{% do attrs.set(
-  id="loremipsum",
-  disabled=True,
-  data_test="foobar",
-  class="m-2 p-4",
-) %}
-```
-
-#### Removing attributes/properties
-
-```html+jinja
-{% do attrs.set(
-  title=False,
-  disabled=False,
-  data_test=False,
-  class=False,
-) %}
-```
-
-
-### `.setdefault(name=value, ...)`
-
-Adds an attribute or sets a property, *but only if it's not already present*.
-Doesn't work eith properties.
-
-The underscores in the names will be translated automatically to dashes, so `aria_selected`
-becomes the attribute `aria-selected`.
-
-```html+jinja
-{% do attrs.setdefault(
-    aria_label="Products"
-) %}
-```
-
-
-### `.remove_class(name1, name2, ...)`
-
-Removes one or more classes from the list of classes.
-
-```html+jinja
-{% do attrs.remove_class("hidden") %}
-{% do attrs.remove_class("active", "animated") %}
-```
-
-
-### `.get(name, default=None)`
-
-Returns the value of the attribute or property, or the default value if it doesn't exists.
-
-```html+jinja
-{%- set role = attrs.get("role", "tab") %}
-```
-
-...
diff --git a/docs/content/guide/index.md b/docs/content/guide/index.md
index bcbc63c..0c092ea 100644
--- a/docs/content/guide/index.md
+++ b/docs/content/guide/index.md
@@ -1,22 +1,74 @@
 ---
-title: Quickstart
+title: Introduction
 ---
 
-<Header title="Quickstart">
+<Header title="Introduction">
+JinjaX is a Python library for creating reusable "components": encapsulated template snippets that can take arguments and render to HTML. They are similar to React or Vue components, but they render on the server side, not in the browser.
 </Header>
 
-## Installation
+Unlike Jinja's `{% include "..." %}` or macros, JinjaX components integrate naturally with the rest of your template code.
 
-Install the package using `pip`.
+```html+jinja
+<div>
+  <Card class="bg-gray">
+    <h1>Products</h1>
+    {% for product in products %}
+      <Product product={{ product }} />
+    {% endfor %}
+  </Card>
+</div>
+```
+
+## Features
+
+### Simple
+
+JinjaX components are simple Jinja templates. You use them as if they were HTML tags without having to import them: easy to use and easy to read.
+
+### Encapsulated
+
+They are independent of each other and can link to their own CSS and JS, so you can freely copy and paste components between applications.
+
+### Testable
+
+All components can be unit tested independently of the pages where they are used.
+
+### Composable
+
+A JinjaX component can wrap HTML code or other components with a natural syntax, as if they were another tag.
+
+### Modern
+
+They are a great complement to technologies like [TailwindCSS](https://tailwindcss.com/), [htmx](https://htmx.org/), or [Hotwire](https://hotwired.dev/).
+
+## Usage
+
+#### Install
+
+Install the library using `pip`.
 
 ```bash
 pip install jinjax
 ```
 
-## Usage
+#### Components folder
 
-The first thing you must do in your app is to create a "catalog" of components.
-This is the object that manage the components and its global settings. Then, you add to the catalog the folder(s) with your components.
+Then, create a folder that will contain your components, for example:
+
+```
+└ myapp/
+    ├── app.py
+    ├── components/             🆕
+    │   └── Card.jinja          🆕
+    ├── static/
+    ├── templates/
+    └── views/
+└─ requirements.txt
+```
+
+#### Catalog
+
+Finally, you must create a "catalog" of components in your app. This is the object that manages the components and their global settings. You then add the path of the folder with your components to the catalog:
 
 ```python
 from jinjax import Catalog
@@ -25,49 +77,55 @@ catalog = Catalog()
 catalog.add_folder("myapp/components")
 ```
 
-You use the catalog to render a parent component from your views:
+#### Render
+
+You will use the catalog to render components from your views.
 
 ```python
 def myview():
   ...
   return catalog.render(
-    "ComponentName",
+    "Page",
     title="Lorem ipsum",
     message="Hello",
   )
-
 ```
 
-## Components
-
-The components are `.jinja` files with snippets of template code (HTML or otherwise). They can also call other components.
-
-
-### Components names
+In this example, it is a component for the whole page, but you can also render smaller components, even from inside a regular Jinja template if you add the catalog as a global:
 
-The components **must** start with an uppercase. I recommend that you use PascalCase names, like Python classes.
+```python
+app.jinja_env.globals["catalog"] = catalog
+```
 
-For example, if the filename es `PersonForm.jinja`, the name of the component is `PersonForm` and can be used like `<PersonForm> ... </PersonForm>` or just `<PersonForm />`.
+```html+jinja
+{% block content %}
+<div>
+  {{ catalog.irender("LikeButton", title="Like and subscribe!", post=post) }}
+</div>
+<p>Lorem ipsum</p>
+{{ catalog.irender("CommentForm", post=post) }}
+{% endblock %}
+```
 
-You can organize your components in subfolders, using a dot (`.`) to indicate a subfolder. For example, you would call a `components/Person/Form.jinja` components as `<Person.Form> ... </Person.Form>`
+## How It Works
 
+JinjaX uses Jinja to render the component templates. In fact, it currently works as a pre-processor, replacing all:
 
-### Components arguments
+```html
+<Component attr="value">content</Component>
+```
 
-A component can only use data you pass it explicitly and global variables.
-To declare what arguments it takes, begin the file with a `{#def ... #}` Jinja comment.
-Some of these arguments might have a default value (making them optional):
+with function calls like:
 
 ```html+jinja
-{#def title, message='Hi' #}
-
-<h1>{{ title }}</h1>
-<div>{{ message }}. This is my component</div>
+{% call catalog.irender("Component", attr="value") %}content{% endcall %}
 ```
 
-## Jinja
+These calls are evaluated at render time. Each call loads the source of the component file, parses it to extract the names of CSS/JS files, required and/or optional attributes, pre-processes the template (replacing components with function calls, as before), and finally renders the new template.
+
+### Reusing Jinja's Globals, Filters, and Tests
 
-JinjaX use Jinja internally to render the templates. You can add your own global variables and functions, filters, tests, and Jinja extensions when creating the catalog:
+You can add your own global variables and functions, filters, tests, and Jinja extensions when creating the catalog:
 
 ```python
 from jinjax import Catalog
@@ -80,7 +138,7 @@ catalog = Catalog(
 )
 ```
 
-or afterwards.
+or afterward.
 
 ```python
 catalog.jinja_env.globals.update({ ... })
@@ -95,7 +153,7 @@ The ["do" extension](https://jinja.palletsprojects.com/en/3.0.x/extensions/#expr
 {% do attrs.set(class="btn", disabled=True) %}
 ```
 
-### Reusing an existing Jinja Environment
+### Reusing an Existing Jinja Environment
 
 You can also reuse an existing Jinja Environment, for example:
 
@@ -104,16 +162,15 @@ You can also reuse an existing Jinja Environment, for example:
 ```python
 app = Flask(__name__)
 
-# Here we add the flask Jinja globals, filters, etc. like `url_for()`
+# Here we add the Flask Jinja globals, filters, etc., like `url_for()`
 catalog = jinjax.Catalog(jinja_env=app.jinja_env)
-
 ```
 
 #### Django:
 
-First, configure Jinja in setting.py and [jinja_env.py](https://docs.djangoproject.com/en/5.0/topics/templates/#django.template.backends.jinja2.Jinja2))
+First, configure Jinja in `settings.py` and [jinja_env.py](https://docs.djangoproject.com/en/5.0/topics/templates/#django.template.backends.jinja2.Jinja2).
 
-To have a separate "components" folder for shared components and also have "components" subfolder at each django app level
+To have a separate "components" folder for shared components and also have "components" subfolders at each Django app level:
 
 ```python
 import jinjax
@@ -134,3 +191,6 @@ def environment(loader: FileSystemLoader, **options):
     return env
 ```
 
+#### FastAPI:
+
+TBD
\ No newline at end of file
diff --git a/docs/content/guide/integrations.md b/docs/content/guide/integrations.md
new file mode 100644
index 0000000..0884d22
--- /dev/null
+++ b/docs/content/guide/integrations.md
@@ -0,0 +1,3 @@
+---
+title: Integrations
+---
\ No newline at end of file
diff --git a/docs/content/guide/motivation.md b/docs/content/guide/motivation.md
new file mode 100644
index 0000000..90602b5
--- /dev/null
+++ b/docs/content/guide/motivation.md
@@ -0,0 +1,115 @@
+---
+title: Motivation
+---
+<Header title="Motivation">
+An overview of what Jinja is about, and a glimpse into my disjointed decision-making process that got me here.
+</Header>
+
+## Components are cool
+
+Despite the complexity of a single-page application, some programmers claim React or Vue offer a better development experience than traditional server-side rendered templates. I believe this is mostly because of the greatest improvement React introduced to web development: components.
+
+<small>
+Components, *as a way to organize template code*. Reactivity is cool too, but unrelated to the main issue.
+</small>
+
+When writing Python, we aim for the code to be easy to understand and test. However, we often forget all of that when writing templates that don't even meet basic standards: long methods, deep conditional nesting, and mysterious variables everywhere.
+
+Components are way cooler than the HTML soup tag of server-side rendered templates. They make it very clear what arguments they take and how they can render. More than anything, components are modular: markup, logic, and relevant styles all in one package. You can copy and paste them between projects, and you can share them with other people.
+
+This means a community has formed around sharing these components. Now you can easily find hundreds of ready-to-use components—some of them very polished—for every common UI widget, even the "complex" ones, like color-pickers. The big problem is that you can only use them with React (and Vue components with Vue, etc.) and in a single-page application.
+
+Jinja is about bringing that innovation back to server-side-rendered applications.
+
+## Not quite there: Jinja macros
+
+An underestimated feature of Jinja is *macros*. Jinja [macros](https://jinja.palletsprojects.com/en/3.0.x/templates/#macros) are template snippets that work like functions: They can have positional or keyword arguments, and when called return the rendered text inside.
+
+```html+jinja
+{% macro input(name, value="", type="text", size=20) -%}
+  <input type="{{ type }}" name="{{ name }}"
+    value="{{ value|e }}" size="{{ size }}">
+{%- endmacro %}
+
+{% macro button(type="button") -%}
+  <button type="{{ type }}" class="btn-blue">
+    {{ caller() }}
+  </button>
+{%- endmacro %}
+```
+
+You can then import the macro to your template to use it:
+
+```html+jinja
+{% from 'forms.html' import input, button %}
+
+<p>{{ input("username") }}</p>
+<p>{{ input("password", type="password") }}</p>
+{% call button("submit") %}Submit{% endcall %}
+```
+You must use the `{% call x %}` to pass the child content to the macro—by using the weird incantation `{{ caller() }}`—otherwise you can just call it like it were a function.
+
+So, can we use macros as components and call it a day? Well... no. This looks terrible:
+
+```html+jinja
+{% call Card(label="Hello") %}
+  {% call MyButton(color="blue", shadowSize=2) %}
+    {{ Icon(name="ok") }} Click Me
+	{% endcall %}
+{% endcall %}
+```
+
+compared to how you would write it with JSX:
+
+```html
+<Card label="Hello">
+  <MyButton color="blue" shadowSize={2}>
+    <Icon name="ok" /> Click Me
+  </MyButton>
+</Card>
+```
+
+But macros are *almost* there. They would be a great foundation if we could adjust the syntax just a little.
+
+## Strong alternative: Mako
+
+At some point, I considered dropping this idea and switching to [Mako](https://www.makotemplates.org/), a template library by Michael Bayer (of SQLAlchemy fame).
+
+It's a hidden gem that doesn't get much attention because of network effects. See how close you can get with it:
+
+```html+mako
+<%def name="layout()">       # <--- A "macro"
+    <div class="mainlayout">
+        <div class="header">
+            ${caller.header()}
+        </div>
+
+        <div class="sidebar">
+            ${caller.sidebar()}
+        </div>
+
+        <div class="content">
+            ${caller.body()}
+        </div>
+    </div>
+</%def>
+
+## calls the layout def           <--- Look! Python-style comments
+
+<%self:layout>
+    <%def name="header()">       # <--- This is like a "slot"!
+        I am the header
+    </%def>
+    <%def name="sidebar()">
+        <ul>
+            <li>sidebar 1</li>
+            <li>sidebar 2</li>
+        </ul>
+    </%def>
+    this is the body
+</%self:layout>
+```
+
+Mako also has `<% include %>`s with arguments, which is another way of doing components if you don't need to pass content.
+
+However, in the end, the network effects, my familiarity with Jinja, and a little of not-invented-here syndrome tipped the scales to write a Jinja extension.
diff --git a/docs/content/guide/performance.md b/docs/content/guide/performance.md
new file mode 100644
index 0000000..609b952
--- /dev/null
+++ b/docs/content/guide/performance.md
@@ -0,0 +1,3 @@
+---
+title: Performance
+---
diff --git a/docs/content/ui/index.md b/docs/content/ui/index.md
index 46a8bdf..0a406a4 100644
--- a/docs/content/ui/index.md
+++ b/docs/content/ui/index.md
@@ -7,7 +7,7 @@ description: Unstyled, fully accessible UI components, to integrate with your pr
   Unstyled, fully accessible UI components, to integrate with your projects.
 </Header>
 
-<div class="cards not-prose">
+<div class="cd-cards not-prose">
   <a class="card" href="/ui/tabs">
     <h2>Tabs</h2>
     <img src="/static/img/ui-tabs.png" />
diff --git a/docs/content/ui/menu.md b/docs/content/ui/menu.md
index 9af9983..12539d5 100644
--- a/docs/content/ui/menu.md
+++ b/docs/content/ui/menu.md
@@ -71,7 +71,7 @@ To animate a menu, follow the [Animating popovers section](/headless/popover#ani
 | --------------- | --------- | ---------- | --------------
 | `target`        | `str`     |            | Required. The ID of the linked `Popover` component.
 | `action`        | `str`     | `"toggle"` | `"open"`, `"close"`, or `"toggle"`.
-| `tag`           | `str`     | `"button"`    | HTML tag of the component.
+| `tag`           | `str`     | `"button"` | HTML tag of the component.
 
 ### Menu
 
@@ -106,7 +106,7 @@ To animate a menu, follow the [Animating popovers section](/headless/popover#ani
 
 ### Keyboard interaction
 
-- Pressing the <Key>Enter</Key> or <Key>Space</Key> keys on a `PopButton` will trigger
+- Pressing the <kbd>Enter</kbd> or <kbd>Space</kbd> keys on a `PopButton` will trigger
 the button action (open, close, or toggle state), and close *all* the `Popover` with `mode="auto"`.
 
-- Pressing the <Key>Escape</Key> key will close *all* the `Popover` with `mode="auto"`.
+- Pressing the <kbd>Escape</kbd> key will close *all* the `Popover` with `mode="auto"`.
diff --git a/docs/content/ui/popover.md b/docs/content/ui/popover.md
index 73d4ec7..673f96d 100644
--- a/docs/content/ui/popover.md
+++ b/docs/content/ui/popover.md
@@ -198,7 +198,7 @@ by [Mozilla Contributors](https://developer.mozilla.org/en-US/docs/MDN/Community
 
 ### Keyboard interaction
 
-- Pressing the <Key>Enter</Key> or <Key>Space</Key> keys on a `PopButton` will trigger
+- Pressing the <kbd>Enter</kbd> or <kbd>Space</kbd> keys on a `PopButton` will trigger
 the button action (open, close, or toggle state), and close *all* the `Popover` with `mode="auto"`.
 
-- Pressing the <Key>Escape</Key> key will close *all* the `Popover` with `mode="auto"`.
+- Pressing the <kbd>Escape</kbd> key will close *all* the `Popover` with `mode="auto"`.
diff --git a/docs/content/ui/reldate.md b/docs/content/ui/reldate.md
index ddf13a9..e3624c8 100644
--- a/docs/content/ui/reldate.md
+++ b/docs/content/ui/reldate.md
@@ -11,14 +11,14 @@ etc. using JavaScript's <a class="link" href="https://developer.mozilla.org/en-U
 
 *Some examples (as if the datetime was `June 20th, 2024 6:30pm`)*:
 
-| Source      | Relative date
-| ------------| --------------
-| `<RelDate datetime="2024-01-01"/>` | <RelDate datetime="2024-01-01" now="2024-06-20T18:30"/>
-| `<RelDate datetime="2024-06-19T18:30"/>` | <RelDate datetime="2024-06-19T18:30" now="2024-06-20T18:30"/>
-| `<RelDate datetime="2024-06-20T14:00"/>` | <RelDate datetime="2024-06-20T14:00" now="2024-06-20T18:30"/>
-| `<RelDate datetime="2024-06-21T14:00"/>` | <RelDate datetime="2024-06-21T14:00" now="2024-06-20T18:30"/>
-| `<RelDate datetime="2024-06-30T10:00"/>` | <RelDate datetime="2024-06-30T10:00" now="2024-06-20T18:30"/>
-| `<RelDate datetime="1992-10-01"/>` | <RelDate datetime="1992-10-01" now="2024-06-20T18:30"/>
+| Source                                   | Relative date
+| -----------------------------------------| --------------
+| `<RelDate datetime="2024-01-01"/>`       | 6 months ago
+| `<RelDate datetime="2024-06-19T18:30"/>` | yesterday
+| `<RelDate datetime="2024-06-20T14:00"/>` | 5 hours ago
+| `<RelDate datetime="2024-06-21T14:00"/>` | in 19 hours
+| `<RelDate datetime="2024-06-30T10:00"/>` | 	next week
+| `<RelDate datetime="1992-10-01"/>`       | 32 years ago
 
 
 ## How it works
@@ -39,12 +39,12 @@ Both can be a comma-separated lists of locales (e.g.: `"en-US,en-UK,en`). If non
 
 *Some examples (as if the datetime was `June 20th, 2024 6:30pm`)*:
 
-| Source      | Relative date
-| ------------| --------------
-| `<RelDate datetime="2024-01-01" lang="it"/>` | <RelDate datetime="2024-01-01" now="2024-06-20T18:30" lang="it"/>
-| `<RelDate datetime="2024-06-19T18:30" lang="fr"/>` | <RelDate datetime="2024-06-19T18:30" now="2024-06-20T18:30" lang="fr"/>
-| `<RelDate datetime="2024-06-21T14:00" lang="es"/>` | <RelDate datetime="2024-06-21T14:00" now="2024-06-20T18:30" lang="es"/>
-| `<RelDate datetime="2024-06-21T14:00" lang="es-PE,es-ES,es"/>` | <RelDate datetime="2024-06-21T14:00" now="2024-06-20T18:30" lang="es"/>
+| Source                                                         | Relative date
+| ---------------------------------------------------------------| --------------
+| `<RelDate datetime="2024-01-01" lang="it"/> `                  | 6 mesi fa
+| `<RelDate datetime="2024-06-19T18:30" lang="fr"/>`             | hier
+| `<RelDate datetime="2024-06-21T14:00" lang="es"/>`             | dentro de 19 horas
+| `<RelDate datetime="2024-06-21T14:00" lang="es-PE,es-ES,es"/>` | dentro de 19 horas
 
 
 ## Component arguments
diff --git a/docs/content/ui/tabs.md b/docs/content/ui/tabs.md
index 70ae7c5..314a467 100644
--- a/docs/content/ui/tabs.md
+++ b/docs/content/ui/tabs.md
@@ -39,9 +39,9 @@ Disabling tabs might be confusing for users. Instead, I reccomend you either rem
 
 ## Manually activating tabs
 
-By default, tabs are automatically selected as the user navigates through them using the arrow keys.
+By default, tabs are automatically selected as the user navigates through them using the arrow kbds.
 
-If you'd rather not change the current tab until the user presses <Key>Enter</Key> or <Key>Space</Key>, use the `manual` attribute on the `TabGroup` component.
+If you'd rather not change the current tab until the user presses <kbd>Enter</kbd> or <kbd>Space</kbd>, use the `manual` attribute on the `TabGroup` component.
 
 Remember to add styles to the `:focus` state of the tab so is clear to the user that the tab is focused.
 
@@ -58,7 +58,7 @@ The manual prop has no impact on mouse interactions — tabs will still be selec
 
 ## Vertical tabs
 
-If you've styled your `TabList` to appear vertically, use the `vertical` attribute to enable navigating with the <Key title="arrow up">↑</Key> and <Key title="arrow down">↓</Key> arrow keys instead of <Key title="arrow left">←</Key> and <Key title="arrow right">→</Key>, and to update the `aria-orientation` attribute for assistive technologies.
+If you've styled your `TabList` to appear vertically, use the `vertical` attribute to enable navigating with the <kbd title="arrow up">↑</kbd> and <kbd title="arrow down">↓</kbd> arrow kbds instead of <kbd title="arrow left">←</kbd> and <kbd title="arrow right">→</kbd>, and to update the `aria-orientation` attribute for assistive technologies.
 
 <ExampleTabs
   prefix="vertical"
@@ -97,8 +97,8 @@ Note that a `TabSelect` **is not a replacement for a `TabList`**. For accessibil
 
 | Argument    | Type     | Default    | Description
 | ----------- | -------- | ---------- | --------------
-| vertical    | `bool`   | `false`    | Use the <Key title="arrow up">↑</Key> and <Key title="arrow down">↓</Key> arrow keys to move between tabs instead of the defaults <Key title="arrow left">←</Key> and <Key title="arrow right">→</Key> arrow keys.
-| manual      | `bool`   | `false`    | If `true`, selecting a tab with the keyboard won't activate it, you must press <Key>Enter</Key> os <Key>Space</Key> keys to do it.
+| vertical    | `bool`   | `false`    | Use the <kbd title="arrow up">↑</kbd> and <kbd title="arrow down">↓</kbd> arrow kbds to move between tabs instead of the defaults <kbd title="arrow left">←</kbd> and <kbd title="arrow right">→</kbd> arrow kbds.
+| manual      | `bool`   | `false`    | If `true`, selecting a tab with the keyboard won't activate it, you must press <kbd>Enter</kbd> os <kbd>Space</kbd> kbds to do it.
 | tag         | `str`    | `"nav"`    | HTML tag used for rendering the wrapper.
 
 
@@ -155,8 +155,8 @@ All interactions apply when a `Tab` component is focused.
 
 | Command                                                                                           | Description
 | -------------------------------------------------------------------------------------             | -----------
-| <Key title="arrow left">←</Key> / <Key title="arrow right">→</Key> arrow keys                     | Selects the previous/next non-disabled tab, cycling from last to first and vice versa.
-| <Key title="arrow up">↑</Key> / <Key title="arrow down">↓</Key> arrow keys when `vertical` is set | Selects the previous/next non-disabled tab, cycling from last to first and vice versa.
-| <Key>Enter</Key> or <Key>Space</Key> when `manual` is set                                         | Activates the selected tab
-| <Key>Home</Key> or <Key>PageUp</Key>                                                              | Activates the **first** tab
-| <Key>End</Key> or <Key>PageDown</Key>                                                             | Activates the **last** tab
+| <kbd title="arrow left">←</kbd> / <kbd title="arrow right">→</kbd> arrow kbds                     | Selects the previous/next non-disabled tab, cycling from last to first and vice versa.
+| <kbd title="arrow up">↑</kbd> / <kbd title="arrow down">↓</kbd> arrow kbds when `vertical` is set | Selects the previous/next non-disabled tab, cycling from last to first and vice versa.
+| <kbd>Enter</kbd> or <kbd>Space</kbd> when `manual` is set                                         | Activates the selected tab
+| <kbd>Home</kbd> or <kbd>PageUp</kbd>                                                              | Activates the **first** tab
+| <kbd>End</kbd> or <kbd>PageDown</kbd>                                                             | Activates the **last** tab
diff --git a/docs/deploy.sh b/docs/deploy.sh
index f64013e..9fe8897 100755
--- a/docs/deploy.sh
+++ b/docs/deploy.sh
@@ -1,3 +1,4 @@
 #!/bin/bash
 python docs.py build
+ssh code 'rm -rf /var/www/jinjax/build'
 rsync --recursive --delete --progress build code:/var/www/jinjax/
diff --git a/docs/docs.py b/docs/docs.py
index b9f91e2..4c0af71 100755
--- a/docs/docs.py
+++ b/docs/docs.py
@@ -6,7 +6,7 @@
 from claydocs import Docs
 
 
-logging.getLogger("jinjax").setLevel(logging.ERROR)
+logging.getLogger("jinjax").setLevel(logging.INFO)
 logging.getLogger("jinjax").addHandler(logging.StreamHandler())
 
 here = Path(__file__).parent
@@ -18,10 +18,13 @@
             [
                 "guide/index.md",
                 "guide/components.md",
-                "guide/extra.md",
                 "guide/css_and_js.md",
+                # "guide/integrations.md",
+                # "guide/performance.md",
+                "guide/motivation.md",
             ],
         ],
+        "api.md",
         [
             "UI components", [
                 "ui/index.md",
@@ -42,10 +45,17 @@ def get_docs() -> Docs:
         content_folder=root_path,
         add_ons=[jinjax_ui],
         search=False,
-        cache=True,
+        cache=False,
         domain="https://jinjax.scaletti.dev",
         default_component="Page",
         default_social="SocialCard",
+        metadata={
+            "name": "JinjaX",
+            "language": "en",
+            "license": "MIT",
+            "version": "0.43",
+            "web": "https://jinjax.scaletti.dev",
+        }
     )
     docs.add_folder(here / "components")
     docs.add_folder(here / "theme")
diff --git a/docs/static/docs.css b/docs/static/docs.css
index ab33f0c..30c9898 100644
--- a/docs/static/docs.css
+++ b/docs/static/docs.css
@@ -1,3 +1,9 @@
+.bg-cover {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+}
+
 .Logo {
   display: flex;
   height: 2.5rem;
@@ -229,6 +235,7 @@
     margin-bottom: 0.5rem;
     display: flex;
     align-items: center;
+    flex-direction: row-reverse;
   }
   & .card > .header img {
     float: left;
diff --git a/docs/static/prose.css b/docs/static/prose.css
index e6158c7..328b214 100644
--- a/docs/static/prose.css
+++ b/docs/static/prose.css
@@ -14,8 +14,9 @@
   --cd-prose-pre-code: rgb(238 238 238);
   --cd-prose-pre-border: rgb(51, 51, 51);
   --cd-prose-pre-bg: rgb(24 24 24);
-  --cd-prose-th-borders: #d4d4d8;
-  --cd-prose-td-borders: #e4e4e7;
+  --cd-prose-th-borders: #ddd;
+  --cd-prose-td-borders: #eee;
+  --cd-prose-bg-hover: rgba(0,0,0,0.035);
 
   --cd-prose-invert-body: #d4d4d8;
   --cd-prose-invert-headings: #fff;
@@ -34,6 +35,7 @@
   --cd-prose-invert-pre-bg: rgb(24 24 24);
   --cd-prose-invert-th-borders: #52525b;
   --cd-prose-invert-td-borders: #3f3f46;
+  --cd-prose-invert-bg-hover: rgba(0,0,0,0.035);
 }
 
 .dark .prose {
@@ -54,6 +56,7 @@
   --cd-prose-pre-bg: var(--cd-prose-invert-pre-bg);
   --cd-prose-th-borders: var(--cd-prose-invert-th-borders);
   --cd-prose-td-borders: var(--cd-prose-invert-td-borders);
+  --cd-prose-bg-hover: var(--cd-prose-invert-bg-hover);
 }
 
 .prose {
@@ -225,7 +228,7 @@
   color: var(--cd-prose-headings);
   font-weight: 600;
   font-size: 1.4em;
-  margin-top: 1em;
+  margin-top: 1.6em;
   margin-bottom: 0.4em;
   line-height: 1.6;
 }
@@ -249,6 +252,26 @@
   color: inherit;
 }
 
+.prose :where(h5):not(:where([class~="not-prose"] *)) {
+  color: var(--cd-prose-headings);
+  font-weight: 600;
+  font-size: 1em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+
+.prose :where(h6):not(:where([class~="not-prose"] *)) {
+  color: var(--cd-prose-headings);
+  font-weight: 600;
+  font-size: 1em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.4;
+}
+
+
 .prose :where(img):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
@@ -314,6 +337,8 @@
   margin-bottom: 2em;
   font-size: 0.875em;
   line-height: 1.7142857;
+  border-width: 1px;
+  border-color: var(--cd-prose-td-borders);
 }
 
 .prose :where(thead):not(:where([class~="not-prose"] *)) {
@@ -325,14 +350,21 @@
   color: var(--cd-prose-headings);
   font-weight: 600;
   vertical-align: bottom;
-  padding-right: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-left: 0.5714286em;
+  border-left-width: 1px;
+  border-left-color: var(--cd-prose-th-borders);
+  /* text-transform: uppercase; */
+}
+.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+  border-left-width: 0;
 }
 
 .prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
   border-bottom-width: 1px;
   border-bottom-color: var(--cd-prose-td-borders);
+  transition: background-color 125ms;
+}
+.prose :where(tbody tr:hover):not(:where([class~="not-prose"] *)) {
+  background-color: var(--cd-prose-bg-hover);
 }
 
 .prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
@@ -341,6 +373,14 @@
 
 .prose :where(tbody td):not(:where([class~="not-prose"] *)) {
   vertical-align: baseline;
+  border-left-width: 1px;
+  border-left-color: var(--cd-prose-th-borders);
+}
+.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+  border-left-width: 0;
+}
+.prose :where(tbody td p:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
 }
 
 .prose :where(tfoot):not(:where([class~="not-prose"] *)) {
@@ -352,6 +392,10 @@
   vertical-align: top;
 }
 
+.prose :where(th, td):not(:where([class~="not-prose"] *)) {
+  padding: 0.5rem 1rem;
+}
+
 .prose :where(video):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
@@ -417,29 +461,6 @@
   margin-top: 0;
 }
 
-.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
-}
-
-.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
-}
-
-.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
-  padding-top: 0.5714286em;
-  padding-right: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-left: 0.5714286em;
-}
-
-.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
-}
-
-.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
-}
-
 .prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
@@ -493,23 +514,47 @@ pre code {
   line-height: inherit;
 
 }
-pre .filename {
-  display: block;
-  padding: 0.4em 1em;
-  font-weight: 500;
-  font-size: 0.9em;
-  border-bottom: 1px solid rgb(var(--border-color));
-}
 pre a {
   text-decoration: none;
 }
 
+.highlight {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  border-radius: 6px;
+}
+.highlight:has(> .filename) {
+  background-color: rgb(249 250 251);
+  border: 1px solid rgb(153, 153, 153);
+}
+.highlight:is(.dark *):has(> .filename) {
+  background-color: rgb(55 65 81);
+  border-color: rgb(75 85 99);
+}
+.highlight > .filename {
+  border-radius: 6px 0 0 0;
+  display: inline-block;
+  border-right: 1px solid rgb(153, 153, 153);
+  background-color: #e7e9ed;
+  padding: 0.5rem;
+  color: #333;
+  font-weight: 500;
+  font-size: 0.9em;
+}
+.highlight:is(.dark *) > .filename {
+  border-color: rgb(75 85 99);
+  background-color: #111;
+  color: rgb(255 255 255);
+}
 .highlight pre {
   background-color: rgba(0, 0, 0, 0.9);
   border-radius: 6px;
   font-size: 0.98rem;
   line-height: 1.4;
 }
+.highlight .filename + pre {
+  border-radius: 0 0 6px 6px;
+}
 .highlight pre code { color: white; }
 
 .highlight pre code [data-linenos]:before {
diff --git a/docs/static/theme.css b/docs/static/theme.css
index e9297e8..c28925e 100644
--- a/docs/static/theme.css
+++ b/docs/static/theme.css
@@ -57,7 +57,25 @@ html {
   --cd-text-color: rgb(23 23 23);
   --cd-text-color-mild: rgb(63 63 70);
   --cd-border-color: #e3e3e4;
+
+  --cd-nav-bg-color: rgba(255, 255, 255, 0.8);
+  --cd-nav-bg-color-hover: rgb(244, 244, 244);
+
+  --doc-symbol-parameter-fg-color: #df50af;
+  --doc-symbol-attribute-fg-color: #953800;
+  --doc-symbol-function-fg-color: #8250df;
+  --doc-symbol-method-fg-color: #8250df;
+  --doc-symbol-class-fg-color: #0550ae;
+  --doc-symbol-module-fg-color: #5cad0f;
+
+  --doc-symbol-parameter-bg-color: #df50af1a;
+  --doc-symbol-attribute-bg-color: #9538001a;
+  --doc-symbol-function-bg-color: #8250df1a;
+  --doc-symbol-method-bg-color: #8250df1a;
+  --doc-symbol-class-bg-color: #0550ae1a;
+  --doc-symbol-module-bg-color: #5cad0f1a;
 }
+
 html.dark {
   --cd-brand-color: #3451b2;
 
@@ -66,6 +84,23 @@ html.dark {
   --cd-text-color: rgb(250 250 250);
   --cd-text-color-mild: rgb(161 161 170);
   --cd-border-color: rgb(60 60 60);
+
+  --cd-nav-bg-color: rgba(60, 60, 60, 0.8);
+  --cd-nav-bg-color-hover: rgb(70, 70, 70);
+
+  --doc-symbol-parameter-fg-color: #ffa8cc;
+  --doc-symbol-attribute-fg-color: #ffa657;
+  --doc-symbol-function-fg-color: #d2a8ff;
+  --doc-symbol-method-fg-color: #d2a8ff;
+  --doc-symbol-class-fg-color: #79c0ff;
+  --doc-symbol-module-fg-color: #baff79;
+
+  --doc-symbol-parameter-bg-color: #ffa8cc1a;
+  --doc-symbol-attribute-bg-color: #ffa6571a;
+  --doc-symbol-function-bg-color: #d2a8ff1a;
+  --doc-symbol-method-bg-color: #d2a8ff1a;
+  --doc-symbol-class-bg-color: #79c0ff1a;
+  --doc-symbol-module-bg-color: #baff791a;
 }
 
 /* ---------------------------------------------------------------------- */
@@ -393,7 +428,7 @@ img, video {
 
 /* ---------------------------------------------------------------------- */
 
-html:has(.tNavMobile:popover-open) {
+html:has(.cd-nav-mobile:popover-open) {
   overflow: hidden !important;
   overflow-x: hidden !important;
   overflow-y: hidden !important;
@@ -411,28 +446,27 @@ html.dark body {
   background-color: var(--cd-bg-color-dark);
 }
 
-.icon {
-  font-family: var(--cd-font-icons);
-  font-weight: normal;
-  font-style: normal;
-  letter-spacing: normal;
-  text-transform: none;
+.keys,
+kbd:not(.keys > kbd) {
+  font-family: var(--cd-font-mono);
   display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: "liga";
-  cursor: default;
-  pointer-events: none;
-}
+  padding: 0.2rem 0.25rem;
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-color: #ffffff;
+  box-shadow: 0 0 2px 0 #000;
 
-.bg-cover {
-  position: absolute;
-  z-index: -1;
-  inset: 0;
+  &:is(.dark *) {
+    border-color: rgb(0 0 0);
+    background-color: rgb(24 24 27);
+  }
 }
 
 .scrollbar-thin {
@@ -469,7 +503,190 @@ h6:hover a.headerlink {
   opacity: 0.5;
 }
 
-.cards {
+/* ---------------------------------------------------------------------- */
+
+.doc-symbol {
+  border-radius: 0.1rem;
+  padding: 0 0.3em;
+  font-weight: bold;
+}
+.doc-symbol-attr {
+  color: var(--doc-symbol-attribute-fg-color) !important;
+  background-color: var(--doc-symbol-attribute-bg-color) !important;
+}
+.doc-symbol-function {
+  color: var(--doc-symbol-function-fg-color) !important;
+  background-color: var(--doc-symbol-function-bg-color) !important;
+}
+.doc-symbol-method {
+  color: var(--doc-symbol-method-fg-color) !important;
+  background-color: var(--doc-symbol-method-bg-color) !important;
+}
+.doc-symbol-class {
+  color: var(--doc-symbol-class-fg-color) !important;
+  background-color: var(--doc-symbol-class-bg-color) !important;
+}
+.doc-symbol-module {
+  color: var(--doc-symbol-module-fg-color) !important;
+  background-color: var(--doc-symbol-module-bg-color) !important;
+}
+
+.doc-oname {
+  font-weight: normal;
+}
+.doc-olabel {
+  font-size: 0.6em !important;
+  color: #36464e !important;
+  font-weight: 400;
+  padding: 0.1rem 0.4rem !important;
+}
+
+.doc-attrs ~ .doc-methods,
+.doc-properties ~ .doc-methods {
+  margin-top; 1rem;
+}
+
+/* ---------------------------------------------------------------------- */
+
+.icon {
+  font-family: var(--cd-font-icons);
+  font-weight: normal;
+  font-style: normal;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------- */
+
+.cd-source {
+  display: flex;
+  align-items: center;
+  font-size: 0.85rem;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 0.5rem 0.75rem;
+  min-width: 150px;
+  backdrop-filter: blur(4px);
+  background-color: var(--cd-nav-bg-color);
+  border-radius: 1rem;
+  transition: background 300ms ease-in-out;
+
+  &:hover {
+    background-color: var(--cd-nav-bg-color-hover);
+  }
+  & > div {
+    opacity: 0.8;
+    transition: opacity 300ms ease-in-out;
+  }
+  &:hover > div {
+    opacity: 1;
+  }
+  & .cd-source__icon {
+    padding-right: 0.5rem;
+  }
+  & .cd-source__icon svg {
+    height: 1.5rem;
+    width: 1.5rem;
+    fill: currentcolor;
+    display: block;
+  }
+  & .cd-source__label {
+    font-size: 0.9rem;
+    font-weight: bold;
+  }
+  & .cd-source__repo {
+    display: inline-block;
+    max-width: calc(100% - 1.2rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+  @media (max-width: 480px) {
+    & {
+      min-width: 0;
+    }
+    & .cd-source__icon {
+      padding-right: 0;
+    }
+    & .cd-source__repo {
+      display: none;
+    }
+  }
+  & .cd-source__facts {
+    display: hidden;
+    gap: 0.4rem;
+    list-style-type: none;
+    margin: 0.1rem 0 0;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all 0.5s ease-out;
+  }
+  & .cd-source__facts.cd-source__facts--visible {
+    display: flex;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  & .cd-source__facts [data-fact] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+  }
+  & .cd-source__facts [data-fact]:nth-child(1n+2) {
+    flex-shrink: 0;
+  }
+  & .cd-source__facts [data-fact]:not([hidden]):before {
+    width: 0.6rem;
+    padding-right: 0.8rem;
+    font-family: var(--cd-font-icons);
+    font-weight: normal;
+    font-style: normal;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga";
+    cursor: default;
+    pointer-events: none;
+  }
+  & .cd-source__facts [data-fact="version"]:not([hidden]):before {
+    content: "tag";
+  }
+  & .cd-source__facts [data-fact="stars"]:not([hidden]):before {
+    content: "star";
+  }
+  & .cd-source__facts [data-fact="forks"]:not([hidden]):before {
+    content: "fork_right";
+  }
+  & .cd-source__facts [data-fact="numrepos"]:not([hidden]):before {
+    content: "numbers";
+  }
+}
+
+/* ---------------------------------------------------------------------- */
+
+.cd-cards {
   & {
     display: grid;
     grid-gap: 1rem;
@@ -478,7 +695,7 @@ h6:hover a.headerlink {
     & { grid-template-columns: repeat(2, 1fr); }
   }
   @media (min-width: 900px) {
-    & { grid-template-columns: repeat(3, 1fr); }
+    & { grid-template-columns: repeat(4, 1fr); }
   }
   & a.card {
     display: block;
@@ -499,7 +716,9 @@ h6:hover a.headerlink {
   }
 }
 
-.text-button {
+/* ---------------------------------------------------------------------- */
+
+.cd-text-button {
   display: inline-flex;
   cursor: pointer;
   touch-action: manipulation;
@@ -555,7 +774,7 @@ h6:hover a.headerlink {
 
 /* ---------------------------------------------------------------------- */
 
-.tCallout {
+.cd-callout {
   --bg-color: rgb(244 244 245);
   --border-color: rgb(212 212 216);
   --text-color: rgb(39 39 42);
@@ -678,12 +897,13 @@ h6:hover a.headerlink {
   }
 }
 /* Cannot be nested */
-.tCallout::selection {
+.cd-callout::selection {
   background-color: oklch(from var(--bg-color) calc(l * 0.9) calc(c * 3) h);
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tExampleTabs {
+.cd-example-tabs {
   position: relative;
   margin-top: 2rem;
   margin-bottom: 3rem;
@@ -720,7 +940,7 @@ h6:hover a.headerlink {
   & .example-tablist:is(.dark *) {
     border-color: rgb(75 85 99);
     background-color: rgb(55 65 81);
-    color: rgb(156 163 175);
+    color: rgb(156 173 175);
   }
 
   & .example-tab {
@@ -753,7 +973,7 @@ h6:hover a.headerlink {
   }
   & .example-tab.ui-selected:is(.dark *) {
     color: white;
-    background-color: black;
+    background-color: #111;
   }
 
   & .example-tabpanel {
@@ -778,8 +998,9 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tFooter {
+.cd-footer {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
   padding-left: var(--cd-padding-left);
@@ -813,6 +1034,16 @@ h6:hover a.headerlink {
   & .themeswitch {
     margin-left: 1.5rem;
     margin-right: 0;
+    opacity: 0.8;
+    border-radius: 1rem;
+    background-color: var(--cd-nav-bg-color);
+    transition: opacity 300ms ease-in-out, background 300ms ease-in-out;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  & .themeswitch:hover {
+    opacity: 1;
+    background-color: var(--cd-nav-bg-color-hover);
   }
   @media (max-width: 640px) {
     & .built-with,
@@ -822,8 +1053,9 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tHeader {
+.cd-header {
   margin-bottom: 2rem;
 
   & div p {
@@ -856,46 +1088,23 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tKey {
-  font-family: var(--cd-font-mono);
-  display: inline-block;
-  padding: 0.2rem 0.25rem;
-  margin-left: 0.1rem;
-  margin-right: 0.1rem;
-  font-size: 0.875rem;
-  line-height: 1;
-  font-weight: 500;
-  letter-spacing: -0.025em;
-  line-height: 1;
-  border-radius: 0.25rem;
-  border-width: 1px;
-  border-color: #ffffff;
-  box-shadow: 0 0 2px 0 #000;
-
-  &:is(.dark *) {
-    border-color: rgb(0 0 0);
-    background-color: rgb(24 24 27);
-  }
-}
-
-
-.tNavBar {
+.cd-navbar {
   display: flex;
   align-items: center;
-  border-radius: 20px;
+  border-radius: 1rem;
+  padding: 0 0.75rem;
   font-size: 0.875rem;
   font-weight: bold;
-  padding: 0 0.75rem;
   backdrop-filter: blur(4px);
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: var(--cd-nav-bg-color);
   box-shadow: rgb(15, 15, 15) 0px 0px 0px 0px inset,
               rgba(163, 163, 170, 0.3) 0px 0px 0px 1px inset,
               rgba(255, 255, 255, 0.2) 0px 20px 25px -5px,
               rgba(255, 255, 255, 0.2) 0px 8px 10px -6px;
 
   &:is(.dark *) {
-    background-color: rgba(41, 37, 36, 0.8);
     box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px inset,
                 rgba(63, 63, 70, 0.3) 0px 0px 0px 1px inset,
                 rgba(0, 0, 0, 0.2) 0px 20px 25px -5px,
@@ -905,25 +1114,26 @@ h6:hover a.headerlink {
   & a {
     white-space: nowrap;
     padding: 0.75rem;
+  }
+  & a,
+  & button {
     opacity: 0.8;
-    border-radius: 4px;
     transition: opacity 300ms ease-in-out, background 300ms ease-in-out;
+    border-radius: 4px;
   }
-  & a:hover {
-    opacity: 1;
-    background-color: rgb(244, 244, 244);
-  }
-  &:is(.dark *) a:hover {
+  & a:hover,
+  & button:hover {
     opacity: 1;
-    background-color: rgba(244, 244, 244, 0.1);
+    background-color: var(--cd-nav-bg-color-hover);
   }
   & a svg {
     height: 20px;
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tNavTop {
+.cd-nav-top {
   z-index: 1000;
   width: 100%;
   margin-top: 1rem;
@@ -948,15 +1158,14 @@ h6:hover a.headerlink {
     padding: 0.75rem;
     margin-left: -0.75rem;
     margin-right: auto;
+    background-color: transparent;
+    transition: background 300ms ease-in-out;
   }
   @media (min-width: 640px) {
     & .logo {
       border-radius: 4px;
       backdrop-filter: blur(4px);
-      background-color: rgba(255, 255, 255, 0.8);
-    }
-    & .logo:is(.dark *) {
-      background-color: rgba(41, 37, 36, 0.8);
+      background-color: var(--cd-nav-bg-color);
     }
   }
 
@@ -969,25 +1178,25 @@ h6:hover a.headerlink {
     }
   }
   & .nav-extra {
-    margin-left: 1rem;
+    margin-left: 0.75rem;
   }
   & .nav-links > .themeswitch {
     border: none;
-    background: none;
     outline: none;
-    margin: 0 0.25rem 0 0.5rem;
+    margin-left: 0.25rem;
   }
-  & .toggleSidebar {
+  & .cd-toggle-sidebar {
     font-size: 1rem;
-    margin-left: 1rem;
+    margin-left: 0.75rem;
     width: 4.5rem;
     line-height: 1;
     padding: 0.75rem 0.5rem;
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tNavGlobal {
+.cd-nav-global {
   /* position: sticky; */
   /* top: 0; */
   z-index: 0;
@@ -1028,44 +1237,46 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tNavLocal {
+.cd-nav-local {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 0;
-  height: 100vh;
-  width: 14rem;
-  padding-bottom: 2rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  -ms-scroll-chaining: none;
-  overscroll-behavior: contain;
-  scroll-behavior: smooth;
+  width: 20rem;
+  height: calc(100vh - 5.5rem);
+  margin-right: -1rem;
   overflow: hidden;
+  border-left-width: 1px;
+  border-color: rgb(228 228 231);
 
   @media ((min-width: 1024px) and (min-height: 640px)) {
     & {
-      top: 3rem;
-      height: calc(100vh - 3rem);
+      top: 5rem;
     }
   }
-
+  &:is(.dark *) {
+    border-color: rgb(82 82 91);
+  }
   & .wrapper {
-    margin-top: 1.5rem;
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -ms-scroll-chaining: none;
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
     border-left-width: 1px;
-    border-color: rgb(228 228 231);
-    padding: 0 0 3.5rem;
+    padding: 1rem 0.5rem 1.5rem 0.5rem;
     font-size: 0.8rem;
     line-height: 1.2;
   }
-  & .wrapper:is(.dark *) {
-    border-color: rgb(82 82 91);
-  }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tNavMobile {
+.cd-nav-mobile {
   position: fixed;
   left: 0;
   top: 0;
@@ -1118,9 +1329,9 @@ h6:hover a.headerlink {
     background: none;
     outline: none;
   }
-  & .toggleSidebar {
+  & .cd-toggle-sidebar {
     font-size: 1rem;
-    margin-left: 1rem;
+    margin-left: 0.75rem;
     width: 4.5rem;
     line-height: 1;
     padding: 0.75rem 0.5rem;
@@ -1140,32 +1351,32 @@ h6:hover a.headerlink {
 }
 /* Transition for the popover's backdrop.
    ::backdrop cannot be nested */
-.tNavMobile::backdrop {
+.cd-nav-mobile::backdrop {
   transition: all 0.5s allow-discrete;
   /* Final state of the exit animation */
   backdrop-filter: blur(0);
   background-color: rgb(0 0 0 / 0%);
 }
-.tNavMobile:popover-open::backdrop {
+.cd-nav-mobile:popover-open::backdrop {
   backdrop-filter: blur(2px);
   background-color: rgb(0 0 0 / 15%);
 }
 @starting-style {
-  .tNavMobile:popover-open::backdrop {
+  .cd-nav-mobile:popover-open::backdrop {
     backdrop-filter: blur(0);
     background-color: rgb(0 0 0 / 0%);
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tPageSingle > main {
+.cd-page-single > main {
   margin: 0;
   max-width: 100%;
   padding: 0;
 }
 
-
-.tPage {
+.cd-page {
   & .page-wrapper {
     z-index: 10;
     margin-left: auto;
@@ -1184,17 +1395,18 @@ h6:hover a.headerlink {
   }
   @media (min-width: 640px) {
     & {
-      padding-bottom: 3rem;
+      padding-bottom: 1rem;
     }
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tPrevNext {
+.cd-prevnext {
   display: flex;
   align-items: stretch;
   width: 100%;
-  margin-top: 4rem;
+  margin-top: 2rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
   padding-left: var(--cd-padding-left);
@@ -1226,20 +1438,23 @@ h6:hover a.headerlink {
   }
   & a.prev:hover,
   & a.next:hover {
-    border-color: black;
+    border-color: rgb(113, 113, 122);
   }
-  & a.prev:is(.dark *):hover,
-  & a.next:is(.dark *):hover {
-    border-color: white;
+  &:is(.dark *) a.prev:hover,
+  &:is(.dark *) a.next:hover {
+    border-color: rgb(150, 150, 150);
   }
   & .section {
-    font-size: 0.8rem;
+    font-size: 0.875rem;
     line-height: 1;
-    color: rgb(113 113 122);
+    color: rgb(113, 113, 122);
     margin-bottom: 0.1rem;
   }
+  &:is(.dark *) .section {
+    color: rgb(150, 150, 150);
+  }
   & .title {
-    font-size: 0.9rem;
+    font-size: 1rem;
     line-height: 1.1;
   }
   & i {
@@ -1250,8 +1465,9 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tThemeSwitch {
+.cd-theme-switch {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1381,8 +1597,11 @@ h6:hover a.headerlink {
   & .light-text,
   & .dark-text  {
     padding: 0.5rem;
+    padding-left: 0;
     display: none;
     white-space: nowrap;
+    font-weight: bold;
+    text-align: left;
   }
   @media (min-width: 1024px) {
     & .light-text {
@@ -1397,8 +1616,9 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tToc {
+.cd-toc {
   & details,
   & section {
     margin-top: 1.5rem;
@@ -1472,8 +1692,9 @@ h6:hover a.headerlink {
   }
 }
 
+/* ---------------------------------------------------------------------- */
 
-.tTocPage {
+.cd-toc-page {
   & a {
     display: flex;
     align-items: center;
@@ -1499,46 +1720,44 @@ h6:hover a.headerlink {
     border-color: var(--cd-brand-color);
   }
 
-  & a.indent-1 { margin-left: 0.5rem; }
-  & a.indent-2 { margin-left: 1rem; }
-  & a.indent-3 { margin-left: 1.5rem; }
-  & a.indent-4 { margin-left: 2rem; }
+  & a.indent-1 { margin-left: 0; }
+  & a.indent-2 { margin-left: 0.5rem; }
+  & a.indent-3 { margin-left: 1rem; }
+  & a.indent-4 { margin-left: 1.5rem; }
+  & a.indent-5 { margin-left: 2rem; }
 }
 
 /* ---------------------------------------------------------------------- */
 
-.tNavGlobal,
-.tNavLocal,
-.tNavMobile {
+.cd-nav-global,
+.cd-nav-local,
+.cd-nav-mobile {
   display: none;
 }
-.tNavMobile:popover-open,
-.tNavTop .toggleSidebar {
+.cd-nav-mobile:popover-open,
+.cd-nav-top .cd-toggle-sidebar {
   display: block;
 }
 
 @media (min-width: 924px) {
-  .tNavMobile,
-  .tNavTop .toggleSidebar {
+  .cd-nav-mobile,
+  .cd-nav-top .cd-toggle-sidebar {
     display: none;
   }
 }
 
 @media (min-width: 924px) {
-  .tPage .page-wrapper > main {
-    padding-left: 2rem;
-  }
-  .tNavGlobal {
+  .cd-nav-global {
     display: block;
   }
 }
 
 @media (min-width: 1024px) {
-  .tPage .page-wrapper > main {
+  .cd-page .page-wrapper > main {
     margin-left: 2.5rem;
     margin-right: 2.5rem;
   }
-  .tNavLocal {
+  .cd-nav-local {
     display: block;
   }
 }
diff --git a/docs/theme/Autodoc.jinja b/docs/theme/Autodoc.jinja
new file mode 100644
index 0000000..e1a967c
--- /dev/null
+++ b/docs/theme/Autodoc.jinja
@@ -0,0 +1,127 @@
+{#def
+  obj: dict | None = None,
+  name: str = "",
+  level: int = 2,
+  members: bool = True,
+#}
+
+{% set obj = obj or autodoc(name) %}
+
+<h{{ level }}>
+  <code class="doc-symbol doc-symbol-{{ obj.symbol }}">{{ obj.symbol }}</code>
+  <span class="doc-oname doc-oname-{{ obj.symbol }}">{{ name or obj.name }}</span>
+  {% if obj.label -%}
+  <small class="doc-olabel doc-olabel-{{ obj.label }}">
+    <code>{{ obj.label }}</code>
+  </small>
+  {%- endif %}
+</h{{ level }}>
+
+{%- if obj.short_description -%}
+<div class="doc-short-description">
+  {{ obj.short_description | markdown | utils.widont }}
+</div>
+{% endif -%}
+
+{%- if obj.signature -%}
+<div class="doc-signature">
+{% filter markdown -%}
+```python
+{{ obj.signature }}
+```
+{%- endfilter %}
+</div>
+{%- endif %}
+
+{% if obj.bases -%}
+<div class="doc-bases">
+  <p>Bases:
+  {%- for base in obj.bases %} <code>{{ base }}</code>{% if not loop.last %}, {% endif %}
+  {%- endfor %}
+  </p>
+</div>
+{%- endif %}
+
+{% if obj.params -%}
+<table class="doc-arguments">
+  <thead><tr><th>Argument</th><th>Description</th></tr>
+  </thead>
+  <tbody>
+{%- for param in obj.params %}
+  <tr>
+    <td><code>{{ param.name }}</code></td>
+    <td>{{ param.description | markdown | utils.widont }}</td>
+  </tr>
+{%- endfor %}
+  </tbody>
+</table>
+{%- endif %}
+
+{%- if obj.description -%}
+<div class="doc-long-description">
+  {{ obj.description | markdown | utils.widont }}
+</div>
+{% endif -%}
+
+{% if obj.examples -%}
+<div class="doc-examples">
+<p><strong>Example:</strong></p>
+
+{% for ex in obj.examples -%}
+<div>
+{% if ex.description %}{{ ex.description | markdown | utils.widont }}{% endif %}
+{% if ex.snippet %}{{ ex.snippet }}{% endif %}
+<div>
+{% endfor -%}
+</div>
+{%- endif %}
+
+{% if obj.returns -%}
+<li class="doc-returns">
+  <p><strong>Returns:</strong></p>
+
+  {% if ex.returns -%}
+    <p>{{ obj.returns }}</p>
+  {%- endif %}
+  {% if ex.many_returns -%}
+  <ul>
+  {% for return in ex.many_returns %}
+    <li>{{ return }}</li>
+  {%- endfor %}
+  </ul>
+  {%- endif %}
+</div>
+{%- endif %}
+
+{% if obj.raises -%}
+  <div class="doc-raises"></div>
+    <p><strong>Raises:</strong></p>
+
+    <ul>
+    {% for raises in obj.raises -%}
+    <li>{{ raises.description | markdown | utils.widont }}<ul>
+    {% endfor -%}
+    </ul>
+  </li>
+{%- endif %}
+
+{% if members -%}
+  {% if obj.attrs or obj.properties-%}
+    <div class="doc-attrs">
+    {% for attr in obj.attrs -%}
+      <Autodoc obj={{ attr }} level={{ level + 1 }} />
+    {% endfor %}
+    {% for attr in obj.properties %}
+      <Autodoc obj={{ attr }} level={{ level + 1 }} />
+    {%- endfor %}
+    </div>
+  {%- endif %}
+
+  {% if obj.methods -%}
+    <div class="doc-methods">
+    {% for method in obj.methods %}
+      <Autodoc obj={{ method }} level={{ level + 1 }} />
+    {%- endfor %}
+    </div>
+  {%- endif %}
+{%- endif %}
\ No newline at end of file
diff --git a/docs/theme/Callout.jinja b/docs/theme/Callout.jinja
index 8330cf5..4279b3a 100644
--- a/docs/theme/Callout.jinja
+++ b/docs/theme/Callout.jinja
@@ -20,7 +20,7 @@
 
 {% if title -%}
 
-<details {{ attrs.render(open=open, class="Callout") }}>
+<details {{ attrs.render(open=open, class="cd-callout", data_component="Callout") }}>
   <summary>
     {% if icon -%}
       <i class="icon">{{ icon }}</i>
@@ -33,7 +33,7 @@
 
 {%- else -%}
 
-<aside {{ attrs.render(class="tCallout") }}>
+<aside {{ attrs.render(class="cd-callout", data_component="Callout") }}>
   {% if icon -%}
   <div class="icon-wrapper">
     <i class="icon">{{ icon }}</i>
diff --git a/docs/theme/ExampleTabs.jinja b/docs/theme/ExampleTabs.jinja
index 34b3dfe..1b3935b 100644
--- a/docs/theme/ExampleTabs.jinja
+++ b/docs/theme/ExampleTabs.jinja
@@ -1,8 +1,8 @@
 {#def prefix, panels={} #}
 
-<div {{ attrs.render(class="tExampleTabs not-prose") }}>
+<div {{ attrs.render(class="cd-example-tabs not-prose", data_component="ExampleTabs") }}>
   <TabGroup class="example-tabgroup">
-    <TabList class="example-tablist">
+    <TabList class="example-tablist" data-md-skip>
       {%- for text in panels.keys() %}
       <Tab
         class="example-tab"
diff --git a/docs/theme/Footer.jinja b/docs/theme/Footer.jinja
index bbfaf19..a9e9c5a 100644
--- a/docs/theme/Footer.jinja
+++ b/docs/theme/Footer.jinja
@@ -1,4 +1,4 @@
-<footer {{ attrs.render(class="tFooter") }}>
+<footer {{ attrs.render(class="cd-footer", data_component="Footer") }}>
   <div class="wrapper">
     <Copyright />
     <div class="built-with">
diff --git a/docs/theme/Header.jinja b/docs/theme/Header.jinja
index 3eb3c7c..c8322df 100644
--- a/docs/theme/Header.jinja
+++ b/docs/theme/Header.jinja
@@ -1,16 +1,17 @@
 {#def title="", section="" #}
 
-{% set section = section or nav.page.section if section != false else None %}
-{% set title = title or nav.page.title %}
+{% set section = section or page.section if section != false else None %}
+{% set title = title or page.title %}
 
-<header {{ attrs.render(class="tHeader not-prose") }}>
+<header {{ attrs.render(
+  class="cd-header not-prose",
+  data_component="Header",
+) }}>
   <div>
     {% if section -%}
-    <p>{{ section }}</p>
+    <p data-md-skip>{{ section }}</p>
     {%- endif %}
-    <h1>
-      <a tabindex="0" href="#">{{ title | utils.widont }}</a>
-    </h1>
+    <h1>{{ title | utils.widont }}</h1>
   </div>
   <p class="description">{{ content | utils.widont }}</p>
 </header>
diff --git a/docs/theme/Key.jinja b/docs/theme/Key.jinja
deleted file mode 100644
index 3ef18d6..0000000
--- a/docs/theme/Key.jinja
+++ /dev/null
@@ -1 +0,0 @@
-<kbd {{ attrs.render(class="tKey") }}>{{ content.strip() }}</kbd>
diff --git a/docs/theme/Layout.jinja b/docs/theme/Layout.jinja
index b9454b8..6de4c6e 100644
--- a/docs/theme/Layout.jinja
+++ b/docs/theme/Layout.jinja
@@ -1,15 +1,21 @@
 {#def title="", description="" #}
 
 <!DOCTYPE html>
-<html lang="{{ nav.page.lang }}" class="light">
+<html lang="{{ page.lang }}" class="light">
 <head>
 <meta charset="utf-8">
-<MetaTags :page="nav.page" />
-{% if nav.prev_page and nav.prev_page.url -%}
-  <link href="{{ nav.prev_page.url }}" rel="prev">
+<MetaTags :page="page" />
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+<link rel="apple-touch-icon" sizes="120x120" href="/static/img/apple-touch-icon.png">
+<link rel="stylesheet" href="/static/theme.css?v={{ utils.timestamp }}">
+<link rel="stylesheet" href="/static/prose.css?v={{ utils.timestamp }}">
+<link rel="stylesheet" href="/static/docs.css?v={{ utils.timestamp }}">
+{{ catalog.render_assets() }}
+{% if page.prev_page and page.prev_page.url -%}
+  <link href="{{ page.prev_page.url }}" rel="prev">
 {% endif -%}
-{% if nav.next_page and nav.next_page.url -%}
-  <link href="{{ nav.next_page.url }}" rel="next">
+{% if page.next_page and page.next_page.url -%}
+  <link href="{{ page.next_page.url }}" rel="next">
 {% endif -%}
 <meta property="generator" content="claydocs" />
 </head>
diff --git a/docs/theme/LinkButton.jinja b/docs/theme/LinkButton.jinja
deleted file mode 100644
index 0db0c63..0000000
--- a/docs/theme/LinkButton.jinja
+++ /dev/null
@@ -1 +0,0 @@
-<a {{ attrs.render(class="LinkButton") }}>{{ content }}</a>
diff --git a/docs/theme/MetaTags.jinja b/docs/theme/MetaTags.jinja
index e2c4327..2639afb 100644
--- a/docs/theme/MetaTags.jinja
+++ b/docs/theme/MetaTags.jinja
@@ -6,14 +6,8 @@
 
 <title>{{ title }}</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-<link rel="apple-touch-icon" sizes="120x120" href="/static/img/apple-touch-icon.png">
-<link rel="stylesheet" href="/static/theme.css?v={{ utils.timestamp }}">
-<link rel="stylesheet" href="/static/prose.css?v={{ utils.timestamp }}">
-<link rel="stylesheet" href="/static/docs.css?v={{ utils.timestamp }}">
-{{ catalog.render_assets() }}
 <meta property="og:type" content="website">
-<meta property="og:url" content="{{ nav.domain }}{{ nav.page.url }}">
+<meta property="og:url" content="{{ nav.domain }}{{ page.url }}">
 <meta property="og:title" content="{{ title }}">
 <meta property="twitter:title" content="{{ title }}">
 {% if description -%}
diff --git a/docs/theme/NavBar.jinja b/docs/theme/NavBar.jinja
index 2c3155f..50f8ca2 100644
--- a/docs/theme/NavBar.jinja
+++ b/docs/theme/NavBar.jinja
@@ -1,3 +1,3 @@
-<nav {{ attrs.render(class="tNavBar") }}>
+<nav {{ attrs.render(class="cd-navbar", data_component="NavBar") }}>
 {{ content }}
 </nav>
\ No newline at end of file
diff --git a/docs/theme/NavGlobal.jinja b/docs/theme/NavGlobal.jinja
index de3b6aa..7a28927 100644
--- a/docs/theme/NavGlobal.jinja
+++ b/docs/theme/NavGlobal.jinja
@@ -1,3 +1,3 @@
-<div {{ attrs.render(class="tNavGlobal scrollbar-thin") }}>
-  <Toc :toc="nav.toc" :page="nav.page" />
+<div {{ attrs.render(class="cd-nav-global scrollbar-thin", data_component="NavGlobal") }}>
+  <Toc :toc="nav.toc" :page="page" />
 </div>
diff --git a/docs/theme/NavLocal.jinja b/docs/theme/NavLocal.jinja
index ff30c93..2af7606 100644
--- a/docs/theme/NavLocal.jinja
+++ b/docs/theme/NavLocal.jinja
@@ -1,5 +1,5 @@
-<div {{ attrs.render(class="tNavLocal scrollbar-thin") }}>
-  <div class="wrapper">
-    <TocPage :page_toc="nav.page_toc" />
+<div {{ attrs.render(class="cd-nav-local", data_component="NavLocal") }}>
+  <div class="wrapper scrollbar-thin">
+    <TocPage :page_toc="page.toc" />
   </div>
 </div>
diff --git a/docs/theme/NavMobile.jinja b/docs/theme/NavMobile.jinja
index aa92c52..dfe6af9 100644
--- a/docs/theme/NavMobile.jinja
+++ b/docs/theme/NavMobile.jinja
@@ -1,18 +1,18 @@
-{% do attrs.set(id="navMobile", class="tNavMobile") %}
+{% do attrs.set(id="navMobile", class="cd-nav-mobile", data_component="NavMobile") %}
 
 <Popover :__attrs="attrs">
   <header>
-    <Logo :base_url="nav.base_url" class="logo" />
-    <NavBar class="nav-links">
+    <Logo :base_url="page.base_url" class="logo" />
+    <nav class="cd-navbar nav-links">
       <ThemeSwitch class="themeswitch" :text="false" />
-    </NavBar>
+    </nav>
     <PopButton
       target="navMobile"
       action="close"
       title="Close menu"
-      class="text-button toggleSidebar"
+      class="cd-toggle-sidebar"
     >Close</PopButton>
   </header>
 
-  <Toc class="toc" :toc="nav.toc" :page="nav.page" />
+  <Toc class="toc" :toc="nav.toc" :page="page" />
 </Popover>
diff --git a/docs/theme/NavTop.jinja b/docs/theme/NavTop.jinja
index 18998fe..7ee0052 100644
--- a/docs/theme/NavTop.jinja
+++ b/docs/theme/NavTop.jinja
@@ -1,17 +1,17 @@
-<section class="tNavTop">
+<section class="cd-nav-top", data_component="NavTop">
   <div class="wrapper">
-    <Logo class="logo" :base_url="nav.base_url" />
-    <NavBar class="nav-links">
+    <Logo class="logo" :base_url="page.base_url" />
+    <nav class="cd-navbar nav-links">
       <NavLinks />
       <ThemeSwitch class="themeswitch" :text="false" />
-    </NavBar>
-    <NavBar class="nav-extra">
+    </nav>
+    <nav class="nav-extra">
       <NavExtra />
-    </NavBar>
+    </nav>
     <PopButton
       target="navMobile"
       title="Show menu"
-      class="text-button toggleSidebar"
+      class="cd-toggle-sidebar"
     >Menu</PopButton>
   </div>
 </section>
diff --git a/docs/theme/Page.jinja b/docs/theme/Page.jinja
index 3cfd6e1..38b31c0 100644
--- a/docs/theme/Page.jinja
+++ b/docs/theme/Page.jinja
@@ -1,18 +1,18 @@
 <Layout
-  :title="nav.page.title"
-  :description="nav.page.description"
-  :class="meta.get('class', 'tPage')"
+  :title="page.title"
+  :description="page.description"
+  :class="meta.get('class', 'cd-page')"
 >
   <NavTop></NavTop>
   <div class="page-wrapper">
     <NavGlobal></NavGlobal>
-    <main class="page prose">{{ content }}</main>
+    <main id="main" class="page prose">{{ content }}</main>
     <NavLocal></NavLocal>
   </div>
   <PrevNext
-    :curr="nav.page"
-    :prev="nav.prev_page"
-    :next="nav.next_page"
+    :curr="page"
+    :prev="page.prev_page"
+    :next="page.next_page"
   />
   <NavMobile></NavMobile>
   <Footer></Footer>
diff --git a/docs/theme/PageSingle.jinja b/docs/theme/PageSingle.jinja
index c4034b4..18b61f6 100644
--- a/docs/theme/PageSingle.jinja
+++ b/docs/theme/PageSingle.jinja
@@ -1,7 +1,7 @@
 <Layout
-  :title="nav.page.title"
-  :description="nav.page.description"
-  :class="meta.get('class', 'tPageSingle')"
+  :title="page.title"
+  :description="page.description"
+  :class="meta.get('class', 'cd-page-single')"
 >
   <NavTop />
   <main>{{ content }}</main>
diff --git a/docs/theme/PrevNext.jinja b/docs/theme/PrevNext.jinja
index e65c84e..9c6a572 100644
--- a/docs/theme/PrevNext.jinja
+++ b/docs/theme/PrevNext.jinja
@@ -1,6 +1,6 @@
 {#def curr, prev, next #}
 
-<nav {{ attrs.render(class="tPrevNext") }}>
+<nav {{ attrs.render(class="cd-prevnext", data_component="PrevNext") }}>
   {% if prev.url -%}
   <a href="{{ prev.url }}" class="prev">
     <i>&larr;</i>
diff --git a/docs/theme/Source.jinja b/docs/theme/Source.jinja
new file mode 100644
index 0000000..c742f56
--- /dev/null
+++ b/docs/theme/Source.jinja
@@ -0,0 +1,24 @@
+{# def url: str, label: str = "" #}
+{% do attrs.set(href=url, target="_blank") %}
+{% set icon = url.replace("http://", "").replace("https://", "").split(".")[0] %}
+
+<a {{ attrs.render(class="cd-source", data_component="Source") }}>
+  <div class="cd-source__icon">
+    {% if icon == "github" -%}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+    {% elif icon == "gitlab" -%}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+    {%- else -%}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+    {%- endif %}
+  </div>
+  <div class="cd-source__repo">
+    <span class="cd-source__label">{{ label or url.split("/", 3)[-1] }}</span>
+    <ul class="cd-source__facts">
+      <li data-fact="version" hidden></li>
+      <li data-fact="stars" hidden></li>
+      <li data-fact="forks" hidden></li>
+      <li data-fact="numrepos" hidden></li>
+    </ul>
+  </div>
+</a>
\ No newline at end of file
diff --git a/docs/theme/Source.js b/docs/theme/Source.js
new file mode 100644
index 0000000..e627460
--- /dev/null
+++ b/docs/theme/Source.js
@@ -0,0 +1,123 @@
+const ATTR_FACT = "data-fact";
+const CLASS_FACTS = "cd-source__facts";
+const CLASS_FACTS_VISIBLE = `${CLASS_FACTS}--visible`;
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll('[data-component="Source"]').forEach(showFacts);
+});
+
+function showFacts(node) {
+  function renderFacts(facts) {
+    Array.from(node.querySelectorAll(`[${ATTR_FACT}]`))
+    .forEach(function(node) {
+      const name = node.getAttribute(ATTR_FACT);
+      if (facts[name]) {
+        node.removeAttribute("hidden");
+        node.innerText = facts[name];
+      }
+    });
+
+    node.querySelector(`.${CLASS_FACTS}`).classList.add(CLASS_FACTS_VISIBLE);
+  }
+
+  getSourceFacts(node.href, renderFacts);
+}
+
+function getSourceFacts(url, callback) {
+  const key = `Source:${url}`;
+  let facts = sessionStorage.getItem(key);
+  if (facts) {
+    callback(JSON.parse(facts));
+    return;
+  }
+
+  fetchSourceFacts(url)
+  .then((facts) => {
+    if (facts && Object.keys(facts).length) {
+      sessionStorage.setItem(key, JSON.stringify(facts));
+      callback(facts);
+    }
+  });
+}
+
+function fetchJSON(url) {
+  return fetch(url)
+    .then(response => response.json())
+    .catch((error) => {
+      console.log(error);
+    });
+}
+
+function fetchSourceFacts(url) {
+  /* Try to match GitHub repository */
+  let match = url.match(/^.+github\.com\/([^/]+)\/?([^/]+)?/i);
+  if (match) {
+    const [, user, repo] = match;
+    return fetchSourceFactsFromGitHub(user, repo);
+  }
+
+  /* Try to match GitLab repository */
+  match = url.match(/^.+?([^/]*gitlab[^/]+)\/(.+?)\/?$/i);
+  if (match) {
+    const [, base, slug] = match;
+    return fetchSourceFactsFromGitLab(base, slug);
+  }
+
+  /* Fallback */
+  return null;
+}
+
+function fetchSourceFactsFromGitLab(base, project) {
+  const url = `https://${base}/api/v4/projects/${encodeURIComponent(project)}`
+
+  fetchJSON(url)
+  .then(function({ star_count, forks_count }) {
+    return {
+      stars: star_count,
+      forks: forks_count,
+    };
+  });
+}
+
+function fetchSourceFactsFromGitHub (user, repo) {
+  if (typeof repo === "undefined") {
+    return fetchSourceFactsFromGitHubOrg(user);
+  } else {
+    return fetchSourceFactsFromGitHubRepo(user, repo);
+  }
+}
+
+function fetchSourceFactsFromGitHubOrg(user) {
+  const url = `https://api.github.com/users/${user}`
+
+  fetchJSON(url)
+  .then(function(data) {
+    return {
+      numrepos: data.public_repos,
+    };
+  });
+}
+
+function fetchSourceFactsFromGitHubRepo(user, repo) {
+  const url = `https://api.github.com/repos/${user}/${repo}`
+
+  const release = fetchJSON(`${url}/releases/latest`)
+  .then((data) => {
+    return {
+      version: data.tag_name,
+    };
+  });
+
+  const info = fetchJSON(url)
+  .then((data) => {
+    return {
+      stars: data.stargazers_count,
+      forks: data.forks_count,
+    };
+  });
+
+  return Promise.all([release, info])
+  .then(([release, info]) => {
+    return { ...release, ...info };
+  });
+}
diff --git a/docs/theme/Test.jinja b/docs/theme/Test.jinja
index 57a4cc6..55376ea 100644
--- a/docs/theme/Test.jinja
+++ b/docs/theme/Test.jinja
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html>
-<head><MetaTags :page="nav.page" /></head><body class="prose">
+<head><MetaTags :page="page" /></head><body class="prose">
 
 {{ content }}
 
diff --git a/docs/theme/ThemeSwitch.jinja b/docs/theme/ThemeSwitch.jinja
index 33570dd..3543b73 100644
--- a/docs/theme/ThemeSwitch.jinja
+++ b/docs/theme/ThemeSwitch.jinja
@@ -1,7 +1,8 @@
 {#def text=true #}
 
 <button {{ attrs.render(
-  class="tThemeSwitch text-button",
+  class="cd-theme-switch",
+  data_component="ThemeSwitch",
   title="Toggle light & dark mode",
   aria_label="auto",
   aria_live="polite",
diff --git a/docs/theme/ThemeSwitch.js b/docs/theme/ThemeSwitch.js
index ee4c8b7..c8b2847 100644
--- a/docs/theme/ThemeSwitch.js
+++ b/docs/theme/ThemeSwitch.js
@@ -1,6 +1,6 @@
 import { on } from "./jxui.js";
 
-const SEL_TARGET = ".tThemeSwitch";
+const SEL_TARGET = ".cd-theme-switch";
 const STORAGE_KEY = "theme";
 
 const DARK = "dark";
diff --git a/docs/theme/Toc.jinja b/docs/theme/Toc.jinja
index 8a461d5..2670b62 100644
--- a/docs/theme/Toc.jinja
+++ b/docs/theme/Toc.jinja
@@ -40,6 +40,6 @@
 {% endmacro %}
 
 
-<div {{ attrs.render(class="tToc") }}>
+<div {{ attrs.render(class="cd-toc", data_component="Toc") }}>
   {{ render_children(toc, collapsable=False) }}
 </div>
\ No newline at end of file
diff --git a/docs/theme/TocPage.jinja b/docs/theme/TocPage.jinja
index 8bdad51..bca5c92 100644
--- a/docs/theme/TocPage.jinja
+++ b/docs/theme/TocPage.jinja
@@ -2,16 +2,16 @@
 
 {% macro render_sub_items(pages) %}
 {%- for section in pages %}
-  <li><a href="#{{ section.id }}" class="indent-{{ section.level }}">{{ section.name | e }}</a></li>
+  <li><a href="#{{ section.id }}" class="indent-{{ section.level }}">{{ section.name }}</a></li>
   {% if section.level <= max_depth -%}
     {{ render_sub_items(section.children) }}
   {%- endif %}
 {%- endfor %}
 {% endmacro %}
 
-<ul {{ attrs.render(class="tTocPage") }}>
+<ul {{ attrs.render(class="cd-toc-page", data_component="TocPage") }}>
 {%- for section in page_toc %}
-  <li><a href="#{{ section.id }}">{{ section.name | e }}</a></li>
+  <li><a href="#{{ section.id }}">{{ section.name }}</a></li>
   {{ render_sub_items(section.children) }}
 {%- endfor %}
 </ul>
diff --git a/docs/theme/TocPage.js b/docs/theme/TocPage.js
index a995dfb..3ce5e02 100644
--- a/docs/theme/TocPage.js
+++ b/docs/theme/TocPage.js
@@ -1,7 +1,7 @@
 import { on } from "./jxui.js";
 
 const ACTIVE = "active";
-const SEL_TARGET = ".tTocPage a";
+const SEL_TARGET = ".cd-toc-page a";
 const SEL_ACTIVE = `${SEL_TARGET}.${ACTIVE}`;
 const SEL_SECTIONS = "main.page section[id]";
 
@@ -23,13 +23,13 @@ function deActivateAll() {
 export function scrollSpy() {
   const labels = {};
   Array.from(document.querySelectorAll(SEL_TARGET)).forEach(function(aNode){
-    labels[aNode.href.slice(1)] = aNode;
+    labels[aNode.href.split("#").slice(-1)] = aNode;
   });
 
   function observe(entries) {
     for(const entry of entries) {
       if (entry.isIntersecting) {
-        const aNode = labels[entry.id];
+        const aNode = labels[entry.target.id];
         if (aNode) {
           deActivateAll();
           aNode.classList.add(ACTIVE)
@@ -37,13 +37,13 @@ export function scrollSpy() {
       }
     }
   }
-
   const observer = new IntersectionObserver(observe, {rootMargin: "-50% 0px"});
-
   const sections = document.querySelectorAll(SEL_SECTIONS);
-  for (let i = 0; i < sections.length; i++)
+  console.log(labels);
+  console.log(sections);
+  for (let i=0; i<sections.length; i++) {
     observer.observe(sections[i]);
+  }
 }
 
-window.onload = scrollSpy;
-
+document.addEventListener("DOMContentLoaded", scrollSpy);
diff --git a/docs/theme/svg/github.svg b/docs/theme/svg/github.svg
deleted file mode 100644
index 977cd8b..0000000
--- a/docs/theme/svg/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="currentColor" height="26px" style="margin-top:-2px;display:inline" viewBox="0 0 45 44" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22.477.927C10.485.927.76 10.65.76 22.647c0 9.596 6.223 17.736 14.853 20.608 1.087.2 1.483-.47 1.483-1.047 0-.516-.019-1.881-.03-3.693-6.04 1.312-7.315-2.912-7.315-2.912-.988-2.51-2.412-3.178-2.412-3.178-1.972-1.346.149-1.32.149-1.32 2.18.154 3.327 2.24 3.327 2.24 1.937 3.318 5.084 2.36 6.321 1.803.197-1.403.759-2.36 1.379-2.903-4.823-.548-9.894-2.412-9.894-10.734 0-2.37.847-4.31 2.236-5.828-.224-.55-.969-2.759.214-5.748 0 0 1.822-.584 5.972 2.226 1.732-.482 3.59-.722 5.437-.732 1.845.01 3.703.25 5.437.732 4.147-2.81 5.967-2.226 5.967-2.226 1.185 2.99.44 5.198.217 5.748 1.392 1.517 2.232 3.457 2.232 5.828 0 8.344-5.078 10.18-9.916 10.717.779.67 1.474 1.996 1.474 4.021 0 2.904-.027 5.247-.027 5.96 0 .58.392 1.256 1.493 1.044C37.981 40.375 44.2 32.24 44.2 22.647c0-11.996-9.726-21.72-21.722-21.72" fill="currentColor" fill-rule="evenodd"></path></svg>
diff --git a/src/jinjax/__init__.py b/src/jinjax/__init__.py
index 22722e4..e30f39b 100644
--- a/src/jinjax/__init__.py
+++ b/src/jinjax/__init__.py
@@ -2,4 +2,4 @@
 from .component import Component  # noqa
 from .exceptions import *  # noqa
 from .jinjax import JinjaX  # noqa
-from .html_attrs import HTMLAttrs  # noqa
+from .html_attrs import HTMLAttrs, LazyString  # noqa
diff --git a/src/jinjax/catalog.py b/src/jinjax/catalog.py
index 5a8088f..2a877be 100644
--- a/src/jinjax/catalog.py
+++ b/src/jinjax/catalog.py
@@ -14,8 +14,6 @@
 from .utils import DELIMITER, SLASH, get_url_prefix, logger
 
 
-TFileExt = t.Union[tuple[str, ...], str]
-
 DEFAULT_URL_ROOT = "/static/components/"
 ALLOWED_EXTENSIONS = (".css", ".js", ".mjs")
 DEFAULT_PREFIX = ""
@@ -26,32 +24,77 @@
 
 class Catalog:
     """
-    Attributes:
+    The object that manages the components and their global settings.
+
+    Arguments:
 
         globals:
+            Dictionary of Jinja globals to add to the Catalog's Jinja environment
+            (or the one passed in `jinja_env`).
 
         filters:
+            Dictionary of Jinja filters to add to the Catalog's Jinja environment
+            (or the one passed in `jinja_env`).
 
         tests:
+            Dictionary of Jinja tests to add to the Catalog's Jinja environment
+            (or the one passed in `jinja_env`).
 
         extensions:
+            List of Jinja extensions to add to the Catalog's Jinja environment
+            (or the one passed in `jinja_env`). The `jinja2.ext.do` extension is
+            always added at the end of these.
 
         jinja_env:
+            Custom Jinja environment to use. This argument is useful to reuse an
+            existing Jinja Environment from your web framework.
 
         root_url:
+            Add this prefix to every asset URL of the static middleware. By default,
+            it is `/static/components/`, so, for example, the URL of the CSS file of
+            a `Card` component is `/static/components/Card.css`.
+
+            You can also change this argument so the assets are requested from a
+            Content Delivery Network (CDN) in production, for example,
+            `root_url="https://example.my-cdn.com/"`.
 
         file_ext:
+            The extensions the components files have. By default, ".jinja".
+
+            This argument can also be a list to allow more than one type of file to
+            be a component.
+
+        use_cache:
+            Cache the metadata of the component in memory.
+
+        auto_reload:
+            Used with `use_cache`. If `True`, the last-modified date of the component
+            file is checked every time to see if the cache is up-to-date.
+
+            Set to `False` in production.
+
+        fingerprint:
+            If `True`, inserts a hash of the updated time into the URL of the
+            asset files (after the name but before the extension).
 
-        fingerprint [False]:
-            If True, adds, insert a hash of the updated time to the URL of the
-            asset files (after the name of,but before the extension).
             This strategy encourages long-term caching while ensuring that new copies
-            are only requested when the content changes, as any modification alter
-            the fingerprint and thus the filename.
+            are only requested when the content changes, as any modification alters the
+            fingerprint and thus the filename.
 
-            *WARNING*: Only works if the server know how to filter the fingerprint
+            **WARNING**: Only works if the server knows how to filter the fingerprint
             to get the real name of the file.
 
+    Attributes:
+
+        collected_css:
+            List of CSS paths collected during a render.
+
+        collected_js:
+            List of JS paths collected during a render.
+
+        prefixes:
+            Mapping between folder prefixes and the Jinja loader that uses.
+
     """
 
     __slots__ = (
@@ -63,8 +106,8 @@ class Catalog:
         "collected_css",
         "collected_js",
         "auto_reload",
-        "tmpl_globals",
         "use_cache",
+        "_tmpl_globals",
         "_cache",
     )
 
@@ -77,7 +120,7 @@ def __init__(
         extensions: "list | None" = None,
         jinja_env: "jinja2.Environment | None" = None,
         root_url: str = DEFAULT_URL_ROOT,
-        file_ext: TFileExt = DEFAULT_EXTENSION,
+        file_ext: "str | tuple[str, ...]" = DEFAULT_EXTENSION,
         use_cache: bool = True,
         auto_reload: bool = True,
         fingerprint: bool = False,
@@ -120,11 +163,14 @@ def __init__(
 
         self.jinja_env = env
 
-        self.tmpl_globals: "t.MutableMapping[str, t.Any] | None" = None
+        self._tmpl_globals: "t.MutableMapping[str, t.Any] | None" = None
         self._cache: dict[str, dict] = {}
 
     @property
     def paths(self) -> list[Path]:
+        """
+        A helper property that returns a list of all the components folder paths.
+        """
         _paths = []
         for loader in self.prefixes.values():
             _paths.extend(loader.searchpath)
@@ -136,6 +182,31 @@ def add_folder(
         *,
         prefix: str = DEFAULT_PREFIX,
     ) -> None:
+        """
+        Add a folder path from where to search for components, optionally under a prefix.
+
+        The prefix acts like a namespace. For example, the name of a
+        `components/Card.jinja` component is, by default, "Card",
+        but under the prefix "common", it becomes "common.Card".
+
+        The rule for subfolders remains the same: a `components/wrappers/Card.jinja`
+        name is, by default, "wrappers.Card", but under the prefix "common",
+        it becomes "common.wrappers.Card".
+
+        If there is more than one component with the same name in multiple
+        added folders under the same prefix, the one in the folder added
+        first takes precedence.
+
+        Arguments:
+
+            root_path:
+                Absolute path of the folder with component files.
+
+            prefix:
+                Optional prefix that all the components in the folder will
+                have. The default is empty.
+
+        """
         prefix = prefix.strip().strip(f"{DELIMITER}{SLASH}").replace(SLASH, DELIMITER)
 
         root_path = str(root_path)
@@ -150,28 +221,68 @@ def add_folder(
             self.prefixes[prefix] = jinja2.FileSystemLoader(root_path)
 
     def add_module(self, module: t.Any, *, prefix: str | None = None) -> None:
-        mprefix = prefix if prefix is not None else getattr(module, "prefix", DEFAULT_PREFIX)
+        """
+        Reads an absolute path from `module.components_path` and an optional prefix
+        from `module.prefix`, then calls `Catalog.add_folder(path, prefix)`.
+
+        The prefix can also be passed as an argument instead of being read from
+        the module.
+
+        This method exists to make it easy and consistent to have
+        components installable as Python libraries.
+
+        Arguments:
+
+            module:
+                A Python module.
+
+            prefix:
+                An optional prefix that replaces the one the module
+                might include.
+
+        """
+        mprefix = (
+            prefix if prefix is not None else getattr(module, "prefix", DEFAULT_PREFIX)
+        )
         self.add_folder(module.components_path, prefix=mprefix)
 
     def render(
         self,
+        /,
         __name: str,
         *,
         caller: "t.Callable | None" = None,
         **kw,
     ) -> str:
+        """
+        Resets the `collected_css` and `collected_js` lists and renders the
+        component and subcomponents inside of it.
+
+        This is the method you should call to render a parent component from a
+        view/controller in your app.
+
+        """
         self.collected_css = []
         self.collected_js = []
-        self.tmpl_globals = kw.pop("__globals", None)
+        self._tmpl_globals = kw.pop("__globals", None)
         return self.irender(__name, caller=caller, **kw)
 
     def irender(
         self,
+        /,
         __name: str,
         *,
         caller: "t.Callable | None" = None,
         **kw,
     ) -> str:
+        """
+        Renders the component and subcomponents inside of it **without**
+        resetting the `collected_css` and `collected_js` lists.
+
+        This is the method you should call to render individual components that
+        are later inserted into a parent template.
+
+        """
         content = (kw.pop("__content", "") or "").strip()
         attrs = kw.pop("__attrs", None) or {}
         file_ext = kw.pop("__file_ext", "")
@@ -237,6 +348,23 @@ def get_middleware(
         allowed_ext: "t.Iterable[str] | None" = ALLOWED_EXTENSIONS,
         **kwargs,
     ) -> ComponentsMiddleware:
+        """
+        Wraps you application with [Withenoise](https://whitenoise.readthedocs.io/),
+        a static file serving middleware.
+
+        Tecnically not neccesary if your components doesn't use static assets
+        or if you serve them by other means.
+
+        Arguments:
+
+            application:
+                A WSGI application
+
+            allowed_ext:
+                A list of file extensions the static middleware is allowed to read
+                and return. By default, is just ".css", ".js", and ".mjs".
+
+        """
         logger.debug("Creating middleware")
         middleware = ComponentsMiddleware(
             application=application, allowed_ext=tuple(allowed_ext or []), **kwargs
@@ -249,12 +377,23 @@ def get_middleware(
 
         return middleware
 
-    def get_source(self, cname: str, file_ext: TFileExt = "") -> str:
+    def get_source(self, cname: str, file_ext: "tuple[str, ...] | str" = "") -> str:
+        """
+        A helper method that returns the source file of a component.
+        """
         prefix, name = self._split_name(cname)
         path, _ = self._get_component_path(prefix, name, file_ext=file_ext)
         return path.read_text()
 
-    def render_assets(self, fingerprint: bool = False) -> str:
+    def render_assets(self) -> str:
+        """
+        Uses the `collected_css` and `collected_js` lists to generate
+        an HTML fragment with `<link rel="stylesheet" href="{url}">`
+        and `<script type="module" src="{url}"></script>` tags.
+
+        The URLs are prepended by `root_url` unless they begin with
+        "http://" or "https://".
+        """
         html_css = []
         for url in self.collected_css:
             if not url.startswith(("http://", "https://")):
@@ -288,7 +427,7 @@ def _fingerprint(self, root: Path, filename: str) -> str:
         return f"{parent}{stem}-{fingerprint}{ext}"
 
     def _get_from_source(self, *, name: str, prefix: str, source: str) -> Component:
-        tmpl = self.jinja_env.from_string(source, globals=self.tmpl_globals)
+        tmpl = self.jinja_env.from_string(source, globals=self._tmpl_globals)
         component = Component(name=name, prefix=prefix, source=source, tmpl=tmpl)
         return component
 
@@ -297,7 +436,7 @@ def _get_from_cache(self, *, prefix: str, name: str, file_ext: str) -> Component
         cache = self._from_cache(key)
         if cache:
             component = Component.from_cache(
-                cache, auto_reload=self.auto_reload, globals=self.tmpl_globals
+                cache, auto_reload=self.auto_reload, globals=self._tmpl_globals
             )
             if component:
                 return component
@@ -320,7 +459,7 @@ def _to_cache(self, key: str, component: Component) -> None:
     def _get_from_file(self, *, prefix: str, name: str, file_ext: str) -> Component:
         path, tmpl_name = self._get_component_path(prefix, name, file_ext=file_ext)
         component = Component(name=name, prefix=prefix, path=path)
-        component.tmpl = self.jinja_env.get_template(tmpl_name, globals=self.tmpl_globals)
+        component.tmpl = self.jinja_env.get_template(tmpl_name, globals=self._tmpl_globals)
         return component
 
     def _split_name(self, cname: str) -> tuple[str, str]:
@@ -334,7 +473,7 @@ def _split_name(self, cname: str) -> tuple[str, str]:
         return DEFAULT_PREFIX, cname
 
     def _get_component_path(
-        self, prefix: str, name: str, file_ext: TFileExt = ""
+        self, prefix: str, name: str, file_ext: "tuple[str, ...] | str" = ""
     ) -> tuple[Path, str]:
         name = name.replace(DELIMITER, SLASH)
         root_paths = self.prefixes[prefix].searchpath
diff --git a/src/jinjax/component.py b/src/jinjax/component.py
index 7bdb176..c4f37a5 100644
--- a/src/jinjax/component.py
+++ b/src/jinjax/component.py
@@ -62,6 +62,8 @@ def is_valid_variable_name(name):
 
 
 class Component:
+    """Internal class
+    """
     __slots__ = (
         "name",
         "prefix",
diff --git a/src/jinjax/exceptions.py b/src/jinjax/exceptions.py
index 622ff87..b1fd97f 100644
--- a/src/jinjax/exceptions.py
+++ b/src/jinjax/exceptions.py
@@ -1,20 +1,37 @@
 class ComponentNotFound(Exception):
+    """
+    Raised when JinjaX can't find a component by name in none of the
+    added folders, probably because of a typo.
+    """
+
     def __init__(self, name: str) -> None:
         msg = f"File with pattern `{name}` not found"
         super().__init__(msg)
 
 
 class MissingRequiredArgument(Exception):
+    """
+    Raised when a component is used/invoked without passing one or more
+    of its required arguments (those without a default value).
+    """
+
     def __init__(self, component: str, arg: str) -> None:
         msg = f"`{component}` component requires a `{arg}` argument"
         super().__init__(msg)
 
 
 class DuplicateDefDeclaration(Exception):
+    """
+    Raised when a component has more then one `{#def ... #}` declarations.
+    """
+
     def __init__(self, component: str) -> None:
         msg = "`" + str(component) + "` has two `{#def ... #}` declarations"
         super().__init__(msg)
 
 
 class InvalidArgument(Exception):
-    pass
+    """
+    Raised when the arguments passed to the component cannot be parsed
+    by JinjaX because of an invalid syntax.
+    """
diff --git a/src/jinjax/html_attrs.py b/src/jinjax/html_attrs.py
index 3017b32..8b4bd35 100644
--- a/src/jinjax/html_attrs.py
+++ b/src/jinjax/html_attrs.py
@@ -1,7 +1,7 @@
 import re
+import typing as t
 from collections import UserString
 from functools import cached_property
-from typing import Any
 
 from markupsafe import Markup
 
@@ -27,8 +27,10 @@ def quote(text: str) -> str:
 
 
 class LazyString(UserString):
-    """Behave like regular strings, but the actual casting of the initial value
-    is deferred until the value is actually required."""
+    """
+    Behave like regular strings, but the actual casting of the initial value
+    is deferred until the value is actually required.
+    """
 
     __slots__ = ("_seq",)
 
@@ -41,13 +43,27 @@ def data(self):  # type: ignore
 
 
 class HTMLAttrs:
-    def __init__(self, attrs) -> None:
+    """
+    Contains all the HTML attributes/properties (a property is an
+    attribute without a value) passed to a component but that weren't
+    in the declared attributes list.
+
+    For HTML classes you can use the name "classes" (instead of "class")
+    if you need to.
+
+    **NOTE**: The string values passed to this class, are not cast to `str` until
+    the string representation is actually needed, for example when
+    `attrs.render()` is invoked.
+
+    """
+
+    def __init__(self, attrs: "dict[str, t.Any| LazyString]") -> None:
         attributes: "dict[str, str | LazyString]" = {}
         properties: set[str] = set()
 
         class_names = split(" ".join([
-            attrs.pop(CLASS_KEY, ""),
-            attrs.get(CLASS_ALT_KEY, ""),
+            str(attrs.pop(CLASS_KEY, "")),
+            str(attrs.get(CLASS_ALT_KEY, "")),
         ]))
         self.__classes = {name for name in class_names if name}
 
@@ -63,21 +79,59 @@ def __init__(self, attrs) -> None:
 
     @property
     def classes(self) -> str:
+        """
+        All the HTML classes alphabetically sorted and separated by a space.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"class": "italic bold bg-blue wide abcde"})
+            attrs.set(class="bold text-white")
+            print(attrs.classes)
+            abcde bg-blue bold italic text-white wide
+            ```
+
+        """
         return " ".join(sorted((self.__classes)))
 
     @property
-    def as_dict(self) -> dict[str, Any]:
+    def as_dict(self) -> dict[str, t.Any]:
+        """
+        An ordered dict of all the attributes and properties, both
+        sorted by name before join.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({
+            "class": "lorem ipsum",
+            "data_test": True,
+            "hidden": True,
+            "aria_label": "hello",
+            "id": "world",
+            })
+            attrs.as_dict
+            {
+                "aria_label": "hello",
+                "class": "ipsum lorem",
+                "id": "world",
+                "data_test": True,
+                "hidden": True
+            }
+            ```
+
+        """
         attributes = self.__attributes.copy()
         classes = self.classes
         if classes:
             attributes[CLASS_KEY] = classes
 
-        out: dict[str, Any] = dict(sorted(attributes.items()))
+        out: dict[str, t.Any] = dict(sorted(attributes.items()))
         for name in sorted((self.__properties)):
             out[name] = True
         return out
 
-    def __getitem__(self, name: str) -> Any:
+    def __getitem__(self, name: str) -> t.Any:
         return self.get(name)
 
     def __delitem__(self, name: str) -> None:
@@ -88,13 +142,34 @@ def __str__(self) -> str:
 
     def set(self, **kw) -> None:
         """
-        Sets an attribute or property:
-        - Pass a name and a value to set an attribute
-        - Use `True` as value to set a property
+        Sets an attribute or property
+
+        - Pass a name and a value to set an attribute (e.g. `type="text"`)
+        - Use `True` as a value to set a property (e.g. `disabled`)
         - Use `False` to remove an attribute or property
+        - If the attribute is "class", the new classes are appended to
+          the old ones (if not repeated) instead of replacing them.
+        - The underscores in the names will be translated automatically to dashes,
+          so `aria_selected` becomes the attribute `aria-selected`.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"secret": "qwertyuiop"})
+            attrs.set(secret=False)
+            attrs.as_dict
+            {}
+
+            attrs.set(unknown=False, lorem="ipsum", count=42, data_good=True)
+            attrs.as_dict
+            {"count":42, "lorem":"ipsum", "data_good": True}
+
+            attrs = HTMLAttrs({"class": "b c a"})
+            attrs.set(class="c b f d e")
+            attrs.as_dict
+            {"class": "a b c d e f"}
+            ```
 
-        If the attribute is "class", the new classes are appended to
-        the old ones instead of replacing them.
         """
         for name, value in kw.items():
             name = name.replace("_", "-")
@@ -111,8 +186,21 @@ def set(self, **kw) -> None:
 
     def setdefault(self, **kw) -> None:
         """
-        Adds an attribute or sets a property, but only if it's not
-        already present. Doesn't work with properties.
+        Adds an attribute, but only if it's not already present.
+
+        The underscores in the names will be translated automatically to dashes,
+        so `aria_selected` becomes the attribute `aria-selected`.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"lorem": "ipsum"})
+            attrs.setdefault(tabindex=0, lorem="meh")
+            attrs.as_dict
+            # "tabindex" changed but "lorem" didn't
+            {"lorem": "ipsum", tabindex: 0}
+            ```
+
         """
         for name, value in kw.items():
             if value in (True, False, None):
@@ -127,18 +215,64 @@ def setdefault(self, **kw) -> None:
                 self.set(**{name: value})
 
     def add_class(self, *values: str) -> None:
+        """
+        Adds one or more classes to the list of classes, if not already present.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"class": "a b c"})
+            attrs.add_class("c", "d")
+            attrs.as_dict
+            {"class": "a b c d"}
+            ```
+
+        """
         for names in values:
             for name in split(names):
                 self.__classes.add(name)
 
     def remove_class(self, *names: str) -> None:
+        """
+        Removes one or more classes from the list of classes.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"class": "a b c"})
+            attrs.remove_class("c", "d")
+            attrs.as_dict
+            {"class": "a b"}
+            ```
+
+        """
         for name in names:
             self.__classes.remove(name)
 
-    def get(self, name: str, default: Any = None) -> Any:
+    def get(self, name: str, default: t.Any = None) -> t.Any:
         """
         Returns the value of the attribute or property,
-        or the default value if it doesn't exists."""
+        or the default value if it doesn't exists.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"lorem": "ipsum", "hidden": True})
+
+            attrs.get("lorem", defaut="bar")
+            'ipsum'
+
+            attrs.get("foo")
+            None
+
+            attrs.get("foo", defaut="bar")
+            'bar'
+
+            attrs.get("hidden")
+            True
+            ```
+
+        """
         name = name.replace("_", "-")
         if name in CLASS_KEYS:
             return self.classes
@@ -148,22 +282,37 @@ def get(self, name: str, default: Any = None) -> Any:
             return True
         return default
 
-    def _remove(self, name: str) -> None:
-        """
-        Removes an attribute or property."""
-        if name in CLASS_KEYS:
-            self.__classes = set()
-        if name in self.__attributes:
-            del self.__attributes[name]
-        if name in self.__properties:
-            self.__properties.remove(name)
-
     def render(self, **kw) -> str:
         """
         Renders the attributes and properties as a string.
+
+        Any arguments you use with this function are merged with the existing
+        attibutes/properties by the same rules as the `HTMLAttrs.set()` function:
+
+        - Pass a name and a value to set an attribute (e.g. `type="text"`)
+        - Use `True` as a value to set a property (e.g. `disabled`)
+        - Use `False` to remove an attribute or property
+        - If the attribute is "class", the new classes are appended to
+          the old ones (if not repeated) instead of replacing them.
+        - The underscores in the names will be translated automatically to dashes,
+          so `aria_selected` becomes the attribute `aria-selected`.
+
         To provide consistent output, the attributes and properties
         are sorted by name and rendered like this:
         `<sorted attributes> + <sorted properties>`.
+
+        Example:
+
+            ```python
+            attrs = HTMLAttrs({"class": "ipsum", "data_good": True, "width": 42})
+
+            attrs.render()
+            'class="ipsum" width="42" data-good'
+
+            attrs.render(class="abc", data_good=False, tabindex=0)
+            'class="abc ipsum" width="42" tabindex="0"'
+            ```
+
         """
         if kw:
             self.set(**kw)
@@ -184,3 +333,16 @@ def render(self, **kw) -> str:
         html_attrs.extend(properties)
 
         return Markup(" ".join(html_attrs))
+
+    # Private
+
+    def _remove(self, name: str) -> None:
+        """
+        Removes an attribute or property.
+        """
+        if name in CLASS_KEYS:
+            self.__classes = set()
+        if name in self.__attributes:
+            del self.__attributes[name]
+        if name in self.__properties:
+            self.__properties.remove(name)