fix: Documentation and styling of catalog components

docs/components.md

@@ -186,7 +186,7 @@ The `ludic.attrs` module contains many attribute definition that you can reuse i
 
 - `HtmlAttrs` - Global HTML attributes available in all elements
     - The `class` and `for` attributes have the aliases `class_` and `for_`
-- `EventAttrs` - Event HTML attributes like `onclick`, `onkey`, and so on.
+- `EventAttrs` - Event HTML attributes like `on_click`, `on_key`, and so on.
 - `HtmxAttrs` - All [HTMX attributes](https://htmx.org/reference/) available.
     - All HTMX attributes have aliases with underscore, e.g. `hx_target`
 - `GlobalAttrs` subclasses `HtmlAttrs`, `EventAttrs` and `HtmxAttrs`

docs/htmx.md

@@ -108,6 +108,6 @@ def data() -> div:
     return div(
         h2("Data"),
         table(...),
-        button("Click Here", onclick=JavaScript("alert('test')")),
+        button("Click Here", on_click=JavaScript("alert('test')")),
     )
 ```

ludic/catalog/forms.py

@@ -106,7 +106,7 @@ class FormField(Component[TChildren, TAttrs]):
                 "label": {
                     "display": "block",
                     "font-weight": "bold",
-                    "margin": f"{theme.sizes.xxxs} 0 {theme.sizes.xxs}",
+                    "margin-block-end": theme.sizes.xxs,
                 },
                 "input": {
                     "inline-size": "100%",

ludic/catalog/items.py

@@ -2,7 +2,7 @@
 from typing import override
 
 from ludic.attrs import GlobalAttrs
-from ludic.html import dd, dl, dt, style
+from ludic.html import dd, dl, dt
 from ludic.types import Component, PrimitiveChildren
 
 from .utils import attr_to_camel
@@ -55,15 +55,6 @@ class Pairs(Component[Key | Value, PairsAttrs]):
         )
     """
 
-    classes = ["stack", "small"]
-    styles = style.use(
-        lambda theme: {
-            ".stack.small > dt + dd": {
-                "margin-block-start": theme.sizes.xxxxs,
-            },
-        }
-    )
-
     @override
     def render(self) -> dl:
         from_items: list[Key | Value] = []

ludic/catalog/loaders.py

@@ -15,14 +15,14 @@ class Loading(Component[AnyChildren, NoAttrs]):
             ".lds-ellipsis": {
                 "display": "inline-block",
                 "position": "relative",
-                "width": "80px",
-                "height": "80px",
+                "width": theme.sizes.m * 5,
+                "height": theme.sizes.m,
+                "margin": theme.sizes.xl,
             },
             ".lds-ellipsis div": {
                 "position": "absolute",
-                "top": "33px",
-                "width": "13px",
-                "height": "13px",
+                "width": theme.sizes.m,
+                "height": theme.sizes.m,
                 "border-radius": "50%",
                 "background": theme.colors.dark,
                 "animation-timing-function": "cubic-bezier(0, 1, 1, 0)",

ludic/catalog/pages.py

@@ -105,11 +105,11 @@ class HtmlPage(ComponentStrict[Head, Body, NoAttrs]):
             "dl": {
                 "margin-block": "0",
             },
-            "dl dt": {
-                "margin-block-start": theme.sizes.xxs,
+            "dl dd + dt": {
+                "margin-block-start": theme.sizes.xs,
             },
-            "dl dd": {
-                "margin-block-start": theme.sizes.xxxs,
+            "dl dt + dd": {
+                "margin-block-start": theme.sizes.xxxxs,
             },
             "dt": {
                 "font-weight": "bold",

ludic/web/endpoints.py

@@ -1,6 +1,6 @@
 import inspect
 from collections.abc import Callable
-from typing import Any, ClassVar, Protocol, cast
+from typing import Any, ClassVar, Protocol
 
 from starlette.datastructures import URL
 from starlette.endpoints import HTTPEndpoint as BaseEndpoint
@@ -51,6 +51,11 @@ class Endpoint(Component[NoChildren, TAttrs]):
 
     route: ClassVar[Route]
 
+    @property
+    def request(self) -> Request | None:
+        """The current request."""
+        return self.context.get("request")
+
     def lazy_load(
         self,
         endpoint: type[RoutedProtocol],
@@ -79,9 +84,7 @@ def url_for(self, endpoint: type[RoutedProtocol] | str, **path_params: Any) -> U
         Returns:
             The URL.
         """
-        request = self.context.get("request")
-
-        if request is None or not isinstance(request, Request):
+        if self.request is None or not isinstance(self.request, Request):
             raise RuntimeError(
                 f"{type(self).__name__} is not bound to a request, you can only use "
                 f"the {type(self).__name__}.url_for method in the context of a request."
@@ -102,4 +105,4 @@ def url_for(self, endpoint: type[RoutedProtocol] | str, **path_params: Any) -> U
                     if key in endpoint.route.param_convertors
                 }
 
-        return cast(URL, request.url_for(endpoint, **path_params))
+        return self.request.url_for(endpoint, **path_params)

tests/test_components.py

@@ -72,7 +72,7 @@ def test_pairs() -> None:
         Value(42),
     )
     assert pairs.to_html() == (
-        '<dl class="stack small">'
+        '<dl>'
             '<dt>Name</dt>'
             '<dd>John</dd>'
             '<dt>Age</dt>'