@pyscript/core 0.5.0-rc2 → 0.5.0-rc4

package/src/stdlib/pyscript.js

@@ -12,7 +12,7 @@ export default {
     "util.py": "import js\n\n\ndef as_bytearray(buffer):\n    ui8a = js.Uint8Array.new(buffer)\n    size = ui8a.length\n    ba = bytearray(size)\n    for i in range(0, size):\n        ba[i] = ui8a[i]\n    return ba\n\n\nclass NotSupported:\n    \"\"\"\n    Small helper that raises exceptions if you try to get/set any attribute on\n    it.\n    \"\"\"\n\n    def __init__(self, name, error):\n        object.__setattr__(self, \"name\", name)\n        object.__setattr__(self, \"error\", error)\n\n    def __repr__(self):\n        return f\"<NotSupported {self.name} [{self.error}]>\"\n\n    def __getattr__(self, attr):\n        raise AttributeError(self.error)\n\n    def __setattr__(self, attr, value):\n        raise AttributeError(self.error)\n\n    def __call__(self, *args):\n        raise TypeError(self.error)\n",
     "web": {
       "__init__.py": "from pyscript import document\nfrom pyscript.web.elements import Element, ElementCollection\n\n\nclass DOM:\n    def __init__(self):\n        self.body = Element.from_dom_element(document.body)\n        self.head = Element.from_dom_element(document.head)\n\n    def __getitem__(self, selector):\n        return self.find(selector)\n\n    def find(self, selector):\n        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in document.querySelectorAll(selector)\n            ]\n        )\n\n\ndom = DOM()\n",
-      "elements.py": "# noinspection PyPep8Naming\nimport inspect\nimport sys\n\ntry:\n    from typing import Any\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\nexcept ImportError:\n    # TODO: For now it probably means we are in MicroPython. We should figure\n    # out the \"right\" way to handle this. For now we just ignore the warning\n    # and logging to console\n    class warnings:\n        @staticmethod\n        def warn(*args, **kwargs):\n            print(\"WARNING: \", *args, **kwargs)\n\n\nfrom pyscript import document\n\n#: A flag to show if MicroPython is the current Python interpreter.\nis_micropython = \"MicroPython\" in sys.version\n\n\ndef getmembers_static(cls):\n    \"\"\"Cross-interpreter implementation of inspect.getmembers_static.\"\"\"\n\n    if is_micropython:  # pragma: no cover\n        return [(name, getattr(cls, name)) for name, _ in inspect.getmembers(cls)]\n\n    return inspect.getmembers_static(cls)\n\n\nclass DOMProperty:\n    \"\"\"A descriptor representing a DOM property on an `Element` instance.\n\n    This maps a property on an `Element` instance, to the property with the specified\n    name on the element's underlying DOM element.\n    \"\"\"\n\n    def __init__(self, name: str, allow_nones: bool = False):\n        self.name = name\n        self.allow_nones = allow_nones\n\n    def __get__(self, obj, objtype=None):\n        return getattr(obj._dom_element, self.name)\n\n    def __set__(self, obj, value):\n        if not self.allow_nones and value is None:\n            return\n        setattr(obj._dom_element, self.name, value)\n\n\nclass Element:\n    tag = \"div\"\n\n    # These are attribute that all elements have (this list is a subset of the official\n    # one - we are just trying to capture the most used ones).\n    accesskey = DOMProperty(\"accesskey\")\n    autofocus = DOMProperty(\"autofocus\")\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    className = DOMProperty(\"className\")\n    contenteditable = DOMProperty(\"contenteditable\")\n    draggable = DOMProperty(\"draggable\")\n    enterkeyhint = DOMProperty(\"enterkeyhint\")\n    hidden = DOMProperty(\"hidden\")\n    innerHTML = DOMProperty(\"innerHTML\")\n    id = DOMProperty(\"id\")\n    lang = DOMProperty(\"lang\")\n    nonce = DOMProperty(\"nonce\")\n    part = DOMProperty(\"part\")\n    popover = DOMProperty(\"popover\")\n    slot = DOMProperty(\"slot\")\n    spellcheck = DOMProperty(\"spellcheck\")\n    tabindex = DOMProperty(\"tabindex\")\n    tagName = DOMProperty(\"tagName\")\n    textContent = DOMProperty(\"textContent\")\n    title = DOMProperty(\"title\")\n    translate = DOMProperty(\"translate\")\n    virtualkeyboardpolicy = DOMProperty(\"virtualkeyboardpolicy\")\n\n    @classmethod\n    def from_dom_element(cls, dom_element):\n        \"\"\"Create an instance of the appropriate subclass of `Element` for a DOM\n        element.\n\n        If the DOM element was created via an `Element` (i.e. by us) it will have a data\n        attribute named `data-pyscript-type` that contains the name of the subclass\n        that created it. Hence, if the `data-pyscript-type` attribute *is* present we\n        look up the subclass by name and create an instance of that. Otherwise, we make\n        a 'best-guess' and look up the `Element` subclass by the DOM element's tag name\n        (this is NOT fool-proof as many subclasses might use a `<div>`, but close enough\n        for jazz).\n        \"\"\"\n\n        # We use \"getAttribute\" here instead of `js_element.dataset.pyscriptType` as the\n        # latter throws an `AttributeError` if the value isn't set. This way we just get\n        # `None` which seems cleaner.\n        cls_name = dom_element.getAttribute(\"data-pyscript-type\")\n        if cls_name:\n            element_cls = ELEMENT_CLASSES_BY_NAME.get(cls_name.lower())\n\n        else:\n            element_cls = ELEMENT_CLASSES_BY_TAG.get(dom_element.tagName.lower())\n\n        # For any unknown elements (custom tags etc.) create an instance of this\n        # class ('Element').\n        if not element_cls:\n            element_cls = cls\n\n        return element_cls(dom_element=dom_element)\n\n    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):\n        \"\"\"Create a new, or wrap an existing DOM element.\n\n        If `dom_element` is None we are being called to *create* a new element.\n        Otherwise, we are being called to *wrap* an existing DOM element.\n        \"\"\"\n        self._dom_element = dom_element or document.createElement(self.tag)\n\n        # Tag the DOM element with our class name.\n        #\n        # Using the `dataset` attribute is how you programmatically add `data-xxx`\n        # attributes to a DOM element. In this case it will set an attribute that\n        # appears in the DOM as `data-pyscript-type`.\n        self._dom_element.dataset.pyscriptType = type(self).__name__\n\n        self._parent = None\n        self._classes = Classes(self)\n        self._style = Style(self)\n\n        # Set any specified classes, styles, and DOM properties.\n        self.update(classes=classes, style=style, **kwargs)\n\n    def update(self, classes=None, style=None, **kwargs):\n        \"\"\"Update the element with the specified classes, styles, and DOM properties.\"\"\"\n\n        if classes:\n            self.classes.add(classes)\n\n        if isinstance(style, dict):\n            self.style.set(**style)\n\n        elif style is not None:\n            raise ValueError(\n                f\"Style should be a dictionary, received {style} \"\n                f\"(type {type(style)}) instead.\"\n            )\n\n        self._set_dom_properties(**kwargs)\n\n    def _set_dom_properties(self, **kwargs):\n        \"\"\"Set the specified DOM properties.\n\n        Args:\n            **kwargs: The properties to set\n        \"\"\"\n        # Harvest all DOM properties from the instance's class.\n        dom_properties = {\n            attribute_name: attribute_value\n            for attribute_name, attribute_value in getmembers_static(self.__class__)\n            if isinstance(attribute_value, DOMProperty)\n        }\n\n        for name, value in kwargs.items():\n            if name not in dom_properties:\n                raise ValueError(f\"'{name}' is not a DOM property.\")\n\n            try:\n                setattr(self, name, value)\n            except Exception as e:\n                print(f\"Error setting {name} to {value}: {e}\")\n                raise\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM element.\"\"\"\n        return isinstance(obj, Element) and obj._dom_element == self._dom_element\n\n    @property\n    def children(self):\n        return ElementCollection(\n            [Element.from_dom_element(el) for el in self._dom_element.children]\n        )\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._dom_element.parentElement:\n            self._parent = Element.from_dom_element(self._dom_element.parentElement)\n\n        return self._parent\n\n    @property\n    def style(self):\n        return self._style\n\n    def append(self, child):\n        if isinstance(child, Element):\n            self._dom_element.appendChild(child._dom_element)\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self._dom_element.appendChild(el._dom_element)\n\n        else:\n            # In this case we know it's not an Element or an ElementCollection, so we\n            # guess that it's either a DOM element or NodeList returned via the ffi.\n            try:\n                # First, we try to see if it's an element by accessing the 'tagName'\n                # attribute.\n                child.tagName\n                self._dom_element.appendChild(child)\n\n            except AttributeError:\n                try:\n                    # Ok, it's not an element, so let's see if it's a NodeList by\n                    # accessing the 'length' attribute.\n                    child.length\n                    for element_ in child:\n                        self._dom_element.appendChild(element_)\n\n                except AttributeError:\n                    # Nope! This is not an element or a NodeList.\n                    raise TypeError(\n                        f'Element \"{child}\" is a proxy object, \"'\n                        f\"but not a valid element or a NodeList.\"\n                    )\n\n    def clone(self, clone_id=None):\n        \"\"\"Make a clone of the element (clones the underlying DOM object too).\"\"\"\n        clone = Element.from_dom_element(self._dom_element.cloneNode(True))\n        clone.id = clone_id\n        return clone\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in self._dom_element.querySelectorAll(selector)\n            ]\n        )\n\n    def show_me(self):\n        \"\"\"Scroll the element into view.\"\"\"\n        self._dom_element.scrollIntoView()\n\n\nclass Classes:\n    \"\"\"A set-like interface to an element's `classList`.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._class_list = self._element._dom_element.classList\n\n    def __contains__(self, item):\n        return item in self._class_list\n\n    def __eq__(self, other):\n        # We allow comparison with either another `Classes` instance...\n        if isinstance(other, Classes):\n            compare_with = list(other._class_list)\n\n        # ...or iterables of strings.\n        else:\n            # TODO: Check MP for existence of better iterable test.\n            try:\n                compare_with = iter(other)\n\n            except TypeError:\n                return False\n\n        return set(self._class_list) == set(compare_with)\n\n    def __iter__(self):\n        return iter(self._class_list)\n\n    def __len__(self):\n        return self._class_list.length\n\n    def __repr__(self):\n        return f\"Classes({', '.join(self._class_list)})\"\n\n    def __str__(self):\n        return \" \".join(self._class_list)\n\n    def add(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.add(item)\n\n            else:\n                self._class_list.add(class_name)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.remove(item)\n\n            else:\n                self._class_list.remove(class_name)\n\n    def replace(self, old_class, new_class):\n        self.remove(old_class)\n        self.add(new_class)\n\n    def toggle(self, *class_names):\n        for class_name in class_names:\n            if class_name in self:\n                self.remove(class_name)\n\n            else:\n                self.add(class_name)\n\n\nclass HasOptions:\n    \"\"\"Mix-in for elements that have an options attribute.\n\n    The elements that support options are: <datalist>, <optgroup>, and <select>.\n    \"\"\"\n\n    @property\n    def options(self):\n        if not hasattr(self, \"_options\"):\n            self._options = Options(self)\n\n        return self._options\n\n\nclass Options:\n    \"\"\"This class represents the <option>s of a <datalist>, <optgroup> or <select>\n    element.\n\n    It allows to access to add and remove <option>s by using the `add` and `remove`\n    methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._dom_element\n\n        self._element._dom_element.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._dom_element.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [\n            Element.from_dom_element(opt) for opt in self._element._dom_element.options\n        ]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._dom_element.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass Style:\n    \"\"\"A dict-like interface to an element's css style.\"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        self._style = self._element._dom_element.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kwargs):\n        for key, value in kwargs.items():\n            self._element._dom_element.style.setProperty(key, value)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following properties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._dom_element.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._dom_element.style.visibility = value\n\n\nclass ContainerElement(Element):\n    \"\"\"Base class for elements that can contain other elements.\"\"\"\n\n    def __init__(\n        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs\n    ):\n        super().__init__(\n            dom_element=dom_element, style=style, classes=classes, **kwargs\n        )\n\n        for child in list(args) + (children or []):\n            if isinstance(child, Element) or isinstance(child, ElementCollection):\n                self.append(child)\n\n            else:\n                self.innerHTML += child\n\n\n# IMPORTANT: For all HTML components defined below, we are not mapping all possible\n# attributes, just the global and the most common ones. If you need to access a\n# specific attribute, you can always use the `_dom_element.<attribute>`\nclass a(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\"\"\n\n    tag = \"a\"\n\n    download = DOMProperty(\"download\")\n    href = DOMProperty(\"href\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    rel = DOMProperty(\"rel\")\n    target = DOMProperty(\"target\")\n    type = DOMProperty(\"type\")\n\n\nclass abbr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr\"\"\"\n\n    tag = \"abbr\"\n\n\nclass address(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address\"\"\"\n\n    tag = \"address\"\n\n\nclass area(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\"\"\"\n\n    tag = \"area\"\n\n    alt = DOMProperty(\"alt\")\n    coords = DOMProperty(\"coords\")\n    download = DOMProperty(\"download\")\n    href = DOMProperty(\"href\")\n    ping = DOMProperty(\"ping\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    rel = DOMProperty(\"rel\")\n    shape = DOMProperty(\"shape\")\n    target = DOMProperty(\"target\")\n\n\nclass article(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\"\"\"\n\n    tag = \"article\"\n\n\nclass aside(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside\"\"\"\n\n    tag = \"aside\"\n\n\nclass audio(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\"\"\"\n\n    tag = \"audio\"\n\n    autoplay = DOMProperty(\"autoplay\")\n    controls = DOMProperty(\"controls\")\n    controlslist = DOMProperty(\"controlslist\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disableremoteplayback = DOMProperty(\"disableremoteplayback\")\n    loop = DOMProperty(\"loop\")\n    muted = DOMProperty(\"muted\")\n    preload = DOMProperty(\"preload\")\n    src = DOMProperty(\"src\")\n\n\nclass b(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b\"\"\"\n\n    tag = \"b\"\n\n\nclass base(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\"\"\"\n\n    tag = \"base\"\n\n    href = DOMProperty(\"href\")\n    target = DOMProperty(\"target\")\n\n\nclass blockquote(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote\"\"\"\n\n    tag = \"blockquote\"\n\n    cite = DOMProperty(\"cite\")\n\n\nclass body(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\"\"\"\n\n    tag = \"body\"\n\n\nclass br(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"\"\"\n\n    tag = \"br\"\n\n\nclass button(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\"\"\"\n\n    tag = \"button\"\n\n    autofocus = DOMProperty(\"autofocus\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    formaction = DOMProperty(\"formaction\")\n    formenctype = DOMProperty(\"formenctype\")\n    formmethod = DOMProperty(\"formmethod\")\n    formnovalidate = DOMProperty(\"formnovalidate\")\n    formtarget = DOMProperty(\"formtarget\")\n    name = DOMProperty(\"name\")\n    type = DOMProperty(\"type\")\n    value = DOMProperty(\"value\")\n\n\nclass canvas(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\"\"\"\n\n    tag = \"canvas\"\n\n    height = DOMProperty(\"height\")\n    width = DOMProperty(\"width\")\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element with the filename provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        download_link = a(download=filename, href=self._dom_element.toDataURL())\n\n        # Adding the link to the DOM is recommended for browser compatibility to make\n        # sure that the click works.\n        self.append(download_link)\n\n        download_link._dom_element.click()\n\n    def draw(self, what, width=None, height=None):\n        \"\"\"Draw `what` on the current element\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The\n                specification permits any canvas image source, specifically, an\n                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a\n                VideoFrame.\n        \"\"\"\n        if isinstance(what, Element):\n            what = what._dom_element\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        ctx = self._dom_element.getContext(\"2d\")\n        if width or height:\n            ctx.drawImage(what, 0, 0, width, height)\n\n        else:\n            ctx.drawImage(what, 0, 0)\n\n\nclass caption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"\"\"\n\n    tag = \"caption\"\n\n\nclass cite(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite\"\"\"\n\n    tag = \"cite\"\n\n\nclass code(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code\"\"\"\n\n    tag = \"code\"\n\n\nclass col(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"\"\"\n\n    tag = \"col\"\n\n    span = DOMProperty(\"span\")\n\n\nclass colgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"\"\"\n\n    tag = \"colgroup\"\n\n\nclass data(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\"\"\"\n\n    tag = \"data\"\n\n    value = DOMProperty(\"value\")\n\n\nclass datalist(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"\"\"\n\n    tag = \"datalist\"\n\n\nclass dd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\"\"\"\n\n    tag = \"dd\"\n\n\nclass del_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\"\"\"\n\n    tag = \"del\"\n\n    cite = DOMProperty(\"cite\")\n    datetime = DOMProperty(\"datetime\")\n\n\nclass details(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\"\"\"\n\n    tag = \"details\"\n\n    open = DOMProperty(\"open\")\n\n\nclass dialog(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\"\"\n\n    tag = \"dialog\"\n\n    open = DOMProperty(\"open\")\n\n\nclass div(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"\"\"\n\n    tag = \"div\"\n\n\nclass dl(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\"\"\"\n\n    tag = \"dl\"\n\n    value = DOMProperty(\"value\")\n\n\nclass dt(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt\"\"\"\n\n    tag = \"dt\"\n\n\nclass em(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em\"\"\"\n\n    tag = \"em\"\n\n\nclass embed(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed\"\"\"\n\n    tag = \"embed\"\n\n    height = DOMProperty(\"height\")\n    src = DOMProperty(\"src\")\n    type = DOMProperty(\"type\")\n    width = DOMProperty(\"width\")\n\n\nclass fieldset(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\"\"\"\n\n    tag = \"fieldset\"\n\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    name = DOMProperty(\"name\")\n\n\nclass figcaption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\"\"\"\n\n    tag = \"figcaption\"\n\n\nclass figure(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure\"\"\"\n\n    tag = \"figure\"\n\n\nclass footer(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer\"\"\"\n\n    tag = \"footer\"\n\n\nclass form(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\"\"\n\n    tag = \"form\"\n\n    accept_charset = DOMProperty(\"accept-charset\")\n    action = DOMProperty(\"action\")\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    autocomplete = DOMProperty(\"autocomplete\")\n    enctype = DOMProperty(\"enctype\")\n    name = DOMProperty(\"name\")\n    method = DOMProperty(\"method\")\n    nonvalidate = DOMProperty(\"nonvalidate\")\n    rel = DOMProperty(\"rel\")\n    target = DOMProperty(\"target\")\n\n\nclass h1(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1\"\"\"\n\n    tag = \"h1\"\n\n\nclass h2(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2\"\"\"\n\n    tag = \"h2\"\n\n\nclass h3(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3\"\"\"\n\n    tag = \"h3\"\n\n\nclass h4(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4\"\"\"\n\n    tag = \"h4\"\n\n\nclass h5(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5\"\"\"\n\n    tag = \"h5\"\n\n\nclass h6(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6\"\"\"\n\n    tag = \"h6\"\n\n\nclass head(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head\"\"\"\n\n    tag = \"head\"\n\n\nclass header(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\"\"\"\n\n    tag = \"header\"\n\n\nclass hgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup\"\"\"\n\n    tag = \"hgroup\"\n\n\nclass hr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr\"\"\"\n\n    tag = \"hr\"\n\n    align = DOMProperty(\"align\")\n    color = DOMProperty(\"color\")\n    noshade = DOMProperty(\"noshade\")\n    size = DOMProperty(\"size\")\n    width = DOMProperty(\"width\")\n\n\nclass html(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\"\"\n\n    tag = \"html\"\n\n\nclass i(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i\"\"\"\n\n    tag = \"i\"\n\n\nclass iframe(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\"\"\n\n    tag = \"iframe\"\n\n    allow = DOMProperty(\"allow\")\n    allowfullscreen = DOMProperty(\"allowfullscreen\")\n    height = DOMProperty(\"height\")\n    loading = DOMProperty(\"loading\")\n    name = DOMProperty(\"name\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sandbox = DOMProperty(\"sandbox\")\n    src = DOMProperty(\"src\")\n    srcdoc = DOMProperty(\"srcdoc\")\n    width = DOMProperty(\"width\")\n\n\nclass img(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\"\"\n\n    tag = \"img\"\n\n    alt = DOMProperty(\"alt\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    decoding = DOMProperty(\"decoding\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    height = DOMProperty(\"height\")\n    ismap = DOMProperty(\"ismap\")\n    loading = DOMProperty(\"loading\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sizes = DOMProperty(\"sizes\")\n    src = DOMProperty(\"src\")\n    width = DOMProperty(\"width\")\n\n\n# NOTE: Input is a reserved keyword in Python, so we use input_ instead\nclass input_(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"\"\"\n\n    tag = \"input\"\n\n    accept = DOMProperty(\"accept\")\n    alt = DOMProperty(\"alt\")\n    autofocus = DOMProperty(\"autofocus\")\n    capture = DOMProperty(\"capture\")\n    checked = DOMProperty(\"checked\")\n    dirname = DOMProperty(\"dirname\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    formaction = DOMProperty(\"formaction\")\n    formenctype = DOMProperty(\"formenctype\")\n    formmethod = DOMProperty(\"formmethod\")\n    formnovalidate = DOMProperty(\"formnovalidate\")\n    formtarget = DOMProperty(\"formtarget\")\n    height = DOMProperty(\"height\")\n    list = DOMProperty(\"list\")\n    max = DOMProperty(\"max\")\n    maxlength = DOMProperty(\"maxlength\")\n    min = DOMProperty(\"min\")\n    minlength = DOMProperty(\"minlength\")\n    multiple = DOMProperty(\"multiple\")\n    name = DOMProperty(\"name\")\n    pattern = DOMProperty(\"pattern\")\n    placeholder = DOMProperty(\"placeholder\")\n    popovertarget = DOMProperty(\"popovertarget\")\n    popovertargetaction = DOMProperty(\"popovertargetaction\")\n    readonly = DOMProperty(\"readonly\")\n    required = DOMProperty(\"required\")\n    size = DOMProperty(\"size\")\n    src = DOMProperty(\"src\")\n    step = DOMProperty(\"step\")\n    type = DOMProperty(\"type\")\n    value = DOMProperty(\"value\")\n    width = DOMProperty(\"width\")\n\n\nclass ins(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\"\"\"\n\n    tag = \"ins\"\n\n    cite = DOMProperty(\"cite\")\n    datetime = DOMProperty(\"datetime\")\n\n\nclass kbd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd\"\"\"\n\n    tag = \"kbd\"\n\n\nclass label(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label\"\"\"\n\n    tag = \"label\"\n\n    for_ = DOMProperty(\"for\")\n\n\nclass legend(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend\"\"\"\n\n    tag = \"legend\"\n\n\nclass li(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"\"\"\n\n    tag = \"li\"\n\n    value = DOMProperty(\"value\")\n\n\nclass link(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\"\"\"\n\n    tag = \"link\"\n\n    as_ = DOMProperty(\"as\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disabled = DOMProperty(\"disabled\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    href = DOMProperty(\"href\")\n    imagesizes = DOMProperty(\"imagesizes\")\n    imagesrcset = DOMProperty(\"imagesrcset\")\n    integrity = DOMProperty(\"integrity\")\n    media = DOMProperty(\"media\")\n    rel = DOMProperty(\"rel\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    sizes = DOMProperty(\"sizes\")\n    title = DOMProperty(\"title\")\n    type = DOMProperty(\"type\")\n\n\nclass main(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main\"\"\"\n\n    tag = \"main\"\n\n\nclass map_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\"\"\n\n    tag = \"map\"\n\n    name = DOMProperty(\"name\")\n\n\nclass mark(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\"\"\"\n\n    tag = \"mark\"\n\n\nclass menu(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu\"\"\"\n\n    tag = \"menu\"\n\n\nclass meta(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\"\"\"\n\n    tag = \"meta\"\n\n    charset = DOMProperty(\"charset\")\n    content = DOMProperty(\"content\")\n    http_equiv = DOMProperty(\"http-equiv\")\n    name = DOMProperty(\"name\")\n\n\nclass meter(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\"\"\n\n    tag = \"meter\"\n\n    form = DOMProperty(\"form\")\n    high = DOMProperty(\"high\")\n    low = DOMProperty(\"low\")\n    max = DOMProperty(\"max\")\n    min = DOMProperty(\"min\")\n    optimum = DOMProperty(\"optimum\")\n    value = DOMProperty(\"value\")\n\n\nclass nav(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\"\"\"\n\n    tag = \"nav\"\n\n\nclass object_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\"\"\"\n\n    tag = \"object\"\n\n    data = DOMProperty(\"data\")\n    form = DOMProperty(\"form\")\n    height = DOMProperty(\"height\")\n    name = DOMProperty(\"name\")\n    type = DOMProperty(\"type\")\n    usemap = DOMProperty(\"usemap\")\n    width = DOMProperty(\"width\")\n\n\nclass ol(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\"\"\"\n\n    tag = \"ol\"\n\n    reversed = DOMProperty(\"reversed\")\n    start = DOMProperty(\"start\")\n    type = DOMProperty(\"type\")\n\n\nclass optgroup(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\"\"\"\n\n    tag = \"optgroup\"\n\n    disabled = DOMProperty(\"disabled\")\n    label = DOMProperty(\"label\")\n\n\nclass option(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\"\"\"\n\n    tag = \"option\"\n\n    disabled = DOMProperty(\"value\")\n    label = DOMProperty(\"label\")\n    selected = DOMProperty(\"selected\")\n    value = DOMProperty(\"value\")\n\n\nclass output(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output\"\"\"\n\n    tag = \"output\"\n\n    for_ = DOMProperty(\"for\")\n    form = DOMProperty(\"form\")\n    name = DOMProperty(\"name\")\n\n\nclass p(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n    tag = \"p\"\n\n\nclass param(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n    tag = \"p\"\n\n\nclass picture(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture\"\"\"\n\n    tag = \"picture\"\n\n\nclass pre(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre\"\"\"\n\n    tag = \"pre\"\n\n\nclass progress(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"\"\"\n\n    tag = \"progress\"\n\n    max = DOMProperty(\"max\")\n    value = DOMProperty(\"value\")\n\n\nclass q(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q\"\"\"\n\n    tag = \"q\"\n\n    cite = DOMProperty(\"cite\")\n\n\nclass s(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\"\"\"\n\n    tag = \"s\"\n\n\nclass script(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\"\"\n\n    tag = \"script\"\n\n    # Let's add async manually since it's a reserved keyword in Python\n    async_ = DOMProperty(\"async\")\n    blocking = DOMProperty(\"blocking\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    defer = DOMProperty(\"defer\")\n    fetchpriority = DOMProperty(\"fetchpriority\")\n    integrity = DOMProperty(\"integrity\")\n    nomodule = DOMProperty(\"nomodule\")\n    nonce = DOMProperty(\"nonce\")\n    referrerpolicy = DOMProperty(\"referrerpolicy\")\n    src = DOMProperty(\"src\")\n    type = DOMProperty(\"type\")\n\n\nclass section(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\"\"\"\n\n    tag = \"section\"\n\n\nclass select(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\"\"\"\n\n    tag = \"select\"\n\n    value = DOMProperty(\"value\")\n\n\nclass small(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small\"\"\"\n\n    tag = \"small\"\n\n\nclass source(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\"\"\"\n\n    tag = \"source\"\n\n    media = DOMProperty(\"media\")\n    sizes = DOMProperty(\"sizes\")\n    src = DOMProperty(\"src\")\n    srcset = DOMProperty(\"srcset\")\n    type = DOMProperty(\"type\")\n\n\nclass span(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"\"\"\n\n    tag = \"span\"\n\n\nclass strong(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong\"\"\"\n\n    tag = \"strong\"\n\n\nclass style(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\"\"\"\n\n    tag = \"style\"\n\n    blocking = DOMProperty(\"blocking\")\n    media = DOMProperty(\"media\")\n    nonce = DOMProperty(\"nonce\")\n    title = DOMProperty(\"title\")\n\n\nclass sub(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\"\"\"\n\n    tag = \"sub\"\n\n\nclass summary(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary\"\"\"\n\n    tag = \"summary\"\n\n\nclass sup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\"\"\"\n\n    tag = \"sup\"\n\n\nclass table(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"\"\"\n\n    tag = \"table\"\n\n\nclass tbody(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"\"\"\n\n    tag = \"tbody\"\n\n\nclass td(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"\"\"\n\n    tag = \"td\"\n\n    colspan = DOMProperty(\"colspan\")\n    headers = DOMProperty(\"headers\")\n    rowspan = DOMProperty(\"rowspan\")\n\n\nclass template(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\"\"\"\n\n    tag = \"template\"\n\n    shadowrootmode = DOMProperty(\"shadowrootmode\")\n\n\nclass textarea(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\"\"\"\n\n    tag = \"textarea\"\n\n    autocapitalize = DOMProperty(\"autocapitalize\")\n    autocomplete = DOMProperty(\"autocomplete\")\n    autofocus = DOMProperty(\"autofocus\")\n    cols = DOMProperty(\"cols\")\n    dirname = DOMProperty(\"dirname\")\n    disabled = DOMProperty(\"disabled\")\n    form = DOMProperty(\"form\")\n    maxlength = DOMProperty(\"maxlength\")\n    minlength = DOMProperty(\"minlength\")\n    name = DOMProperty(\"name\")\n    placeholder = DOMProperty(\"placeholder\")\n    readonly = DOMProperty(\"readonly\")\n    required = DOMProperty(\"required\")\n    rows = DOMProperty(\"rows\")\n    spellcheck = DOMProperty(\"spellcheck\")\n    value = DOMProperty(\"value\")\n    wrap = DOMProperty(\"wrap\")\n\n\nclass tfoot(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"\"\"\n\n    tag = \"tfoot\"\n\n\nclass th(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th\"\"\"\n\n    tag = \"th\"\n\n\nclass thead(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"\"\"\n\n    tag = \"thead\"\n\n\nclass time(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\"\"\"\n\n    tag = \"time\"\n\n    datetime = DOMProperty(\"datetime\")\n\n\nclass title(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\"\"\"\n\n    tag = \"title\"\n\n\nclass tr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"\"\"\n\n    tag = \"tr\"\n\n    abbr = DOMProperty(\"abbr\")\n    colspan = DOMProperty(\"colspan\")\n    headers = DOMProperty(\"headers\")\n    rowspan = DOMProperty(\"rowspan\")\n    scope = DOMProperty(\"scope\")\n\n\nclass track(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\"\"\"\n\n    tag = \"track\"\n\n    default = DOMProperty(\"default\")\n    kind = DOMProperty(\"kind\")\n    label = DOMProperty(\"label\")\n    src = DOMProperty(\"src\")\n    srclang = DOMProperty(\"srclang\")\n\n\nclass u(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u\"\"\"\n\n    tag = \"u\"\n\n\nclass ul(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"\"\"\n\n    tag = \"ul\"\n\n\nclass var(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var\"\"\"\n\n    tag = \"var\"\n\n\nclass video(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\"\"\"\n\n    tag = \"video\"\n\n    autoplay = DOMProperty(\"autoplay\")\n    controls = DOMProperty(\"controls\")\n    crossorigin = DOMProperty(\"crossorigin\")\n    disablepictureinpicture = DOMProperty(\"disablepictureinpicture\")\n    disableremoteplayback = DOMProperty(\"disableremoteplayback\")\n    height = DOMProperty(\"height\")\n    loop = DOMProperty(\"loop\")\n    muted = DOMProperty(\"muted\")\n    playsinline = DOMProperty(\"playsinline\")\n    poster = DOMProperty(\"poster\")\n    preload = DOMProperty(\"preload\")\n    src = DOMProperty(\"src\")\n    width = DOMProperty(\"width\")\n    videoHeight = DOMProperty(\"videoHeight\")\n    videoWidth = DOMProperty(\"videoWidth\")\n\n    def snap(\n        self,\n        to: Element | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Capture a snapshot (i.e. a single frame) of a video to a canvas.\n\n        Inputs:\n\n            * to: the canvas to save the video frame to (if None, one is created).\n            * width: width of the snapshot (defaults to the video width).\n            * height: height of the snapshot (defaults to the video height).\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        width = width if width is not None else self.videoWidth\n        height = height if height is not None else self.videoHeight\n\n        if to is None:\n            to = canvas(width=width, height=height)\n\n        elif isinstance(to, Element):\n            if to.tag != \"canvas\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            to = canvas(dom_element=to)\n\n        # If 'to' is a string, then assume it is a query selector.\n        elif isinstance(to, str):\n            nodelist = document.querySelectorAll(to)  # NOQA\n            if nodelist.length == 0:\n                raise TypeError(\"No element with selector {to} to snap to.\")\n\n            if nodelist[0].tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n            to = canvas(dom_element=nodelist[0])\n\n        to.draw(self, width, height)\n\n        return to\n\n\nclass wbr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\"\"\"\n\n    tag = \"wbr\"\n\n\n# Custom Elements\nclass grid(ContainerElement):\n    tag = \"div\"\n\n    def __init__(self, layout, content=None, gap=None, **kwargs):\n        super().__init__(content, **kwargs)\n        self.style[\"display\"] = \"grid\"\n        self.style[\"grid-template-columns\"] = layout\n\n        # TODO: This should be a property\n        if gap is not None:\n            self.style[\"gap\"] = gap\n\n\nclass ClassesCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __contains__(self, class_name):\n        for element in self._collection:\n            if class_name in element.classes:\n                return True\n\n        return False\n\n    def __eq__(self, other):\n        return (\n            isinstance(other, ClassesCollection)\n            and self._collection == other._collection\n        )\n\n    def __iter__(self):\n        for class_name in self._all_class_names():\n            yield class_name\n\n    def __len__(self):\n        return len(self._all_class_names())\n\n    def __repr__(self):\n        return f\"ClassesCollection({repr(self._collection)})\"\n\n    def __str__(self):\n        return \" \".join(self._all_class_names())\n\n    def add(self, *class_names):\n        for element in self._collection:\n            element.classes.add(*class_names)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for element in self._collection:\n            element.classes.remove(*class_names)\n\n    def replace(self, old_class, new_class):\n        for element in self._collection:\n            element.classes.replace(old_class, new_class)\n\n    def toggle(self, *class_names):\n        for element in self._collection:\n            element.classes.toggle(*class_names)\n\n    def _all_class_names(self):\n        all_class_names = set()\n        for element in self._collection:\n            for class_name in element.classes:\n                all_class_names.add(class_name)\n\n        return all_class_names\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def __repr__(self):\n        return f\"StyleCollection({repr(self._collection)})\"\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self._classes = ClassesCollection(self)\n        self._style = StyleCollection(self)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM elements.\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a query selector.\n        return self.find(key)\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __repr__(self):\n        return (\n            f\"{self.__class__.__name__} (length: {len(self._elements)}) \"\n            f\"{self._elements}\"\n        )\n\n    def __getattr__(self, item):\n        return self._get_attribute(item)\n\n    def __setattr__(self, key, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # elements in the collection, but we don't use the usual Python pattern where we\n        # set attributes on the collection itself via `self.__dict__` as it is not yet\n        # supported in our build of MicroPython. Instead, we handle it here.\n        if key.startswith(\"_\"):\n            super().__setattr__(key, value)\n\n        else:\n            self._set_attribute(key, value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def style(self):\n        return self._style\n\n    def find(self, selector):\n        elements = []\n        for element in self._elements:\n            elements.extend(element.find(selector))\n\n        return ElementCollection(elements)\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n\n# fmt: off\nELEMENT_CLASSES = [\n    # We put grid first because it is really just a <div> but we want the div class to\n    # be used if wrapping existing js elements that we have not tagged with a\n    # `data-pyscript-type` attribute (last one is the winner when it comes to this\n    # list).\n    grid,\n    # The rest in alphabetical order.\n    a, abbr, address, area, article, aside, audio,\n    b, base, blockquote, body, br, button,\n    canvas, caption, cite, code, col, colgroup,\n    data, datalist, dd, del_, details, dialog, div, dl, dt,\n    em, embed,\n    fieldset, figcaption, figure, footer, form,\n    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,\n    i, iframe, img, input_, ins,\n    kbd,\n    label, legend, li, link,\n    main, map_, mark, menu, meta, meter,\n    nav,\n    object_, ol, optgroup, option, output,\n    p, param, picture, pre, progress,\n    q,\n    s, script, section, select, small, source, span, strong, style, sub, summary, sup,\n    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,\n    u, ul,\n    var, video,\n    wbr,\n]\n# fmt: on\n\n\n# Lookup tables to get an element class by its name or tag.\nELEMENT_CLASSES_BY_NAME = {cls.__name__: cls for cls in ELEMENT_CLASSES}\nELEMENT_CLASSES_BY_TAG = {cls.tag: cls for cls in ELEMENT_CLASSES}\n"
+      "elements.py": "try:\n    from typing import Any\n\nexcept ImportError:\n    Any = \"Any\"\n\ntry:\n    import warnings\n\nexcept ImportError:\n    # TODO: For now it probably means we are in MicroPython. We should figure\n    # out the \"right\" way to handle this. For now we just ignore the warning\n    # and logging to console\n    class warnings:\n        @staticmethod\n        def warn(*args, **kwargs):\n            print(\"WARNING: \", *args, **kwargs)\n\n\nfrom pyscript import document\n\n\nclass Element:\n    @classmethod\n    def from_dom_element(cls, dom_element):\n        \"\"\"Create an instance of a subclass of `Element` for a DOM element.\"\"\"\n\n        element_cls = ELEMENT_CLASSES_BY_TAG_NAME.get(dom_element.tagName.lower())\n\n        # For any unknown elements (custom tags etc.) create an instance of this\n        # class ('Element').\n        if not element_cls:\n            element_cls = cls\n\n        return element_cls(dom_element=dom_element)\n\n    def __init__(self, dom_element=None, classes=None, style=None, **kwargs):\n        \"\"\"Create a new, or wrap an existing DOM element.\n\n        If `dom_element` is None we are being called to *create* a new element.\n        Otherwise, we are being called to *wrap* an existing DOM element.\n        \"\"\"\n        self._dom_element = dom_element or document.createElement(\n            type(self).__name__.replace(\"_\", \"\")\n        )\n\n        self._parent = None\n        self._classes = Classes(self)\n        self._style = Style(self)\n\n        # Set any specified classes, styles, and DOM properties.\n        self.update(classes=classes, style=style, **kwargs)\n\n    def __getattr__(self, name):\n        # This allows us to get attributes on the underlying DOM element that clash\n        # with Python keywords or built-ins (e.g. the output element has an\n        # attribute `for` which is a Python keyword, so you can access it on the\n        # Element instance via `for_`).\n        if name.endswith(\"_\"):\n            name = name[:-1]\n\n        return getattr(self._dom_element, name)\n\n    def __setattr__(self, name, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # underlying DOM element. BUT, we don't use the usual Python pattern where\n        # we set attributes on the element itself via `self.__dict__` as that is not\n        # yet supported in our build of MicroPython. Instead, we handle it here by\n        # using super for all \"private\" attributes (those starting with an underscore).\n        if name.startswith(\"_\"):\n            super().__setattr__(name, value)\n\n        else:\n            # This allows us to set attributes on the underlying DOM element that clash\n            # with Python keywords or built-ins (e.g. the output element has an\n            # attribute `for` which is a Python keyword, so you can access it on the\n            # Element instance via `for_`).\n            if name.endswith(\"_\"):\n                name = name[:-1]\n\n            setattr(self._dom_element, name, value)\n\n    def update(self, classes=None, style=None, **kwargs):\n        \"\"\"Update the element with the specified classes, styles, and DOM properties.\"\"\"\n\n        if classes:\n            self.classes.add(classes)\n\n        if isinstance(style, dict):\n            self.style.set(**style)\n\n        elif style is not None:\n            raise ValueError(\n                f\"Style should be a dictionary, received {style} \"\n                f\"(type {type(style)}) instead.\"\n            )\n\n        self._set_dom_properties(**kwargs)\n\n    def _set_dom_properties(self, **kwargs):\n        \"\"\"Set the specified DOM properties.\n\n        Args:\n            **kwargs: The properties to set\n        \"\"\"\n        for name, value in kwargs.items():\n            setattr(self, name, value)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM element.\"\"\"\n        return isinstance(obj, Element) and obj._dom_element == self._dom_element\n\n    @property\n    def children(self):\n        return ElementCollection(\n            [Element.from_dom_element(el) for el in self._dom_element.children]\n        )\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def parent(self):\n        if self._parent:\n            return self._parent\n\n        if self._dom_element.parentElement:\n            self._parent = Element.from_dom_element(self._dom_element.parentElement)\n\n        return self._parent\n\n    @property\n    def style(self):\n        return self._style\n\n    def append(self, child):\n        if isinstance(child, Element):\n            self._dom_element.appendChild(child._dom_element)\n\n        elif isinstance(child, ElementCollection):\n            for el in child:\n                self._dom_element.appendChild(el._dom_element)\n\n        else:\n            # In this case we know it's not an Element or an ElementCollection, so we\n            # guess that it's either a DOM element or NodeList returned via the ffi.\n            try:\n                # First, we try to see if it's an element by accessing the 'tagName'\n                # attribute.\n                child.tagName\n                self._dom_element.appendChild(child)\n\n            except AttributeError:\n                try:\n                    # Ok, it's not an element, so let's see if it's a NodeList by\n                    # accessing the 'length' attribute.\n                    child.length\n                    for element_ in child:\n                        self._dom_element.appendChild(element_)\n\n                except AttributeError:\n                    # Nope! This is not an element or a NodeList.\n                    raise TypeError(\n                        f'Element \"{child}\" is a proxy object, \"'\n                        f\"but not a valid element or a NodeList.\"\n                    )\n\n    def clone(self, clone_id=None):\n        \"\"\"Make a clone of the element (clones the underlying DOM object too).\"\"\"\n        clone = Element.from_dom_element(self._dom_element.cloneNode(True))\n        clone.id = clone_id\n        return clone\n\n    def find(self, selector):\n        \"\"\"Return an ElementCollection representing all the child elements that\n        match the specified selector.\n\n        Args:\n            selector (str): A string containing a selector expression\n\n        Returns:\n            ElementCollection: A collection of elements matching the selector\n        \"\"\"\n        return ElementCollection(\n            [\n                Element.from_dom_element(dom_element)\n                for dom_element in self._dom_element.querySelectorAll(selector)\n            ]\n        )\n\n    def show_me(self):\n        \"\"\"Scroll the element into view.\"\"\"\n        self._dom_element.scrollIntoView()\n\n\nclass Classes:\n    \"\"\"A set-like interface to an element's `classList`.\"\"\"\n\n    def __init__(self, element: Element):\n        self._element = element\n        self._class_list = self._element._dom_element.classList\n\n    def __contains__(self, item):\n        return item in self._class_list\n\n    def __eq__(self, other):\n        # We allow comparison with either another `Classes` instance...\n        if isinstance(other, Classes):\n            compare_with = list(other._class_list)\n\n        # ...or iterables of strings.\n        else:\n            # TODO: Check MP for existence of better iterable test.\n            try:\n                compare_with = iter(other)\n\n            except TypeError:\n                return False\n\n        return set(self._class_list) == set(compare_with)\n\n    def __iter__(self):\n        return iter(self._class_list)\n\n    def __len__(self):\n        return self._class_list.length\n\n    def __repr__(self):\n        return f\"Classes({', '.join(self._class_list)})\"\n\n    def __str__(self):\n        return \" \".join(self._class_list)\n\n    def add(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.add(item)\n\n            else:\n                self._class_list.add(class_name)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for class_name in class_names:\n            if isinstance(class_name, list):\n                for item in class_name:\n                    self.remove(item)\n\n            else:\n                self._class_list.remove(class_name)\n\n    def replace(self, old_class, new_class):\n        self.remove(old_class)\n        self.add(new_class)\n\n    def toggle(self, *class_names):\n        for class_name in class_names:\n            if class_name in self:\n                self.remove(class_name)\n\n            else:\n                self.add(class_name)\n\n\nclass HasOptions:\n    \"\"\"Mix-in for elements that have an options attribute.\n\n    The elements that support options are: <datalist>, <optgroup>, and <select>.\n    \"\"\"\n\n    @property\n    def options(self):\n        if not hasattr(self, \"_options\"):\n            self._options = Options(self)\n\n        return self._options\n\n\nclass Options:\n    \"\"\"This class represents the <option>s of a <datalist>, <optgroup> or <select>\n    element.\n\n    It allows to access to add and remove <option>s by using the `add` and `remove`\n    methods.\n    \"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n\n    def add(\n        self,\n        value: Any = None,\n        html: str = None,\n        text: str = None,\n        before: Element | int = None,\n        **kws,\n    ) -> None:\n        \"\"\"Add a new option to the select element\"\"\"\n\n        option = document.createElement(\"option\")\n        if value is not None:\n            kws[\"value\"] = value\n        if html is not None:\n            option.innerHTML = html\n        if text is not None:\n            kws[\"text\"] = text\n\n        for key, value in kws.items():\n            option.setAttribute(key, value)\n\n        if before:\n            if isinstance(before, Element):\n                before = before._dom_element\n\n        self._element._dom_element.add(option, before)\n\n    def remove(self, item: int) -> None:\n        \"\"\"Remove the option at the specified index\"\"\"\n        self._element._dom_element.remove(item)\n\n    def clear(self) -> None:\n        \"\"\"Remove all the options\"\"\"\n        for i in range(len(self)):\n            self.remove(0)\n\n    @property\n    def options(self):\n        \"\"\"Return the list of options\"\"\"\n        return [\n            Element.from_dom_element(opt) for opt in self._element._dom_element.options\n        ]\n\n    @property\n    def selected(self):\n        \"\"\"Return the selected option\"\"\"\n        return self.options[self._element._dom_element.selectedIndex]\n\n    def __iter__(self):\n        yield from self.options\n\n    def __len__(self):\n        return len(self.options)\n\n    def __repr__(self):\n        return f\"{self.__class__.__name__} (length: {len(self)}) {self.options}\"\n\n    def __getitem__(self, key):\n        return self.options[key]\n\n\nclass Style:\n    \"\"\"A dict-like interface to an element's css style.\"\"\"\n\n    def __init__(self, element: Element) -> None:\n        self._element = element\n        self._style = self._element._dom_element.style\n\n    def __getitem__(self, key):\n        return self._style.getPropertyValue(key)\n\n    def __setitem__(self, key, value):\n        self._style.setProperty(key, value)\n\n    def remove(self, key):\n        self._style.removeProperty(key)\n\n    def set(self, **kwargs):\n        for key, value in kwargs.items():\n            self._element._dom_element.style.setProperty(key, value)\n\n    # CSS Properties\n    # Reference: https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3799C1-L5005C2\n    # Following properties automatically generated from the above reference using\n    # tools/codegen_css_proxy.py\n    @property\n    def visible(self):\n        return self._element._dom_element.style.visibility\n\n    @visible.setter\n    def visible(self, value):\n        self._element._dom_element.style.visibility = value\n\n\nclass ContainerElement(Element):\n    \"\"\"Base class for elements that can contain other elements.\"\"\"\n\n    def __init__(\n        self, *args, children=None, dom_element=None, style=None, classes=None, **kwargs\n    ):\n        super().__init__(\n            dom_element=dom_element, style=style, classes=classes, **kwargs\n        )\n\n        for child in list(args) + (children or []):\n            if isinstance(child, Element) or isinstance(child, ElementCollection):\n                self.append(child)\n\n            else:\n                self.innerHTML += child\n\n\n# Classes for every element type. If the element type (e.g. \"input\") clashes with\n# either a Python keyword or common symbol, then we suffix the class name with an \"_\"\n# (e.g. \"input_\").\n\n\nclass a(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\"\"\"\n\n\nclass abbr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr\"\"\"\n\n\nclass address(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address\"\"\"\n\n\nclass area(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area\"\"\"\n\n\nclass article(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\"\"\"\n\n\nclass aside(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside\"\"\"\n\n\nclass audio(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio\"\"\"\n\n\nclass b(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b\"\"\"\n\n\nclass base(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\"\"\"\n\n\nclass blockquote(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote\"\"\"\n\n\nclass body(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\"\"\"\n\n\nclass br(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br\"\"\"\n\n\nclass button(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\"\"\"\n\n\nclass canvas(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas\"\"\"\n\n    def download(self, filename: str = \"snapped.png\") -> None:\n        \"\"\"Download the current element with the filename provided in input.\n\n        Inputs:\n            * filename (str): name of the file being downloaded\n\n        Output:\n            None\n        \"\"\"\n        download_link = a(download=filename, href=self._dom_element.toDataURL())\n\n        # Adding the link to the DOM is recommended for browser compatibility to make\n        # sure that the click works.\n        self.append(download_link)\n\n        download_link._dom_element.click()\n\n    def draw(self, what, width=None, height=None):\n        \"\"\"Draw `what` on the current element\n\n        Inputs:\n\n            * what (canvas image source): An element to draw into the context. The\n                specification permits any canvas image source, specifically, an\n                HTMLImageElement, an SVGImageElement, an HTMLVideoElement,\n                an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, or a\n                VideoFrame.\n        \"\"\"\n        if isinstance(what, Element):\n            what = what._dom_element\n\n        # https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage\n        ctx = self._dom_element.getContext(\"2d\")\n        if width or height:\n            ctx.drawImage(what, 0, 0, width, height)\n\n        else:\n            ctx.drawImage(what, 0, 0)\n\n\nclass caption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption\"\"\"\n\n\nclass cite(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite\"\"\"\n\n\nclass code(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code\"\"\"\n\n\nclass col(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col\"\"\"\n\n\nclass colgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup\"\"\"\n\n\nclass data(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\"\"\"\n\n\nclass datalist(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist\"\"\"\n\n\nclass dd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\"\"\"\n\n\nclass del_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\"\"\"\n\n\nclass details(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details\"\"\"\n\n\nclass dialog(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\"\"\"\n\n\nclass div(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div\"\"\"\n\n\nclass dl(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\"\"\"\n\n\nclass dt(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt\"\"\"\n\n\nclass em(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em\"\"\"\n\n\nclass embed(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed\"\"\"\n\n\nclass fieldset(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset\"\"\"\n\n\nclass figcaption(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption\"\"\"\n\n\nclass figure(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure\"\"\"\n\n\nclass footer(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer\"\"\"\n\n\nclass form(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form\"\"\"\n\n\nclass h1(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1\"\"\"\n\n\nclass h2(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2\"\"\"\n\n\nclass h3(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3\"\"\"\n\n\nclass h4(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4\"\"\"\n\n\nclass h5(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h5\"\"\"\n\n\nclass h6(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h6\"\"\"\n\n\nclass head(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head\"\"\"\n\n\nclass header(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\"\"\"\n\n\nclass hgroup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup\"\"\"\n\n\nclass hr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr\"\"\"\n\n\nclass html(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\"\"\n\n\nclass i(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i\"\"\"\n\n\nclass iframe(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\"\"\"\n\n\nclass img(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\"\"\n\n\nclass input_(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\"\"\"\n\n\nclass ins(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\"\"\"\n\n\nclass kbd(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd\"\"\"\n\n\nclass label(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label\"\"\"\n\n\nclass legend(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend\"\"\"\n\n\nclass li(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li\"\"\"\n\n\nclass link(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\"\"\"\n\n\nclass main(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main\"\"\"\n\n\nclass map_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map\"\"\"\n\n\nclass mark(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\"\"\"\n\n\nclass menu(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu\"\"\"\n\n\nclass meta(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\"\"\"\n\n\nclass meter(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter\"\"\"\n\n\nclass nav(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\"\"\"\n\n\nclass object_(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object\"\"\"\n\n\nclass ol(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol\"\"\"\n\n\nclass optgroup(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\"\"\"\n\n\nclass option(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option\"\"\"\n\n\nclass output(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output\"\"\"\n\n\nclass p(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p\"\"\"\n\n\nclass param(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param\"\"\"\n\n\nclass picture(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture\"\"\"\n\n\nclass pre(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre\"\"\"\n\n\nclass progress(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\"\"\"\n\n\nclass q(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q\"\"\"\n\n\nclass s(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\"\"\"\n\n\nclass script(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\"\"\n\n\nclass section(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\"\"\"\n\n\nclass select(ContainerElement, HasOptions):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\"\"\"\n\n\nclass small(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small\"\"\"\n\n\nclass source(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source\"\"\"\n\n\nclass span(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span\"\"\"\n\n\nclass strong(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong\"\"\"\n\n\nclass style(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\"\"\"\n\n\nclass sub(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub\"\"\"\n\n\nclass summary(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary\"\"\"\n\n\nclass sup(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup\"\"\"\n\n\nclass table(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table\"\"\"\n\n\nclass tbody(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody\"\"\"\n\n\nclass td(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td\"\"\"\n\n\nclass template(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template\"\"\"\n\n\nclass textarea(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\"\"\"\n\n\nclass tfoot(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot\"\"\"\n\n\nclass th(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th\"\"\"\n\n\nclass thead(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead\"\"\"\n\n\nclass time(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\"\"\"\n\n\nclass title(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\"\"\"\n\n\nclass tr(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr\"\"\"\n\n\nclass track(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track\"\"\"\n\n\nclass u(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u\"\"\"\n\n\nclass ul(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul\"\"\"\n\n\nclass var(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var\"\"\"\n\n\nclass video(ContainerElement):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\"\"\"\n\n    def snap(\n        self,\n        to: Element | str = None,\n        width: int | None = None,\n        height: int | None = None,\n    ):\n        \"\"\"\n        Capture a snapshot (i.e. a single frame) of a video to a canvas.\n\n        Inputs:\n\n            * to: the canvas to save the video frame to (if None, one is created).\n            * width: width of the snapshot (defaults to the video width).\n            * height: height of the snapshot (defaults to the video height).\n\n        Output:\n            (Element) canvas element where the video frame snapshot was drawn into\n        \"\"\"\n        width = width if width is not None else self.videoWidth\n        height = height if height is not None else self.videoHeight\n\n        if to is None:\n            to = canvas(width=width, height=height)\n\n        elif isinstance(to, Element):\n            if to.tag != \"canvas\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n        elif getattr(to, \"tagName\", \"\") == \"CANVAS\":\n            to = canvas(dom_element=to)\n\n        # If 'to' is a string, then assume it is a query selector.\n        elif isinstance(to, str):\n            nodelist = document.querySelectorAll(to)  # NOQA\n            if nodelist.length == 0:\n                raise TypeError(\"No element with selector {to} to snap to.\")\n\n            if nodelist[0].tagName != \"CANVAS\":\n                raise TypeError(\"Element to snap to must be a canvas.\")\n\n            to = canvas(dom_element=nodelist[0])\n\n        to.draw(self, width, height)\n\n        return to\n\n\nclass wbr(Element):\n    \"\"\"Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\"\"\"\n\n\nclass ClassesCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __contains__(self, class_name):\n        for element in self._collection:\n            if class_name in element.classes:\n                return True\n\n        return False\n\n    def __eq__(self, other):\n        return (\n            isinstance(other, ClassesCollection)\n            and self._collection == other._collection\n        )\n\n    def __iter__(self):\n        for class_name in self._all_class_names():\n            yield class_name\n\n    def __len__(self):\n        return len(self._all_class_names())\n\n    def __repr__(self):\n        return f\"ClassesCollection({repr(self._collection)})\"\n\n    def __str__(self):\n        return \" \".join(self._all_class_names())\n\n    def add(self, *class_names):\n        for element in self._collection:\n            element.classes.add(*class_names)\n\n    def contains(self, class_name):\n        return class_name in self\n\n    def remove(self, *class_names):\n        for element in self._collection:\n            element.classes.remove(*class_names)\n\n    def replace(self, old_class, new_class):\n        for element in self._collection:\n            element.classes.replace(old_class, new_class)\n\n    def toggle(self, *class_names):\n        for element in self._collection:\n            element.classes.toggle(*class_names)\n\n    def _all_class_names(self):\n        all_class_names = set()\n        for element in self._collection:\n            for class_name in element.classes:\n                all_class_names.add(class_name)\n\n        return all_class_names\n\n\nclass StyleCollection:\n    def __init__(self, collection: \"ElementCollection\") -> None:\n        self._collection = collection\n\n    def __get__(self, obj, objtype=None):\n        return obj._get_attribute(\"style\")\n\n    def __getitem__(self, key):\n        return self._collection._get_attribute(\"style\")[key]\n\n    def __setitem__(self, key, value):\n        for element in self._collection._elements:\n            element.style[key] = value\n\n    def __repr__(self):\n        return f\"StyleCollection({repr(self._collection)})\"\n\n    def remove(self, key):\n        for element in self._collection._elements:\n            element.style.remove(key)\n\n\nclass ElementCollection:\n    def __init__(self, elements: [Element]) -> None:\n        self._elements = elements\n        self._classes = ClassesCollection(self)\n        self._style = StyleCollection(self)\n\n    def __eq__(self, obj):\n        \"\"\"Check for equality by comparing the underlying DOM elements.\"\"\"\n        return isinstance(obj, ElementCollection) and obj._elements == self._elements\n\n    def __getitem__(self, key):\n        # If it's an integer we use it to access the elements in the collection\n        if isinstance(key, int):\n            return self._elements[key]\n\n        # If it's a slice we use it to support slice operations over the elements\n        # in the collection\n        elif isinstance(key, slice):\n            return ElementCollection(self._elements[key])\n\n        # If it's anything else (basically a string) we use it as a query selector.\n        return self.find(key)\n\n    def __iter__(self):\n        yield from self._elements\n\n    def __len__(self):\n        return len(self._elements)\n\n    def __repr__(self):\n        return (\n            f\"{self.__class__.__name__} (length: {len(self._elements)}) \"\n            f\"{self._elements}\"\n        )\n\n    def __getattr__(self, item):\n        return self._get_attribute(item)\n\n    def __setattr__(self, key, value):\n        # This class overrides `__setattr__` to delegate \"public\" attributes to the\n        # elements in the collection. BUT, we don't use the usual Python pattern where\n        # we set attributes on the collection itself via `self.__dict__` as that is not\n        # yet supported in our build of MicroPython. Instead, we handle it here by\n        # using super for all \"private\" attributes (those starting with an underscore).\n        if key.startswith(\"_\"):\n            super().__setattr__(key, value)\n\n        else:\n            self._set_attribute(key, value)\n\n    @property\n    def children(self):\n        return self._elements\n\n    @property\n    def classes(self):\n        return self._classes\n\n    @property\n    def style(self):\n        return self._style\n\n    def find(self, selector):\n        elements = []\n        for element in self._elements:\n            elements.extend(element.find(selector))\n\n        return ElementCollection(elements)\n\n    def _get_attribute(self, attr, index=None):\n        if index is None:\n            return [getattr(el, attr) for el in self._elements]\n\n        # As JQuery, when getting an attr, only return it for the first element\n        return getattr(self._elements[index], attr)\n\n    def _set_attribute(self, attr, value):\n        for el in self._elements:\n            setattr(el, attr, value)\n\n\n# fmt: off\nELEMENT_CLASSES = [\n    a, abbr, address, area, article, aside, audio,\n    b, base, blockquote, body, br, button,\n    canvas, caption, cite, code, col, colgroup,\n    data, datalist, dd, del_, details, dialog, div, dl, dt,\n    em, embed,\n    fieldset, figcaption, figure, footer, form,\n    h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html,\n    i, iframe, img, input_, ins,\n    kbd,\n    label, legend, li, link,\n    main, map_, mark, menu, meta, meter,\n    nav,\n    object_, ol, optgroup, option, output,\n    p, param, picture, pre, progress,\n    q,\n    s, script, section, select, small, source, span, strong, style, sub, summary, sup,\n    table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track,\n    u, ul,\n    var, video,\n    wbr,\n]\n# fmt: on\n\n\n# Lookup table to get an element class by its tag name.\nELEMENT_CLASSES_BY_TAG_NAME = {\n    cls.__name__.replace(\"_\", \"\"): cls for cls in ELEMENT_CLASSES\n}\n"
     },
     "websocket.py": "import js\nfrom pyscript.util import as_bytearray\n\ncode = \"code\"\nprotocols = \"protocols\"\nreason = \"reason\"\n\n\nclass EventMessage:\n    def __init__(self, event):\n        self._event = event\n\n    def __getattr__(self, attr):\n        value = getattr(self._event, attr)\n\n        if attr == \"data\" and not isinstance(value, str):\n            if hasattr(value, \"to_py\"):\n                return value.to_py()\n            # shims in MicroPython\n            return memoryview(as_bytearray(value))\n\n        return value\n\n\nclass WebSocket(object):\n    CONNECTING = 0\n    OPEN = 1\n    CLOSING = 2\n    CLOSED = 3\n\n    def __init__(self, **kw):\n        url = kw[\"url\"]\n        if protocols in kw:\n            socket = js.WebSocket.new(url, kw[protocols])\n        else:\n            socket = js.WebSocket.new(url)\n        object.__setattr__(self, \"_ws\", socket)\n\n        for t in [\"onclose\", \"onerror\", \"onmessage\", \"onopen\"]:\n            if t in kw:\n                socket[t] = kw[t]\n\n    def __getattr__(self, attr):\n        return getattr(self._ws, attr)\n\n    def __setattr__(self, attr, value):\n        if attr == \"onmessage\":\n            self._ws[attr] = lambda e: value(EventMessage(e))\n        else:\n            self._ws[attr] = value\n\n    def close(self, **kw):\n        if code in kw and reason in kw:\n            self._ws.close(kw[code], kw[reason])\n        elif code in kw:\n            self._ws.close(kw[code])\n        else:\n            self._ws.close()\n\n    def send(self, data):\n        if isinstance(data, str):\n            self._ws.send(data)\n        else:\n            buffer = js.Uint8Array.new(len(data))\n            for pos, b in enumerate(data):\n                buffer[pos] = b\n            self._ws.send(buffer)\n",
     "workers.py": "import js as _js\nfrom polyscript import workers as _workers\n\n_get = _js.Reflect.get\n\n\ndef _set(script, name, value=\"\"):\n    script.setAttribute(name, value)\n\n\n# this solves an inconsistency between Pyodide and MicroPython\n# @see https://github.com/pyscript/pyscript/issues/2106\nclass _ReadOnlyProxy:\n    def __getitem__(self, name):\n        return _get(_workers, name)\n\n    def __getattr__(self, name):\n        return _get(_workers, name)\n\n\nworkers = _ReadOnlyProxy()\n\n\nasync def create_named_worker(src=\"\", name=\"\", config=None, type=\"py\"):\n    from json import dumps\n\n    if not src:\n        raise ValueError(\"Named workers require src\")\n\n    if not name:\n        raise ValueError(\"Named workers require a name\")\n\n    s = _js.document.createElement(\"script\")\n    s.type = type\n    s.src = src\n    _set(s, \"worker\")\n    _set(s, \"name\", name)\n\n    if config:\n        _set(s, \"config\", isinstance(config, str) and config or dumps(config))\n\n    _js.document.body.append(s)\n    return await workers[name]\n"