pydzn 0.1.3__py3-none-any.whl → 0.1.4__py3-none-any.whl

pydzn/components/__init__.py

@@ -1,8 +1,10 @@
 from .button.component import Button
+from .card.component import Card
 from .text.component import Text
 from .drawer.component import Drawer
 from .sidebar.component import Sidebar
 from .nav_item.component import NavItem
+from .hamburger_menu.component import HamburgerMenu
 
 
-__all__ = ["Button", "Text", "Drawer", "Sidebar", "NavItem"]
+__all__ = ["Button", "Card", "Text", "Drawer", "Sidebar", "NavItem", "HamburgerMenu"]

pydzn/components/button/component.py

@@ -1,26 +1,86 @@
 from pydzn.base_component import BaseComponent
+from pydzn.variants import VariantSupport
 
 
-class Button(BaseComponent):
+class Button(VariantSupport, BaseComponent):
     """
-    Renders a button element.
-    Expects `template.html`
+    Server-rendered Button with pluggable variants/sizes.
+
+    - Built-in variants keep colors inline so it works without a theme pack.
+    - You can add external libraries and select with namespace, e.g. variant="acme:glass".
     """
 
-    DEFAULT_DZN = (
-        "px-5 py-2 rounded-sm border-2 border-blue-500 "
-        "shadow-sm hover:shadow-md bg-[transparent] text-[#2563eb] "
-    )
+    # visual “structures” (kept color-aware so no theme pack needed)
+    VARIANTS = {
+        # solid
+        "solid-primary": (
+            "rounded-sm border border-transparent "
+            "bg-[#2563eb] text-[white] "
+            "shadow-md hover:shadow-lg"
+        ),
+        # outline
+        "outline-primary": (
+            "rounded-sm border-2 border-blue-500 "
+            "bg-[transparent] text-[#2563eb] "
+            "shadow-sm hover:shadow-md"
+        ),
+        # ghost (neutral)
+        "ghost-neutral": (
+            "rounded-sm border-0 "
+            "bg-[transparent] text-body "
+            "shadow-none hover:bg-[rgba(15,23,42,.06)]"
+        ),
+        # linky button
+        "link-primary": (
+            "rounded-none border-0 "
+            "bg-[transparent] text-[#2563eb] "
+            "shadow-none hover:underline"
+        ),
+    }
+
+    # density
+    SIZES = {
+        "sm": "px-3 py-1",
+        "md": "px-5 py-2",
+        "lg": "px-6 py-3",
+        "xl": "px-8 py-4",
+    }
+
+    # tones are optional here; variants carry color already
+    TONES = {}
+
+    # project-wide defaults can be overridden via VariantSupport.set_default_choices(Button, ...)
+    DEFAULTS = {
+        "variant": "outline-primary",
+        "size": "md",
+        "tone": "",
+    }
 
-    def __init__(self, text: str = "", children: str | None = None,
-                 tag: str = "button", dzn: str | None = None, **attrs):
-        # 2) Accept dzn both as a named arg and as a stray attribute (attrs["dzn"])
-        user_dzn = dzn or attrs.pop("dzn", None)
+    def __init__(
+        self,
+        text: str = "",
+        children: str | None = None,
+        *,
+        tag: str = "button",
+        # variant system
+        variant: str | None = None,
+        size: str | None = None,
+        tone: str | None = None,
+        # raw utility escape hatch (merged last)
+        dzn: str | None = None,
+        **attrs,
+    ):
+        # allow stray attrs["dzn"] too
+        extra_dzn = dzn or attrs.pop("dzn", None)
 
-        # 3) Merge: default + user-provided (so user can extend the default easily)
-        effective_dzn = (self.DEFAULT_DZN + " " + user_dzn).strip() if user_dzn else self.DEFAULT_DZN
+        # resolve VARIANT + SIZE (+ optional TONE) + extra_dzn
+        effective_dzn = self._resolve_variant_dzn(
+            variant=variant,
+            size=size,
+            tone=tone,
+            extra_dzn=extra_dzn,
+        )
 
-        # 4) Pass the merged dzn to BaseComponent (it will register + merge into class)
         super().__init__(children=children, tag=tag, dzn=effective_dzn, **attrs)
         self.text = text
 

pydzn/components/card/component.py

@@ -1,15 +1,93 @@
 from pydzn.base_component import BaseComponent
+from pydzn.variants import VariantSupport
 
 
-class Card(BaseComponent):
+class Card(VariantSupport, BaseComponent):
     """
-    Renders a card element.
-    Expects `template.html`
+    Server-rendered Card with pluggable variants/sizes/tones.
+    Variants focus on layout/structure; tones mainly adjust border color.
     """
 
-    def __init__(self, children: str | None = None, tag: str = "div", **html_attrs):
-        super().__init__(children=children, tag=tag, **html_attrs)
+    # visual “structures”
+    VARIANTS = {
+        "panel": (
+            "flex flex-col gap-4 p-4 rounded-xl "
+            "border border-subtle bg-elevated shadow-sm"
+        ),
+        "plain": (
+            "flex flex-col gap-3 p-4 rounded-md "
+            "border border-subtle bg-surface shadow-none"
+        ),
+        "elevated": (
+            "flex flex-col gap-4 p-4 rounded-xl "
+            "border border-transparent bg-elevated shadow-lg"
+        ),
+        "outlined": (
+            "flex flex-col gap-4 p-4 rounded-lg "
+            "border-2 border-slate-300 bg-[transparent] shadow-none"
+        ),
+        "soft": (
+            "flex flex-col gap-4 p-4 rounded-xl "
+            "border-0 bg-[rgba(15,23,42,.03)] shadow-sm"
+        ),
+        "glass": (
+            "flex flex-col gap-4 p-4 rounded-xl "
+            "border border-[rgba(255,255,255,.25)] bg-[rgba(255,255,255,.08)] shadow-md"
+        ),
+        "ghost": (
+            "flex flex-col gap-4 p-4 rounded-md "
+            "border-0 bg-[transparent] shadow-none"
+        ),
+    }
 
+    # density
+    SIZES = {
+        "xs": "p-2 gap-2 rounded-sm",
+        "sm": "p-3 gap-2 rounded-md",
+        "md": "p-4 gap-3 rounded-lg",
+        "lg": "p-6 gap-4 rounded-xl",
+        "xl": "p-8 gap-5 rounded-2xl",
+    }
+
+    # tones mainly drive border color (kept subtle by default)
+    TONES = {
+        "neutral": "border-subtle",
+        "primary": "border-blue-500",
+        "success": "border-green-500",
+        "danger":  "border-red-500",
+    }
+
+    # project-wide defaults can be overridden at runtime:
+    #   Card.set_default_choices(variant="...", size="...", tone="...")
+    DEFAULTS = {
+        "variant": "panel",
+        "size": "md",
+        "tone": "neutral",
+    }
+
+    def __init__(
+        self,
+        children: str | None = None,
+        *,
+        tag: str = "div",
+        # variant system
+        variant: str | None = None,
+        size: str | None = None,
+        tone: str | None = None,
+        # raw utility escape hatch (merged last)
+        dzn: str | None = None,
+        **attrs,
+    ):
+        extra_dzn = dzn or attrs.pop("dzn", None)
+
+        effective_dzn = self._resolve_variant_dzn(
+            variant=variant,
+            size=size,
+            tone=tone,
+            extra_dzn=extra_dzn,
+        )
+
+        super().__init__(children=children, tag=tag, dzn=effective_dzn, **attrs)
 
     def context(self) -> dict:
         return {}

pydzn/components/hamburger_menu/component.py

@@ -0,0 +1,210 @@
+import uuid, re
+from pydzn.base_component import BaseComponent
+from pydzn.variants import VariantSupport
+from pydzn.dzn import register_dzn_classes
+
+
+def _hamburger_svg(sz=24):
+    return f'''
+<svg width="{sz}" height="{sz}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <rect x="3" y="6"  width="18" height="2" rx="1" fill="currentColor"/>
+  <rect x="3" y="11" width="18" height="2" rx="1" fill="currentColor"/>
+  <rect x="3" y="16" width="18" height="2" rx="1" fill="currentColor"/>
+</svg>
+'''.strip()
+
+def _close_svg(sz=24):
+    return f'''
+<svg width="{sz}" height="{sz}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
+'''.strip()
+
+
+class HamburgerMenu(VariantSupport, BaseComponent):
+    VARIANTS = {
+        # Trigger styles
+        "trigger:quiet": (
+            "px-3 py-2 rounded-md border-0 "
+            "bg-[transparent] text-[#333] hover:text-[#6b6969] cursor-pointer"
+        ),
+        "trigger:solid": (
+            "px-3 py-2 rounded-md border border-[1px] "
+            "bg-[#2563eb] text-[white] hover:bg-[rgba(37,99,235,.92)] cursor-pointer"
+        ),
+
+        # Panel styles: no default background here
+        "panel:sheet": "text-[black] shadow-xl rounded-[10px]",
+        "panel:glass": "text-[black] shadow-lg rounded-[10px] backdrop-blur bg-[rgba(255,255,255,.70)]",
+        "panel:bare":  "text-[inherit] shadow-none",
+    }
+
+    def __init__(self, *,
+        children: str = "",
+        mode: str = "right",
+        drawer_width: int | str = 320,
+        dropdown_height: int | str = 320,
+        show_backdrop: bool = True,
+        icon_size: int = 24,
+        trigger_variant: str | None = None,
+        trigger_size: str | None = None,
+        panel_variant: str | None = None,
+        dzn: str | None = None,
+        button_dzn: str | None = None,
+        panel_dzn: str | None = None,
+        **attrs,
+    ):
+        self._uid = uuid.uuid4().hex[:8]
+        self.mode = mode
+        self.drawer_width = int(drawer_width)
+        self.dropdown_height = int(dropdown_height)
+        self.show_backdrop = bool(show_backdrop)
+        self.icon_size = int(icon_size)
+
+        # Resolve trigger/panel via VariantSupport
+        self._trigger_dzn = self._resolve_variant_dzn(
+            variant=trigger_variant or "trigger:quiet",
+            size=trigger_size or "md",
+            tone=None,
+            extra_dzn=(button_dzn or "")
+        )
+        self._panel_dzn = self._resolve_variant_dzn(
+            variant=panel_variant or "panel:sheet",
+            size=None,
+            tone=None,
+            extra_dzn=(panel_dzn or "")
+        )
+
+        # Wrapper classes + auto-forward visual tokens to the panel
+        wrapper_core = "relative inline-block"
+        base_wrapper = f"{wrapper_core} {dzn.strip()}" if dzn else wrapper_core
+        forwarded = self._extract_visual_tokens(dzn or "")
+        self._panel_forwarded = forwarded
+
+        # Register for /_dzn.css emission
+        register_dzn_classes(base_wrapper)
+        register_dzn_classes(self._trigger_dzn)
+        register_dzn_classes(self._panel_dzn)
+        register_dzn_classes(self._panel_forwarded)
+        register_dzn_classes(
+            "flex items-center gap-2 hidden fixed inset-0 absolute top-0 bottom-0 "
+            "right-0 left-0 block overflow-auto border rounded-[10px] "
+            "z-[10000] z-[10001]"
+        )
+
+        super().__init__(children=children, tag="div", dzn=base_wrapper, **attrs)
+
+    def context(self) -> dict:
+        return {}
+
+    # --- helpers ---
+    @staticmethod
+    def _extract_visual_tokens(s: str) -> str:
+        if not s: return ""
+        keep = []
+        for cls in s.split():
+            if (cls.startswith("bg-[") or cls.startswith("text-[")
+                or cls.startswith("border") or cls.startswith("rounded")
+                or cls.startswith("shadow")):
+                keep.append(cls)
+        return " ".join(keep)
+
+    @staticmethod
+    def _has_bg_token(s: str) -> bool:
+        return bool(re.search(r"\bbg-\[", s or ""))
+
+    # --- render ---
+    def render(self) -> str:
+        uid = self._uid
+        root_cls = f"hm-{uid}"
+        cb_id = f"hmcb-{uid}"
+        drawer_id = f"hm-drawer-{uid}"
+
+        css = f"""
+<style>
+.{root_cls} .hm__icon--close {{ display:none; }}
+.{root_cls} input[type="checkbox"] {{ position:absolute; opacity:0; pointer-events:none; }}
+.{root_cls} .hm__toggle {{ display:inline-flex; align-items:center; gap:.5rem; }}
+
+.{root_cls} .hm__drawer {{
+  transition: transform .22s ease, opacity .22s ease;
+  will-change: transform, opacity;
+  outline: none;
+}}
+.{root_cls}[data-mode="right"]  .hm__drawer {{ transform: translateX(100%);  }}
+.{root_cls}[data-mode="left"]   .hm__drawer {{ transform: translateX(-100%); }}
+.{root_cls}[data-mode="dropdown"] .hm__drawer {{ transform: translateY(-8px); opacity:0; }}
+
+.{root_cls} input:checked ~ label .hm__icon--hamburger {{ display:none; }}
+.{root_cls} input:checked ~ label .hm__icon--close     {{ display:inline-block; }}
+
+.{root_cls}[data-mode="right"]    input:checked ~ .hm__backdrop {{ display:block; }}
+.{root_cls}[data-mode="left"]     input:checked ~ .hm__backdrop {{ display:block; }}
+.{root_cls}[data-mode="dropdown"] .hm__backdrop {{ display:none !important; }}
+
+.{root_cls}[data-mode="right"]    input:checked ~ .hm__drawer {{ transform: translateX(0);  }}
+.{root_cls}[data-mode="left"]     input:checked ~ .hm__drawer {{ transform: translateX(0);  }}
+.{root_cls}[data-mode="dropdown"] input:checked ~ .hm__drawer {{ transform: translateY(0); opacity:1; }}
+</style>
+""".strip()
+
+        backdrop_html = ""
+        if self.show_backdrop and self.mode in ("left", "right"):
+            backdrop_html = (
+                f'<label for="{cb_id}" class="hm__backdrop hidden fixed inset-0 bg-[rgba(0,0,0,.35)] z-[10000]" aria-hidden="true"></label>'
+            )
+
+        trigger_html = f"""
+<label for="{cb_id}" class="hm__toggle {self._trigger_dzn} flex items-center gap-2" aria-controls="{drawer_id}" aria-haspopup="true" style="cursor:pointer">
+  <span class="hm__icon hm__icon--hamburger" aria-hidden="true">{_hamburger_svg(self.icon_size)}</span>
+  <span class="hm__icon hm__icon--close" aria-hidden="true">{_close_svg(self.icon_size)}</span>
+</label>
+""".strip()
+
+        # Drawer base position/size
+        if self.mode in ("left", "right"):
+            side = "right-0" if self.mode == "right" else "left-0"
+            drawer_base = f"fixed top-0 bottom-0 {side} overflow-auto z-[10001] w-[{self.drawer_width}px]"
+        else:
+            drawer_base = (
+                f"absolute top-[calc(100%+8px)] right-0 "
+                f"h-[{self.dropdown_height}px] w-[min(92vw,420px)] "
+                f"overflow-auto border rounded-[10px] z-[10001]"
+            )
+        register_dzn_classes(drawer_base)
+
+        # Panel classes = variant + forwarded visual tokens (+ default bg if none provided)
+        panel_classes = f"{self._panel_dzn} {self._panel_forwarded}".strip()
+        if not self._has_bg_token(panel_classes):
+            panel_classes = f"{panel_classes} bg-[white]"
+        register_dzn_classes(panel_classes)
+
+        drawer_html = f"""
+<div id="{drawer_id}" class="hm__drawer {drawer_base} {panel_classes}">
+  {self.children or ""}
+</div>
+""".strip()
+
+        checkbox = f'<input id="{cb_id}" type="checkbox" />'
+
+        return (
+            css
+            + f'<div class="{root_cls}" data-mode="{self.mode}" {self._attrs_string()}>'
+            + checkbox
+            + trigger_html
+            + backdrop_html
+            + drawer_html
+            + "</div>"
+        )
+
+    def _attrs_string(self) -> str:
+        import html as _html
+        attr_parts = []
+        for k, v in self.html_attrs.items():
+            if k == "style":
+                continue
+            attr_parts.append(f'{k}="{_html.escape(str(v), quote=True)}"')
+        style_str = self._style_string()
+        if style_str:
+            attr_parts.append(f'style="{_html.escape(style_str, quote=True)}"')
+        return " ".join(attr_parts)

pydzn/components/hamburger_menu/template.html

@@ -0,0 +1,3 @@
+<{{ tag }} {{ attrs|safe }}>
+  {{ children|safe }}
+</{{ tag }}>

pydzn/components/nav_item/component.py

@@ -1,56 +1,220 @@
 from pydzn.base_component import BaseComponent
+from pydzn.variants import VariantSupport
 from pydzn.dzn import register_dzn_classes
 
 
-class NavItem(BaseComponent):
+class NavItem(VariantSupport, BaseComponent):
     """
-    Minimal sidebar/nav item.
-    - No default styling; pass dzn yourself.
-    - Put label/content in `children` (e.g., render a Text component).
-    - Optional: `active=True` to start active; `group_toggle=True` to clear
-      siblings and apply `active_classes` on click (client-only).
+    Nav item with pluggable variants + fluent helpers so users don't need DZN utilities.
+
+    Example:
+      NavItem(variant="sidebar-underline", children=Text("Overview").render())
+        .center()
+        .height(64)
+        .full_width()
+        .bottom_divider("subtle")
+        .hover(bg="rgba(37,99,235,.06)", text="#2563eb", underline="blue-500")
+        .focus(bg="rgba(37,99,235,.10)")
+        .render()
     """
 
+    # -------- Variants --------
+    VARIANTS = {
+        # Sidebar family
+        "sidebar-default": (
+            "flex items-center justify-center text-center "
+            "rounded-none border-solid border-b border-subtle "
+            "text-body hover:bg-[rgba(15,23,42,.06)]"
+        ),
+        "sidebar-compact": (
+            "flex items-center justify-center text-center "
+            "rounded-none border-solid border-b border-subtle "
+            "text-body hover:bg-[rgba(15,23,42,.06)]"
+        ),
+        "sidebar-active": (
+            "flex items-center justify-center text-center "
+            "rounded-none border-solid border-b border-subtle "
+            "bg-[rgba(37,99,235,.10)] text-[#2563eb]"
+        ),
+        "sidebar-quiet": (
+            "flex items-center justify-center text-center "
+            "rounded-none border-solid border-b border-subtle "
+            "text-[rgb(100,116,139)] hover:bg-[rgba(15,23,42,.04)]"
+        ),
+        # underline-only (no box borders)
+        "sidebar-underline": (
+            "flex items-center justify-center text-center "
+            "rounded-none border-0 border-b border-subtle border-solid py-2"
+        ),
+        # square tile w/ underline + hovers
+        "sidebar-squared-underline": (
+            "flex items-center justify-center text-center "
+            "rounded-none border-0 border-b border-subtle border-solid py-2 "
+            "hover:bg-[rgba(37,99,235,.06)] hover:border-blue-500 hover:text-[#2563eb] "
+            "focus:bg-[rgba(37,99,235,.10)]"
+        ),
+
+        # Dropdown family
+        "dropdown-item": (
+            "px-3 py-2 rounded-md border-0 "
+            "bg-[transparent] text-body hover:bg-[rgba(15,23,42,.06)]"
+        ),
+        "dropdown-accent": (
+            "w-[100%] px-3 py-2 rounded-md border-0 "
+            "bg-[transparent] text-[#2563eb] hover:bg-[rgba(37,99,235,.08)]"
+        ),
+        "dropdown-danger": (
+            "w-[100%] px-3 py-2 rounded-md border-0 "
+            "bg-[transparent] text-[rgb(239,68,68)] hover:bg-[rgba(239,68,68,.08)]"
+        ),
+        "dropdown-plain": (
+            "w-[100%] px-3 py-2 rounded-none border-0 "
+            "bg-[transparent] text-body hover:bg-[rgba(15,23,42,.04)]"
+        ),
+
+        # Simple family
+        "simple-item": (
+            "px-3 py-2 rounded-none border-0 bg-[transparent] no-underline "
+            "text-[#333] hover:text-[#6b6969]"
+        ),
+
+    }
+
+    SIZES = {
+        "sm": "text-[12px]",
+        "md": "text-[14px]",
+        "lg": "text-[16px]",
+    }
+
+    TONES = {
+        "muted":   "text-[rgb(100,116,139)]",
+        "primary": "text-[#2563eb]",
+        "danger":  "text-[rgb(239,68,68)]",
+    }
+
+    DEFAULTS = {"variant": "sidebar-default", "size": "md", "tone": ""}
+
+    # -------- ctor --------
     def __init__(
         self,
         *,
         children: str | None = None,
         tag: str = "div",
-        dzn: str | None = None,
-        active: bool = False,
-        active_classes: list[str] | tuple[str, ...] | None = None,
-        group_toggle: bool = False,
+        variant: str | None = None,
+        size: str | None = None,
+        tone: str | None = None,
+        dzn: str | None = None,   # extra raw utilities merged last
         **attrs,
     ):
-        # No default design; just pass through what caller wants.
-        self._active_classes = list(active_classes or [])
-
-        # If we'll toggle classes at runtime, pre-register them so /_dzn.css emits rules.
-        if self._active_classes:
-            register_dzn_classes(self._active_classes)
+        extra_dzn = dzn or attrs.pop("dzn", None)
 
-        # Start active = append active classes up front
-        effective_dzn = (dzn or "")
-        if active and self._active_classes:
-            effective_dzn = (effective_dzn + " " + " ".join(self._active_classes)).strip()
-
-        # Sensible a11y defaults (still “unstyled”)
+        # minimal a11y defaults
         attrs.setdefault("role", "button")
         attrs.setdefault("tabindex", "0")
 
-        # Optional sibling-clearing active toggle, only if requested and not overridden
-        if group_toggle and "hx-on:click" not in attrs and self._active_classes:
-            # Build JS that removes active classes from siblings, adds to this.
-            rm = ",".join(f"'{c}'" for c in self._active_classes)
-            add = rm
-            attrs["hx-on:click"] = (
-                "var p=this.parentElement;"
-                f"for(const el of p.children){{el.classList.remove({rm});}}"
-                f"this.classList.add({add});"
-            )
+        base = self._resolve_variant_dzn(
+            variant=variant,
+            size=size,
+            tone=tone,
+            extra_dzn=extra_dzn,
+        )
+
+        # keep base vs. runtime styles separate
+        self._base_dzn = base.strip()
+        self._runtime_dzn: list[str] = []
+
+        # pre-register everything we know at init
+        register_dzn_classes(self._base_dzn)
+
+        # let BaseComponent merge base dzn into class
+        super().__init__(children=children or "", tag=tag, dzn=self._base_dzn, **attrs)
+
+    # -------- internal helpers --------
+    def _merge_all(self) -> str:
+        return " ".join([self._base_dzn] + self._runtime_dzn).strip()
+
+    def _add_runtime(self, *classes: str) -> None:
+        cls_str = " ".join(c for c in classes if c)
+        if not cls_str:
+            return
+        # register for CSS emission
+        register_dzn_classes(cls_str)
+        # track runtime classes
+        self._runtime_dzn.extend(c for c in cls_str.split() if c)
+        # immediately apply to html_attrs["class"] so render sees it
+        merged = self._merge_all()
+        self.html_attrs["class"] = self._merge_classes(self.html_attrs.get("class", ""), merged)
+
+    # -------- fluent builder methods --------
+    def center(self, *, x: bool = True, y: bool = True, text: bool = True):
+        if x or y:
+            self._add_runtime("flex")
+        if x:
+            self._add_runtime("justify-center")
+        if y:
+            self._add_runtime("items-center")
+        if text:
+            self._add_runtime("text-center")
+        return self
+
+    def height(self, px: int):
+        self._add_runtime(f"h-[{px}px]")
+        return self
+
+    def full_width(self, on: bool = True):
+        if on:
+            self._add_runtime("w-[100%]")
+        return self
+
+    def bottom_divider(self, color: str = "subtle", *, style: str = "solid"):
+        # ensure only the bottom edge shows
+        self._add_runtime("border-0", "border-b", f"border-{color}", f"border-{style}")
+        return self
+
+    def hover(self, *, bg: str | None = None, text: str | None = None, underline: str | None = None):
+        if bg:
+            self._add_runtime(f"hover:bg-[{bg}]")
+        if text:
+            self._add_runtime(f"hover:text-[{text}]")
+        if underline:
+            self._add_runtime(f"hover:border-{underline}")
+        return self
+
+    def focus(self, *, bg: str | None = None):
+        if bg:
+            self._add_runtime(f"focus:bg-[{bg}]")
+        return self
+
+    def padding(self, *, all: int | str | None = None, x: int | str | None = None, y: int | str | None = None):
+        def _choose(prefix: str, val):
+            if val is None:
+                return
+            if isinstance(val, int):
+                self._add_runtime(f"{prefix}-{val}")
+            else:
+                self._add_runtime(f"{prefix}-[{val}]")
+        _choose("p", all)
+        _choose("px", x)
+        _choose("py", y)
+        return self
+
+    def reset_runtime_styles(self):
+        """Remove everything added by builder methods (keeps the chosen variant)."""
+        self._runtime_dzn = []
+        # reset class to just base
+        self.html_attrs["class"] = self._base_dzn
+        register_dzn_classes(self._base_dzn)
+        return self
 
-        super().__init__(children=children or "", tag=tag, dzn=effective_dzn, **attrs)
+    def as_link(self, href: str, *, new_tab: bool=False):
+        self.tag = "a"
+        self.html_attrs["href"] = href
+        self.html_attrs["role"] = "link"
+        if new_tab:
+            self.html_attrs["target"] = "_blank"
+            self.html_attrs["rel"] = "noopener noreferrer"
+        return self
 
+    # required by BaseComponent
     def context(self) -> dict:
-        # No label here; use children (e.g., a Text component) for content.
         return {}