diff --git a/src/Butil/Bit.Butil.Demo/Client/Docs/DocsNav.cs b/src/Butil/Bit.Butil.Demo/Client/Docs/DocsNav.cs
index 6acdabdf519..54633470222 100644
--- a/src/Butil/Bit.Butil.Demo/Client/Docs/DocsNav.cs
+++ b/src/Butil/Bit.Butil.Demo/Client/Docs/DocsNav.cs
@@ -114,8 +114,8 @@ public static class DocsNav
         ]),
         new("DOM & Interaction", "dom",
         [
-            new("Element", "element", "Attributes, scrolling, fullscreen, pointer capture and events on any ElementReference.", typeof(ElementPage), ApiSupport.Broad, ApiNeeds.None,
-                ["ElementReferenceExtensions", "ElementReferenceEventExtensions", "ElementReferenceMediaExtensions"]),
+            new("Element", "element", "Attributes, ARIA, classes, content, scrolling, fullscreen, pointer capture and events on any ElementReference.", typeof(ElementPage), ApiSupport.Broad, ApiNeeds.None,
+                ["ElementReferenceExtensions", "ElementReferenceDomExtensions", "ElementReferenceStateExtensions", "ElementReferenceAriaExtensions", "ElementReferenceEventExtensions", "ElementReferenceMediaExtensions"]),
             new("Animation", "animation", "Run and control Web Animations on any element, straight from C#.", typeof(AnimationPage), ApiSupport.Broad, ApiNeeds.None,
                 ["ElementReferenceAnimationExtensions", "AnimationHandle"]),
             new("PictureInPicture", "picture-in-picture", "Float a video in an always-on-top window outside the page.", typeof(PictureInPicturePage), ApiSupport.Broad, ApiNeeds.UserGesture),
diff --git a/src/Butil/Bit.Butil.Demo/Client/Pages/ElementPage.razor b/src/Butil/Bit.Butil.Demo/Client/Pages/ElementPage.razor
index 1714a1b3f26..11da0ae0180 100644
--- a/src/Butil/Bit.Butil.Demo/Client/Pages/ElementPage.razor
+++ b/src/Butil/Bit.Butil.Demo/Client/Pages/ElementPage.razor
@@ -334,6 +334,284 @@ await box.Remove(); // detaches the element from the DOM
     <DemoConsole @ref="selectorOutput" Title="selector output" />
 </DemoSection>
 
+<DemoSection Title="Activation, focus and visibility"
+             Api="Click / Focus / CheckVisibility / Closest"
+             Description="Click sends a synthetic click - the element's own handlers run and default behavior happens, though it does not count as a user gesture. Focus is the overload Blazor's FocusAsync does not give you: preventScroll, for moving focus without yanking the page. CheckVisibility answers what an IntersectionObserver cannot - whether the element is transparent, collapsed, or inside a skipped content-visibility subtree. Closest reports whether the element sits inside anything matching a selector."
+             Code=@("""
+await button.Click();
+
+await input.Focus(new FocusOptions { PreventScroll = true });
+
+var visible = await box.CheckVisibility(new CheckVisibilityOptions
+{
+    OpacityProperty = true,
+    VisibilityProperty = true,
+    ContentVisibilityAuto = true,
+});
+
+var insideForm = await box.Closest("form");
+""")>
+    <div class="demo-box dashed">
+        <button @ref="clickTargetRef" @onclick="() => syntheticClicks++">
+            Synthetic click target (clicked @syntheticClicks time@(syntheticClicks == 1 ? "" : "s"))
+        </button>
+    </div>
+    <div class="field">
+        <span class="field-label">Focus target</span>
+        <input @ref="focusInputRef" placeholder="Focus(preventScroll) lands here..." style="max-width:20rem;" />
+    </div>
+    <div class="field">
+        <span class="field-label">Closest selector</span>
+        <input @bind-value="closestSelector" style="max-width:20rem;" />
+    </div>
+    <div class="controls">
+        <button @onclick="ClickTarget">Click</button>
+        <button @onclick="FocusInput">Focus (preventScroll)</button>
+        <button class="secondary" @onclick="CheckVisibility">CheckVisibility</button>
+        <button class="secondary" @onclick="Closest">Closest</button>
+    </div>
+    <DemoConsole @ref="activationOutput" Title="activation output" />
+</DemoSection>
+
+<DemoSection Title="Classes, data attributes and inline style"
+             Api="AddClass / RemoveClass / ToggleClass / ReplaceClass / ContainsClass / GetClassList / GetData / SetData / RemoveData / GetDataNames / GetStyleText / SetStyleText / GetStyleProperty / SetStyleProperty / RemoveStyleProperty"
+             Description="classList, dataset and style as individual operations rather than as one string you have to parse and rebuild. SetStyleProperty takes CSS property names, custom properties included, so a theme variable can be written from C#. Blazor owns the DOM it rendered and a re-render can undo all of this - use it on elements Blazor renders once, or on ones outside the component."
+             Code=@("""
+await box.AddClass("card", "highlighted");
+var toggled = await box.ToggleClass("selected");
+var swapped = await box.ReplaceClass("highlighted", "muted");
+var classes = await box.GetClassList();
+
+await box.SetData("userId", "42");        // writes data-user-id
+var id = await box.GetData("userId");
+var keys = await box.GetDataNames();
+
+await box.SetStyleProperty("--accent", "#7c3aed");
+await box.SetStyleProperty("outline", "2px solid var(--accent)", important: true);
+var css = await box.GetStyleText();
+""")>
+    <div @ref="styleBoxRef" class="demo-box">
+        Class, data and style target.
+    </div>
+    <div class="field-row">
+        <div class="field">
+            <span class="field-label">Class token</span>
+            <input @bind-value="classToken" />
+        </div>
+        <div class="field">
+            <span class="field-label">Dataset key</span>
+            <input @bind-value="dataKey" />
+        </div>
+        <div class="field">
+            <span class="field-label">Dataset value</span>
+            <input @bind-value="dataValue" />
+        </div>
+    </div>
+    <div class="controls">
+        <button @onclick="AddClass">AddClass</button>
+        <button @onclick="ToggleClass">ToggleClass</button>
+        <button class="secondary" @onclick="ContainsClass">ContainsClass</button>
+        <button class="secondary" @onclick="GetClassList">GetClassList</button>
+        <button class="danger" @onclick="RemoveClass">RemoveClass</button>
+    </div>
+    <div class="controls">
+        <button @onclick="SetData">SetData</button>
+        <button class="secondary" @onclick="GetData">GetData</button>
+        <button class="secondary" @onclick="GetDataNames">GetDataNames</button>
+        <button class="danger" @onclick="RemoveData">RemoveData</button>
+    </div>
+    <div class="controls">
+        <button @onclick="SetStyleProperty">SetStyleProperty</button>
+        <button class="secondary" @onclick="GetStyleText">GetStyleText</button>
+        <button class="danger" @onclick="RemoveStyleProperty">RemoveStyleProperty</button>
+    </div>
+    <DemoConsole @ref="styleOutput" Title="class, data and style output" />
+</DemoSection>
+
+<DemoSection Title="Content insertion and serialization"
+             Api="Append / Prepend / Before / After / ReplaceChildren / ReplaceWith / InsertAdjacentText / InsertAdjacentHtml / GetHtml / SetHtml / SetHtmlUnsafe"
+             Description="The DOM insertion methods take elements as well as strings, but only strings can cross the interop boundary - an ElementReference is minted by Blazor's renderer and cannot be handed back from JavaScript. So each string becomes a text node, and InsertAdjacentHtml is how markup gets in. SetHtml runs the browser's sanitizer over what you give it, which is the one to reach for when the markup came from a user; it throws rather than silently falling back where the browser has no sanitizer."
+             Code=@("""
+await box.Append("appended text");
+await box.Prepend("prepended text");
+await box.ReplaceChildren("everything else is gone");
+
+await box.InsertAdjacentText(InsertPosition.BeforeEnd, "<not markup>");
+await box.InsertAdjacentHtml(InsertPosition.AfterBegin, "<em>trusted markup</em>");
+
+await box.SetHtml(untrustedMarkup);   // sanitized; throws where unsupported
+var html = await box.GetHtml(new GetHtmlOptions { SerializableShadowRoots = true });
+""")>
+    <div @ref="contentBoxRef" class="demo-box dashed">
+        <span>Original content.</span>
+    </div>
+    <div class="field">
+        <span class="field-label">Text or markup to insert</span>
+        <input @bind-value="insertText" style="max-width:24rem;" />
+    </div>
+    <div class="controls">
+        <button @onclick="AppendText">Append</button>
+        <button @onclick="PrependText">Prepend</button>
+        <button class="secondary" @onclick="InsertAdjacentText">InsertAdjacentText</button>
+        <button class="secondary" @onclick="InsertAdjacentHtml">InsertAdjacentHtml</button>
+        <button class="secondary" @onclick="GetHtml">GetHtml</button>
+        <button class="secondary" @onclick="SetHtmlSanitized">SetHtml (sanitized)</button>
+        <button class="danger" @onclick="ReplaceChildren">ReplaceChildren</button>
+    </div>
+    <DemoConsole @ref="contentInsertOutput" Title="content insertion output" />
+</DemoSection>
+
+<DemoSection Title="ARIA and roles"
+             Api="GetAriaLabel / SetAriaLabel / SetAriaExpanded / SetAriaHidden / GetRole / SetRole / AriaNotify"
+             Description="Every aria-* attribute and role, reflected as a property. Prefer writing these as attributes in your markup - it costs no interop and a re-render cannot undo it; reach for these when the value depends on something outside the render tree, or when reading what a component library put on an element. Every value is a string, numeric and boolean ones included, because that is how ARIA itself is defined. AriaNotify announces a message without changing the page; it is Chromium-only and a no-op elsewhere, so keep the visible UI telling the same story."
+             Code=@("""
+await box.SetRole("button");
+await box.SetAriaLabel("Close the dialog");
+await box.SetAriaExpanded("true");
+await box.SetAriaHidden("false");
+
+var label = await box.GetAriaLabel();
+
+await box.AriaNotify("Upload finished",
+    new AriaNotifyOptions { Priority = AriaNotifyPriority.High });
+""")>
+    <div @ref="ariaBoxRef" class="demo-box">
+        ARIA target.
+    </div>
+    <div class="field-row">
+        <div class="field">
+            <span class="field-label">aria-label</span>
+            <input @bind-value="ariaLabel" />
+        </div>
+        <div class="field">
+            <span class="field-label">role</span>
+            <input @bind-value="ariaRole" />
+        </div>
+    </div>
+    <div class="controls">
+        <button @onclick="SetAria">SetRole + SetAriaLabel</button>
+        <button @onclick="ToggleAriaExpanded">Toggle aria-expanded</button>
+        <button class="secondary" @onclick="ReadAria">Read them back</button>
+        <button class="secondary" @onclick="AriaNotify">AriaNotify</button>
+    </div>
+    <DemoConsole @ref="ariaOutput" Title="ARIA output" />
+</DemoSection>
+
+<DemoSection Title="Popover"
+             Api="GetPopover / SetPopover / ShowPopover / HidePopover / TogglePopover"
+             Description="Turn any element into a popover and drive it from C#. An Auto popover is light-dismissed - Escape or a click outside closes it, and opening one closes the others; a Manual one closes only when the code says so. Show and Hide are no-ops where the browser has no popover support, so a page can call them without feature-detecting first."
+             Code=@("""
+await panel.SetPopover(ElementPopover.Auto);
+
+await panel.ShowPopover();
+var showing = await panel.TogglePopover();
+await panel.HidePopover();
+""")>
+    <div @ref="popoverRef" class="demo-box" style="position:fixed;inset:auto;margin:auto;">
+        I am a popover. Press Escape or click outside to dismiss me.
+    </div>
+    <div class="controls">
+        <button @onclick="MakePopover">SetPopover(Auto)</button>
+        <button @onclick="ShowPopover">ShowPopover</button>
+        <button class="secondary" @onclick="TogglePopover">TogglePopover</button>
+        <button class="danger" @onclick="HidePopover">HidePopover</button>
+    </div>
+    <DemoConsole @ref="popoverOutput" Title="popover output" />
+</DemoSection>
+
+<DemoSection Title="Namespaced attributes, queries and scroll offsets"
+             Api="GetAttributeNS / SetAttributeNS / HasAttributeNS / RemoveAttributeNS / QuerySelectorMatches / QuerySelectorAllCount / GetClientRects / ScrollTo / SetScrollTop / SetScrollLeft"
+             Description="The namespaced attribute methods are what SVG's xlink:href and XML's xml:lang need, and what GetAttribute cannot reach. The query helpers answer the existence and count questions - the elements themselves cannot cross the boundary, so capture the ones you need with @@ref. GetClientRects returns one rect per line box, which is more than one for an inline element that wraps. SetScrollTop and SetScrollLeft jump without animating, where ScrollTo can ease."
+             Code=@("""
+const string Xlink = "http://www.w3.org/1999/xlink";
+
+await icon.SetAttributeNS(Xlink, "xlink:href", "#star");
+var href = await icon.GetAttributeNS(Xlink, "href");
+
+var hasRows = await table.QuerySelectorMatches("tr");
+var rowCount = await table.QuerySelectorAllCount("tr");
+
+var rects = await paragraph.GetClientRects();   // one per line box
+
+await box.SetScrollTop(0);
+await box.ScrollTo(new ScrollOptions { Top = 240, Behavior = ScrollBehavior.Smooth });
+""")>
+    <div @ref="queryBoxRef" class="demo-box dashed" style="height:8rem;overflow:auto;">
+        <p>This paragraph is long enough to wrap over several line boxes, which is what makes GetClientRects report more than one rectangle for it - one per line the text occupies.</p>
+        <ul>
+            <li>first</li>
+            <li>second</li>
+            <li>third</li>
+        </ul>
+        <div style="height:20rem;">Scroll space.</div>
+    </div>
+    <div class="field">
+        <span class="field-label">Descendant selector</span>
+        <input @bind-value="descendantSelector" style="max-width:20rem;" />
+    </div>
+    <div class="controls">
+        <button @onclick="SetAttributeNS">SetAttributeNS</button>
+        <button class="secondary" @onclick="GetAttributeNS">GetAttributeNS + HasAttributeNS</button>
+        <button class="danger" @onclick="RemoveAttributeNS">RemoveAttributeNS</button>
+    </div>
+    <div class="controls">
+        <button @onclick="QuerySelectorMatches">QuerySelectorMatches</button>
+        <button class="secondary" @onclick="QuerySelectorAllCount">QuerySelectorAllCount</button>
+        <button class="secondary" @onclick="GetClientRects">GetClientRects</button>
+    </div>
+    <div class="controls">
+        <button @onclick="SetScrollTop">SetScrollTop(120)</button>
+        <button class="secondary" @onclick="ScrollToSmooth">ScrollTo(smooth)</button>
+        <button class="secondary" @onclick="ReadScrollMax">ScrollTopMax / ScrollLeftMax</button>
+    </div>
+    <DemoConsole @ref="queryOutput" Title="namespaced attribute and query output" />
+</DemoSection>
+
+<DemoSection Title="Identity, hints and tree facts"
+             Api="Title / Lang / Draggable / Spellcheck / Translate / Autofocus / Autocapitalize / Autocorrect / WritingSuggestions / VirtualKeyboardPolicy / Slot / Part / ElementTiming / LocalName / NamespaceUri / Prefix / ChildElementCount / CurrentCssZoom / AccessKeyLabel / OffsetParentTagName / AssignedSlotName / HasShadowRoot / OuterText"
+             Description="The rest of what an element carries: its tooltip and language, the hints it gives a virtual keyboard and a spell checker, its shadow-DOM wiring, and the facts about where it sits in the tree. Most of these are attributes you can simply render from Blazor at no interop cost - these are for elements that are not yours to re-render, and for reading what something else put there."
+             Code=@("""
+await box.SetTitle("Shown on hover");
+await box.SetLang("fa-IR");
+await box.SetDraggable(true);
+await box.SetSpellcheck(false);
+await box.SetTranslate(false);
+await box.SetAutocapitalize(Autocapitalize.Words);
+await box.SetWritingSuggestions(false);
+
+var localName = await box.GetLocalName();          // "div", where GetTagName gives "DIV"
+var children = await box.GetChildElementCount();
+var zoom = await box.GetCurrentCssZoom();
+var offsetParent = await box.GetOffsetParentTagName();
+""")>
+    <div class="field-row">
+        <div class="field">
+            <span class="field-label">Title</span>
+            <input @bind-value="titleValue" />
+        </div>
+        <div class="field">
+            <span class="field-label">Lang</span>
+            <input @bind-value="langValue" />
+        </div>
+        <div class="field">
+            <span class="field-label">Autocapitalize</span>
+            <select @bind="autocapitalize">
+                @foreach (Autocapitalize option in Enum.GetValues<Autocapitalize>())
+                {
+                    <option value="@option">@option</option>
+                }
+            </select>
+        </div>
+    </div>
+    <div class="controls">
+        <button @onclick="SetIdentityHints">Set title / lang / autocapitalize</button>
+        <button @onclick="ToggleDraggable">Toggle Draggable (now: @isDraggable)</button>
+        <button class="secondary" @onclick="ReadIdentityHints">Read hints back</button>
+        <button class="secondary" @onclick="ReadTreeFacts">Read tree facts</button>
+    </div>
+    <DemoConsole @ref="identityOutput" Title="identity and hints output" />
+</DemoSection>
+
 <DemoSection Title="Audio and video"
              Api="Play / Pause / GetMediaState / SetCurrentTime / SetVolume / SetMuted / SetPlaybackRate"
              Description="Blazor can render a media element and bind its events, but playback is imperative: there is no markup for 'play now' or 'seek to 30 seconds'. These extensions fill that gap on any ElementReference pointing at an <audio> or <video>. GetMediaState reads the whole transport state in one round trip rather than a property at a time - every read is an interop hop, and polling a dozen of them per frame to draw a scrubber is a dozen messages per frame."
@@ -454,6 +732,63 @@ await _video.Pause();
     <ApiMember Name="SetPlaybackRate" Signature="ValueTask<bool> SetPlaybackRate(double rate)" Description="1 is normal speed. False when the engine rejected the rate as outside what it can resample." />
     <ApiMember Name="SetMediaSource" Signature="ValueTask SetMediaSource(string src)" Description="Points the element at a new URL - including a blob: one from ObjectUrls or a finished recording. Follow with Load." />
     <ApiMember Name="CanPlayType" Signature="ValueTask<string> CanPlayType(string mimeType)" Description=@("""The browser's own three-valued answer: "probably", "maybe", or "" for no. Deliberately not a bool.""") />
+    <ApiMember Name="Click" Signature="ValueTask Click()" Description="Sends a synthetic click: handlers run, the event bubbles and default behavior happens. Not a user gesture, so gesture-gated APIs still refuse." />
+    <ApiMember Name="Focus" Signature="ValueTask Focus(FocusOptions? options = null)" Description="Focuses the element. PreventScroll keeps the page where it is; FocusVisible overrides the focus-ring heuristic (Firefox)." />
+    <ApiMember Name="CheckVisibility" Signature="ValueTask&lt;bool&gt; CheckVisibility(CheckVisibilityOptions? options = null)" Description="Whether the element is rendered - and optionally whether opacity, visibility and skipped content-visibility subtrees count against it." />
+    <ApiMember Name="Closest" Signature="ValueTask&lt;bool&gt; Closest(string selectors)" Description="Whether the element or any ancestor matches the selector. Returns the match itself rather than the ancestor, which cannot cross the boundary." />
+    <ApiMember Name="ScrollTo" Signature="ValueTask ScrollTo(ScrollOptions? options) · ValueTask ScrollTo(double? x, double? y)" Description="The same operation as Scroll, under the DOM's other name for it." />
+    <ApiMember Name="SetScrollTop / SetScrollLeft" Signature="ValueTask SetScrollTop(double value) · ValueTask SetScrollLeft(double value)" Description="Jumps the element's scroll offset, clamped by the browser to the scrollable range." />
+    <ApiMember Name="GetScrollTopMax / GetScrollLeftMax" Signature="ValueTask&lt;float&gt; GetScrollTopMax() · ValueTask&lt;float&gt; GetScrollLeftMax()" Description="The largest offset the setters will take. A Firefox property; computed from scroll and client sizes elsewhere." />
+    <ApiMember Name="GetAttributeNS / SetAttributeNS" Signature="ValueTask&lt;string&gt; GetAttributeNS(string namespaceUri, string localName) · ValueTask SetAttributeNS(string namespaceUri, string qualifiedName, string value)" Description="Namespaced attributes - xlink:href, xml:lang - which GetAttribute cannot reach." />
+    <ApiMember Name="HasAttributeNS / RemoveAttributeNS" Signature="ValueTask&lt;bool&gt; HasAttributeNS(string namespaceUri, string localName) · ValueTask RemoveAttributeNS(string namespaceUri, string localName)" Description="Presence and removal for a namespaced attribute." />
+    <ApiMember Name="GetClientRects" Signature="ValueTask&lt;Rect[]&gt; GetClientRects()" Description="Every border box the element occupies - more than one for an inline element that wraps across lines. Empty for display:none." />
+    <ApiMember Name="After / Before / Append / Prepend" Signature="ValueTask Append(params string[] nodes)" Description="Inserts text nodes around or inside the element. Strings only - an ElementReference cannot be handed back from JavaScript." />
+    <ApiMember Name="ReplaceChildren / ReplaceWith" Signature="ValueTask ReplaceChildren(params string[] nodes) · ValueTask ReplaceWith(params string[] nodes)" Description="Replaces the element's children, or the element itself. Passing nothing to ReplaceChildren empties it." />
+    <ApiMember Name="InsertAdjacentHtml" Signature="ValueTask InsertAdjacentHtml(InsertPosition position, string html)" Description="Parses markup and inserts it without reparsing existing children. Bypasses Blazor encoding - trusted input only." />
+    <ApiMember Name="InsertAdjacentText" Signature="ValueTask InsertAdjacentText(InsertPosition position, string text)" Description="Inserts a text node at the given position. Markup in the string stays text." />
+    <ApiMember Name="GetHtml" Signature="ValueTask&lt;string&gt; GetHtml(GetHtmlOptions? options = null)" Description="Serializes the contents, optionally including serializable shadow roots - which InnerHtml always leaves out." />
+    <ApiMember Name="SetHtml" Signature="ValueTask SetHtml(string html)" Description="Replaces the contents, sanitized by the browser. Throws where unsupported rather than falling back to a write that skips the sanitizer." />
+    <ApiMember Name="SetHtmlUnsafe" Signature="ValueTask SetHtmlUnsafe(string html)" Description="Replaces the contents without sanitizing, parsing declarative shadow roots. Trusted markup only." />
+    <ApiMember Name="AddClass / RemoveClass" Signature="ValueTask AddClass(params string[] tokens) · ValueTask RemoveClass(params string[] tokens)" Description="classList.add and .remove; tokens already present or already absent are ignored." />
+    <ApiMember Name="ToggleClass" Signature="ValueTask&lt;bool&gt; ToggleClass(string token, bool? force = null)" Description="Flips a class, or pins it with force. Returns whether it is on the element afterwards." />
+    <ApiMember Name="ReplaceClass" Signature="ValueTask&lt;bool&gt; ReplaceClass(string oldToken, string newToken)" Description="Swaps one class for another in place. False - and no change - when the old one was not there." />
+    <ApiMember Name="ContainsClass / GetClassList" Signature="ValueTask&lt;bool&gt; ContainsClass(string token) · ValueTask&lt;string[]&gt; GetClassList()" Description="Membership test, and the classes as tokens rather than as one string." />
+    <ApiMember Name="GetData / SetData / RemoveData" Signature="ValueTask&lt;string&gt; GetData(string key) · ValueTask SetData(string key, string value) · ValueTask RemoveData(string key)" Description="One data-* attribute by its dataset key - userId for data-user-id." />
+    <ApiMember Name="GetDataNames" Signature="ValueTask&lt;string[]&gt; GetDataNames()" Description="The dataset keys the element carries, not the attribute names." />
+    <ApiMember Name="GetStyleText / SetStyleText" Signature="ValueTask&lt;string&gt; GetStyleText() · ValueTask SetStyleText(string value)" Description="The whole inline style, as it would be written in a style attribute. Inline only - not what a stylesheet contributes." />
+    <ApiMember Name="GetStyleProperty / SetStyleProperty" Signature="ValueTask&lt;string&gt; GetStyleProperty(string name) · ValueTask SetStyleProperty(string name, string value, bool important = false)" Description="One inline declaration by CSS property name, custom properties (--accent) included." />
+    <ApiMember Name="RemoveStyleProperty" Signature="ValueTask&lt;string&gt; RemoveStyleProperty(string name)" Description="Removes one inline declaration and returns what it held." />
+    <ApiMember Name="ShowPopover / HidePopover" Signature="ValueTask ShowPopover() · ValueTask HidePopover()" Description="Shows or hides the element as a popover in the top layer. No-ops where the browser has no popover support." />
+    <ApiMember Name="TogglePopover" Signature="ValueTask&lt;bool&gt; TogglePopover(bool? force = null)" Description="Flips the popover, or pins it with force. Returns whether it is showing afterwards." />
+    <ApiMember Name="GetPopover / SetPopover" Signature="ValueTask&lt;ElementPopover&gt; GetPopover() · ValueTask SetPopover(ElementPopover value)" Description="What kind of popover the element is: NotSet, Auto, Manual or Hint." />
+    <ApiMember Name="QuerySelectorMatches" Signature="ValueTask&lt;bool&gt; QuerySelectorMatches(string selectors)" Description="Whether any descendant matches. The element itself cannot cross the boundary - capture what you need with @@ref." />
+    <ApiMember Name="QuerySelectorAllCount" Signature="ValueTask&lt;int&gt; QuerySelectorAllCount(string selectors)" Description="How many descendants match." />
+    <ApiMember Name="GetAria* / SetAria*" Signature="ValueTask&lt;string&gt; GetAriaLabel() · ValueTask SetAriaLabel(string value)" Description="Every aria-* attribute as a property pair - Atomic, Busy, Checked, Current, Description, Disabled, Expanded, HasPopup, Hidden, Invalid, Label, Level, Live, Modal, Pressed, ReadOnly, Required, Selected, Sort, Value*, the grid Col*/Row*/PosInSet/SetSize family and the braille pair. All strings, numeric and boolean ones included." />
+    <ApiMember Name="GetRole / SetRole" Signature="ValueTask&lt;string&gt; GetRole() · ValueTask SetRole(string value)" Description="The element's ARIA role, for when the tag alone does not say what it is." />
+    <ApiMember Name="AriaNotify" Signature="ValueTask AriaNotify(string message, AriaNotifyOptions? options = null)" Description="Announces a message to assistive technology without changing the page. Experimental and Chromium-only; a no-op elsewhere." />
+    <ApiMember Name="GetTitle / SetTitle" Signature="ValueTask&lt;string&gt; GetTitle() · ValueTask SetTitle(string value)" Description="The advisory text a browser shows as a tooltip." />
+    <ApiMember Name="GetLang / SetLang" Signature="ValueTask&lt;string&gt; GetLang() · ValueTask SetLang(string value)" Description="The element's language as a BCP 47 tag." />
+    <ApiMember Name="GetDraggable / SetDraggable" Signature="ValueTask&lt;bool&gt; GetDraggable() · ValueTask SetDraggable(bool value)" Description="Whether the element can be dragged." />
+    <ApiMember Name="GetSpellcheck / SetSpellcheck" Signature="ValueTask&lt;bool&gt; GetSpellcheck() · ValueTask SetSpellcheck(bool value)" Description="Whether the browser spell-checks what the user types." />
+    <ApiMember Name="GetTranslate / SetTranslate" Signature="ValueTask&lt;bool&gt; GetTranslate() · ValueTask SetTranslate(bool value)" Description="Whether the text should be translated when the page is. False for code and identifiers." />
+    <ApiMember Name="GetAutofocus / SetAutofocus" Signature="ValueTask&lt;bool&gt; GetAutofocus() · ValueTask SetAutofocus(bool value)" Description="Whether the element asks for focus on load. Setting it afterwards does nothing on its own - use Focus." />
+    <ApiMember Name="GetAutocapitalize / SetAutocapitalize" Signature="ValueTask&lt;Autocapitalize&gt; GetAutocapitalize() · ValueTask SetAutocapitalize(Autocapitalize value)" Description="How a virtual keyboard capitalizes typed text: None, Off, On, Sentences, Words or Characters." />
+    <ApiMember Name="GetAutocorrect / SetAutocorrect" Signature="ValueTask&lt;bool&gt; GetAutocorrect() · ValueTask SetAutocorrect(bool value)" Description="Whether the browser may autocorrect typed text. Safari and Chromium." />
+    <ApiMember Name="GetWritingSuggestions / SetWritingSuggestions" Signature="ValueTask&lt;bool&gt; GetWritingSuggestions() · ValueTask SetWritingSuggestions(bool value)" Description="Whether inline writing suggestions are offered. The DOM property is the string true or false; this is the boolean it stands for." />
+    <ApiMember Name="GetVirtualKeyboardPolicy / SetVirtualKeyboardPolicy" Signature="ValueTask&lt;VirtualKeyboardPolicy&gt; GetVirtualKeyboardPolicy() · ValueTask SetVirtualKeyboardPolicy(VirtualKeyboardPolicy value)" Description="Who shows the on-screen keyboard for a contenteditable element: Auto or Manual. Chromium only." />
+    <ApiMember Name="GetSlot / SetSlot" Signature="ValueTask&lt;string&gt; GetSlot() · ValueTask SetSlot(string value)" Description="The shadow-DOM slot the element asks to be placed in." />
+    <ApiMember Name="GetAssignedSlotName" Signature="ValueTask&lt;string&gt; GetAssignedSlotName()" Description="The slot it actually landed in, by name. Null when it is not slotted." />
+    <ApiMember Name="GetPart / SetPart" Signature="ValueTask&lt;string[]&gt; GetPart() · ValueTask SetPart(string value)" Description="The shadow parts the element exposes to ::part() selectors." />
+    <ApiMember Name="HasShadowRoot" Signature="ValueTask&lt;bool&gt; HasShadowRoot()" Description="Whether the element hosts an open shadow root. False for a closed one, which is the point of closing it." />
+    <ApiMember Name="GetElementTiming / SetElementTiming" Signature="ValueTask&lt;string&gt; GetElementTiming() · ValueTask SetElementTiming(string value)" Description="Marks the element for Element Timing under a name. Only works before it is first painted." />
+    <ApiMember Name="GetLocalName" Signature="ValueTask&lt;string&gt; GetLocalName()" Description="The tag name without a prefix, in the document's case - lowercase in HTML, where GetTagName reports uppercase." />
+    <ApiMember Name="GetNamespaceUri / GetPrefix" Signature="ValueTask&lt;string&gt; GetNamespaceUri() · ValueTask&lt;string&gt; GetPrefix()" Description="The namespace the element belongs to, and its prefix within it." />
+    <ApiMember Name="GetChildElementCount" Signature="ValueTask&lt;int&gt; GetChildElementCount()" Description="How many element children it has - text nodes and comments not counted." />
+    <ApiMember Name="GetCurrentCssZoom" Signature="ValueTask&lt;double&gt; GetCurrentCssZoom()" Description="The effective CSS zoom on the element - the factor between reported geometry and the layout's own units. 1 when nothing is zoomed." />
+    <ApiMember Name="GetAccessKeyLabel" Signature="ValueTask&lt;string&gt; GetAccessKeyLabel()" Description="How the element's access key would be shown to the user - Alt+S, or ⌃⌥S on a Mac. Empty where the engine computes none." />
+    <ApiMember Name="GetOffsetParentTagName" Signature="ValueTask&lt;string&gt; GetOffsetParentTagName()" Description="The tag name of the nearest positioned ancestor - what the offset metrics are measured against." />
+    <ApiMember Name="GetOuterText / SetOuterText" Signature="ValueTask&lt;string&gt; GetOuterText() · ValueTask SetOuterText(string value)" Description="Reads the rendered text; writing replaces the element itself, leaving the reference dangling. The DOM's own asymmetry." />
+    <ApiMember Name="GetNonce / SetNonce" Signature="ValueTask&lt;string&gt; GetNonce() · ValueTask SetNonce(string value)" Description="The element's CSP nonce. Browsers hide the attribute from scripts; the property is what remains." />
 </ApiTable>
 
 @code {
@@ -468,6 +803,41 @@ await _video.Pause();
     private DemoConsole selectorOutput = default!;
     private DemoConsole mediaOutput = default!;
 
+    private DemoConsole activationOutput = default!;
+    private DemoConsole styleOutput = default!;
+    private DemoConsole contentInsertOutput = default!;
+    private DemoConsole ariaOutput = default!;
+    private DemoConsole popoverOutput = default!;
+    private DemoConsole queryOutput = default!;
+    private DemoConsole identityOutput = default!;
+
+    private ElementReference clickTargetRef;
+    private ElementReference focusInputRef;
+    private ElementReference styleBoxRef;
+    private ElementReference contentBoxRef;
+    private ElementReference ariaBoxRef;
+    private ElementReference popoverRef;
+    private ElementReference queryBoxRef;
+
+    private int syntheticClicks;
+    private bool ariaExpanded;
+    private bool isDraggable;
+
+    private string closestSelector = ".stack";
+    private string classToken = "highlighted";
+    private string dataKey = "userId";
+    private string dataValue = "42";
+    private string insertText = "<em>inserted</em>";
+    private string ariaLabel = "Close the dialog";
+    private string ariaRole = "button";
+    private string descendantSelector = "li";
+    private string titleValue = "Shown on hover";
+    private string langValue = "fa-IR";
+    private Autocapitalize autocapitalize = Autocapitalize.Words;
+
+    /// <summary>The namespace SVG's href attribute lives in - the classic reason to reach for the NS overloads.</summary>
+    private const string XlinkNamespace = "http://www.w3.org/1999/xlink";
+
     private ElementReference mediaElement;
     private MediaElementState? mediaState;
 
@@ -873,6 +1243,265 @@ await _video.Pause();
         return "data:audio/wav;base64," + Convert.ToBase64String(data);
     }
 
+    // ─── Activation, focus and visibility ─────────────────────────────────
+
+    private Task ClickTarget() => Run(activationOutput, async () =>
+    {
+        await clickTargetRef.Click();
+        await activationOutput.Success("Click() →", $"the button's own handler ran; count is now {syntheticClicks}");
+    });
+
+    private Task FocusInput() => Run(activationOutput, async () =>
+    {
+        await focusInputRef.Focus(new FocusOptions { PreventScroll = true });
+        await activationOutput.Success("Focus(preventScroll: true) →", "focused without scrolling the page");
+    });
+
+    private Task CheckVisibility() => Run(activationOutput, async () =>
+    {
+        var visible = await targetRef.CheckVisibility(new CheckVisibilityOptions
+        {
+            OpacityProperty = true,
+            VisibilityProperty = true,
+            ContentVisibilityAuto = true,
+        });
+        await activationOutput.Success("CheckVisibility() →", visible);
+    });
+
+    private Task Closest() => Run(activationOutput, async () =>
+        await activationOutput.Success($"Closest(\"{closestSelector}\") →", await targetRef.Closest(closestSelector)));
+
+    // ─── Classes, data attributes and inline style ────────────────────────
+
+    private Task AddClass() => Run(styleOutput, async () =>
+    {
+        await styleBoxRef.AddClass(classToken);
+        await styleOutput.Success($"AddClass(\"{classToken}\") →", string.Join(' ', await styleBoxRef.GetClassList()));
+    });
+
+    private Task RemoveClass() => Run(styleOutput, async () =>
+    {
+        await styleBoxRef.RemoveClass(classToken);
+        await styleOutput.Success($"RemoveClass(\"{classToken}\") →", string.Join(' ', await styleBoxRef.GetClassList()));
+    });
+
+    private Task ToggleClass() => Run(styleOutput, async () =>
+        await styleOutput.Success($"ToggleClass(\"{classToken}\") → on the element:", await styleBoxRef.ToggleClass(classToken)));
+
+    private Task ContainsClass() => Run(styleOutput, async () =>
+        await styleOutput.Success($"ContainsClass(\"{classToken}\") →", await styleBoxRef.ContainsClass(classToken)));
+
+    private Task GetClassList() => Run(styleOutput, async () =>
+        await styleOutput.Success("GetClassList() →", await styleBoxRef.GetClassList()));
+
+    private Task SetData() => Run(styleOutput, async () =>
+    {
+        await styleBoxRef.SetData(dataKey, dataValue);
+        await styleOutput.Success($"SetData(\"{dataKey}\", \"{dataValue}\") →", "written as a data-* attribute");
+    });
+
+    private Task GetData() => Run(styleOutput, async () =>
+        await styleOutput.Success($"GetData(\"{dataKey}\") →", await styleBoxRef.GetData(dataKey)));
+
+    private Task GetDataNames() => Run(styleOutput, async () =>
+        await styleOutput.Success("GetDataNames() →", await styleBoxRef.GetDataNames()));
+
+    private Task RemoveData() => Run(styleOutput, async () =>
+    {
+        await styleBoxRef.RemoveData(dataKey);
+        await styleOutput.Success($"RemoveData(\"{dataKey}\") →", "removed");
+    });
+
+    private Task SetStyleProperty() => Run(styleOutput, async () =>
+    {
+        await styleBoxRef.SetStyleProperty("--accent", "#7c3aed");
+        await styleBoxRef.SetStyleProperty("outline", "2px solid var(--accent)", important: true);
+        await styleOutput.Success("SetStyleProperty(...) →", await styleBoxRef.GetStyleProperty("outline"));
+    });
+
+    private Task GetStyleText() => Run(styleOutput, async () =>
+        await styleOutput.Success("GetStyleText() →", await styleBoxRef.GetStyleText()));
+
+    private Task RemoveStyleProperty() => Run(styleOutput, async () =>
+        await styleOutput.Success("RemoveStyleProperty(\"outline\") → was:", await styleBoxRef.RemoveStyleProperty("outline")));
+
+    // ─── Content insertion and serialization ──────────────────────────────
+
+    private Task AppendText() => Run(contentInsertOutput, async () =>
+    {
+        await contentBoxRef.Append(insertText);
+        await contentInsertOutput.Success("Append(...) →", "added as a text node - markup in the string stays text");
+    });
+
+    private Task PrependText() => Run(contentInsertOutput, async () =>
+    {
+        await contentBoxRef.Prepend(insertText);
+        await contentInsertOutput.Success("Prepend(...) →", "added as a text node at the start");
+    });
+
+    private Task InsertAdjacentText() => Run(contentInsertOutput, async () =>
+    {
+        await contentBoxRef.InsertAdjacentText(InsertPosition.BeforeEnd, insertText);
+        await contentInsertOutput.Success("InsertAdjacentText(BeforeEnd, ...) →", "inserted as text");
+    });
+
+    private Task InsertAdjacentHtml() => Run(contentInsertOutput, async () =>
+    {
+        await contentBoxRef.InsertAdjacentHtml(InsertPosition.AfterBegin, insertText);
+        await contentInsertOutput.Warn("InsertAdjacentHtml(AfterBegin, ...) →", "parsed as markup - trusted input only");
+    });
+
+    private Task GetHtml() => Run(contentInsertOutput, async () =>
+        await contentInsertOutput.Success("GetHtml() →", await contentBoxRef.GetHtml(new GetHtmlOptions { SerializableShadowRoots = true })));
+
+    private Task SetHtmlSanitized() => Run(contentInsertOutput, async () =>
+    {
+        // The sanitizer strips the onerror handler and leaves the rest; where the browser has none,
+        // SetHtml throws rather than quietly writing the markup through without sanitizing.
+        await contentBoxRef.SetHtml($"<span>{insertText}</span><img src=x onerror=\"alert(1)\">");
+        await contentInsertOutput.Success("SetHtml(...) →", await contentBoxRef.GetHtml());
+    });
+
+    private Task ReplaceChildren() => Run(contentInsertOutput, async () =>
+    {
+        await contentBoxRef.ReplaceChildren("everything else is gone");
+        await contentInsertOutput.Success("ReplaceChildren(...) →", "children replaced");
+    });
+
+    // ─── ARIA and roles ───────────────────────────────────────────────────
+
+    private Task SetAria() => Run(ariaOutput, async () =>
+    {
+        await ariaBoxRef.SetRole(ariaRole);
+        await ariaBoxRef.SetAriaLabel(ariaLabel);
+        await ariaOutput.Success("SetRole + SetAriaLabel →", $"role=\"{ariaRole}\" aria-label=\"{ariaLabel}\"");
+    });
+
+    private Task ToggleAriaExpanded() => Run(ariaOutput, async () =>
+    {
+        ariaExpanded = !ariaExpanded;
+        // A string, not a bool: ARIA defines these as enumerated attributes, and "false" and an
+        // absent attribute do not mean the same thing to a screen reader.
+        await ariaBoxRef.SetAriaExpanded(ariaExpanded ? "true" : "false");
+        await ariaOutput.Success("SetAriaExpanded →", ariaExpanded ? "true" : "false");
+    });
+
+    private Task ReadAria() => Run(ariaOutput, async () =>
+        await ariaOutput.Success("GetRole / GetAriaLabel / GetAriaExpanded →",
+            await ariaBoxRef.GetRole(), await ariaBoxRef.GetAriaLabel(), await ariaBoxRef.GetAriaExpanded()));
+
+    private Task AriaNotify() => Run(ariaOutput, async () =>
+    {
+        await ariaBoxRef.AriaNotify("Butil finished the demo step", new AriaNotifyOptions { Priority = AriaNotifyPriority.High });
+        await ariaOutput.Info("AriaNotify(...) →", "announced where supported; a no-op outside Chromium");
+    });
+
+    // ─── Popover ──────────────────────────────────────────────────────────
+
+    private Task MakePopover() => Run(popoverOutput, async () =>
+    {
+        await popoverRef.SetPopover(ElementPopover.Auto);
+        await popoverOutput.Success("SetPopover(Auto) →", await popoverRef.GetPopover());
+    });
+
+    private Task ShowPopover() => Run(popoverOutput, async () =>
+    {
+        await popoverRef.ShowPopover();
+        await popoverOutput.Success("ShowPopover() →", "showing in the top layer");
+    });
+
+    private Task TogglePopover() => Run(popoverOutput, async () =>
+        await popoverOutput.Success("TogglePopover() → showing:", await popoverRef.TogglePopover()));
+
+    private Task HidePopover() => Run(popoverOutput, async () =>
+    {
+        await popoverRef.HidePopover();
+        await popoverOutput.Success("HidePopover() →", "hidden");
+    });
+
+    // ─── Namespaced attributes, queries and scroll offsets ────────────────
+
+    private Task SetAttributeNS() => Run(queryOutput, async () =>
+    {
+        await queryBoxRef.SetAttributeNS(XlinkNamespace, "xlink:href", "#star");
+        await queryOutput.Success("SetAttributeNS(xlink, \"xlink:href\", \"#star\") →", "written");
+    });
+
+    private Task GetAttributeNS() => Run(queryOutput, async () =>
+        await queryOutput.Success("GetAttributeNS / HasAttributeNS →",
+            await queryBoxRef.GetAttributeNS(XlinkNamespace, "href"),
+            await queryBoxRef.HasAttributeNS(XlinkNamespace, "href")));
+
+    private Task RemoveAttributeNS() => Run(queryOutput, async () =>
+    {
+        await queryBoxRef.RemoveAttributeNS(XlinkNamespace, "href");
+        await queryOutput.Success("RemoveAttributeNS(...) →", "removed");
+    });
+
+    private Task QuerySelectorMatches() => Run(queryOutput, async () =>
+        await queryOutput.Success($"QuerySelectorMatches(\"{descendantSelector}\") →", await queryBoxRef.QuerySelectorMatches(descendantSelector)));
+
+    private Task QuerySelectorAllCount() => Run(queryOutput, async () =>
+        await queryOutput.Success($"QuerySelectorAllCount(\"{descendantSelector}\") →", await queryBoxRef.QuerySelectorAllCount(descendantSelector)));
+
+    private Task GetClientRects() => Run(queryOutput, async () =>
+    {
+        var rects = await queryBoxRef.GetClientRects();
+        await queryOutput.Success($"GetClientRects() → {rects.Length} rect(s), first:",
+            rects.Length == 0 ? "none - the element generates no boxes" : $"{rects[0].Width:0.#} × {rects[0].Height:0.#}");
+    });
+
+    private Task SetScrollTop() => Run(queryOutput, async () =>
+    {
+        await queryBoxRef.SetScrollTop(120);
+        await queryOutput.Success("SetScrollTop(120) → now:", await queryBoxRef.GetScrollTop());
+    });
+
+    private Task ScrollToSmooth() => Run(queryOutput, async () =>
+    {
+        await queryBoxRef.ScrollTo(new ScrollOptions { Top = 240, Behavior = ScrollBehavior.Smooth });
+        await queryOutput.Success("ScrollTo(top: 240, smooth) →", "easing to the new offset");
+    });
+
+    private Task ReadScrollMax() => Run(queryOutput, async () =>
+        await queryOutput.Success("GetScrollTopMax / GetScrollLeftMax →",
+            await queryBoxRef.GetScrollTopMax(), await queryBoxRef.GetScrollLeftMax()));
+
+    // ─── Identity, hints and tree facts ───────────────────────────────────
+
+    private Task SetIdentityHints() => Run(identityOutput, async () =>
+    {
+        await targetRef.SetTitle(titleValue);
+        await targetRef.SetLang(langValue);
+        await targetRef.SetAutocapitalize(autocapitalize);
+        await identityOutput.Success("SetTitle / SetLang / SetAutocapitalize →", titleValue, langValue, autocapitalize);
+    });
+
+    private Task ToggleDraggable() => Run(identityOutput, async () =>
+    {
+        isDraggable = !isDraggable;
+        await targetRef.SetDraggable(isDraggable);
+        await identityOutput.Success("SetDraggable →", await targetRef.GetDraggable());
+    });
+
+    private Task ReadIdentityHints() => Run(identityOutput, async () =>
+        await identityOutput.Success("Title / Lang / Spellcheck / Translate / WritingSuggestions / VirtualKeyboardPolicy →",
+            await targetRef.GetTitle(),
+            await targetRef.GetLang(),
+            await targetRef.GetSpellcheck(),
+            await targetRef.GetTranslate(),
+            await targetRef.GetWritingSuggestions(),
+            await targetRef.GetVirtualKeyboardPolicy()));
+
+    private Task ReadTreeFacts() => Run(identityOutput, async () =>
+        await identityOutput.Success("LocalName / NamespaceUri / ChildElementCount / CurrentCssZoom / OffsetParentTagName / HasShadowRoot →",
+            await targetRef.GetLocalName(),
+            await targetRef.GetNamespaceUri(),
+            await targetRef.GetChildElementCount(),
+            await targetRef.GetCurrentCssZoom(),
+            await targetRef.GetOffsetParentTagName(),
+            await targetRef.HasShadowRoot()));
+
     public async ValueTask DisposeAsync()
     {
         try
diff --git a/src/Butil/Bit.Butil/Internals/Element/AriaNotifyJsOptions.cs b/src/Butil/Bit.Butil/Internals/Element/AriaNotifyJsOptions.cs
new file mode 100644
index 00000000000..8987c91d652
--- /dev/null
+++ b/src/Butil/Bit.Butil/Internals/Element/AriaNotifyJsOptions.cs
@@ -0,0 +1,6 @@
+namespace Bit.Butil;
+
+internal class AriaNotifyJsOptions
+{
+    public string Priority { get; set; } = default!;
+}
diff --git a/src/Butil/Bit.Butil/Internals/Element/CheckVisibilityJsOptions.cs b/src/Butil/Bit.Butil/Internals/Element/CheckVisibilityJsOptions.cs
new file mode 100644
index 00000000000..9d572f6fc7c
--- /dev/null
+++ b/src/Butil/Bit.Butil/Internals/Element/CheckVisibilityJsOptions.cs
@@ -0,0 +1,14 @@
+namespace Bit.Butil;
+
+internal class CheckVisibilityJsOptions
+{
+    public bool? ContentVisibilityAuto { get; set; }
+
+    public bool? OpacityProperty { get; set; }
+
+    public bool? VisibilityProperty { get; set; }
+
+    public bool? CheckOpacity { get; set; }
+
+    public bool? CheckVisibilityCSS { get; set; }
+}
diff --git a/src/Butil/Bit.Butil/Internals/Element/FocusJsOptions.cs b/src/Butil/Bit.Butil/Internals/Element/FocusJsOptions.cs
new file mode 100644
index 00000000000..3c3fa73eae8
--- /dev/null
+++ b/src/Butil/Bit.Butil/Internals/Element/FocusJsOptions.cs
@@ -0,0 +1,8 @@
+namespace Bit.Butil;
+
+internal class FocusJsOptions
+{
+    public bool? PreventScroll { get; set; }
+
+    public bool? FocusVisible { get; set; }
+}
diff --git a/src/Butil/Bit.Butil/Internals/Element/GetHtmlJsOptions.cs b/src/Butil/Bit.Butil/Internals/Element/GetHtmlJsOptions.cs
new file mode 100644
index 00000000000..76cce12c72c
--- /dev/null
+++ b/src/Butil/Bit.Butil/Internals/Element/GetHtmlJsOptions.cs
@@ -0,0 +1,6 @@
+namespace Bit.Butil;
+
+internal class GetHtmlJsOptions
+{
+    public bool? SerializableShadowRoots { get; set; }
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/AriaNotifyOptions.cs b/src/Butil/Bit.Butil/Publics/Element/AriaNotifyOptions.cs
new file mode 100644
index 00000000000..6eb0e980bd7
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/AriaNotifyOptions.cs
@@ -0,0 +1,20 @@
+namespace Bit.Butil;
+
+/// <summary>
+/// How an <see cref="ElementReferenceAriaExtensions.AriaNotify(Microsoft.AspNetCore.Components.ElementReference, string, AriaNotifyOptions?)"/>
+/// announcement should be queued.
+/// </summary>
+public class AriaNotifyOptions
+{
+    /// <summary>Where the announcement goes in the queue. Defaults to <see cref="AriaNotifyPriority.Normal"/>.</summary>
+    public AriaNotifyPriority? Priority { get; set; }
+
+    internal AriaNotifyJsOptions ToJsObject() => new()
+    {
+        Priority = Priority switch
+        {
+            AriaNotifyPriority.High => "high",
+            _ => "normal"
+        }
+    };
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/AriaNotifyPriority.cs b/src/Butil/Bit.Butil/Publics/Element/AriaNotifyPriority.cs
new file mode 100644
index 00000000000..e9bc60cc4b0
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/AriaNotifyPriority.cs
@@ -0,0 +1,11 @@
+namespace Bit.Butil;
+
+/// <summary>Where an <c>ariaNotify</c> announcement goes in the screen reader's queue.</summary>
+public enum AriaNotifyPriority
+{
+    /// <summary>Announced after whatever the screen reader is already saying. The default.</summary>
+    Normal,
+
+    /// <summary>Interrupts the current announcement. For things the user must hear now.</summary>
+    High
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/Autocapitalize.cs b/src/Butil/Bit.Butil/Publics/Element/Autocapitalize.cs
new file mode 100644
index 00000000000..bd49f111dc5
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/Autocapitalize.cs
@@ -0,0 +1,26 @@
+namespace Bit.Butil;
+
+/// <summary>How a virtual keyboard should capitalize what the user types into the element.</summary>
+public enum Autocapitalize
+{
+    /// <summary>The attribute is absent, so the element inherits the behaviour of its form or document.</summary>
+    NotSet,
+
+    /// <summary>No automatic capitalization.</summary>
+    None,
+
+    /// <summary>The historical spelling of <see cref="None"/>, still accepted.</summary>
+    Off,
+
+    /// <summary>The historical spelling of <see cref="Sentences"/>, still accepted.</summary>
+    On,
+
+    /// <summary>Capitalize the first letter of each sentence. The default for most inputs.</summary>
+    Sentences,
+
+    /// <summary>Capitalize the first letter of every word.</summary>
+    Words,
+
+    /// <summary>Capitalize every letter.</summary>
+    Characters
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/CheckVisibilityOptions.cs b/src/Butil/Bit.Butil/Publics/Element/CheckVisibilityOptions.cs
new file mode 100644
index 00000000000..cf974bbd3bc
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/CheckVisibilityOptions.cs
@@ -0,0 +1,34 @@
+namespace Bit.Butil;
+
+/// <summary>
+/// Which of the several reasons an element can be invisible
+/// <see cref="ElementReferenceExtensions.CheckVisibility(Microsoft.AspNetCore.Components.ElementReference, CheckVisibilityOptions?)"/>
+/// should take into account. Everything left null uses the browser's default, which is to consider
+/// only whether the element is rendered at all.
+/// </summary>
+public class CheckVisibilityOptions
+{
+    /// <summary>True to report an element inside a <c>content-visibility: auto</c> subtree that is currently skipped as invisible.</summary>
+    public bool? ContentVisibilityAuto { get; set; }
+
+    /// <summary>True to report an element with <c>opacity: 0</c> - on itself or on an ancestor - as invisible.</summary>
+    public bool? OpacityProperty { get; set; }
+
+    /// <summary>True to report an element hidden by <c>visibility: hidden</c> or <c>collapse</c> as invisible.</summary>
+    public bool? VisibilityProperty { get; set; }
+
+    /// <summary>The earlier spelling of <see cref="OpacityProperty"/>, still accepted by shipped engines.</summary>
+    public bool? CheckOpacity { get; set; }
+
+    /// <summary>The earlier spelling of <see cref="VisibilityProperty"/>, still accepted by shipped engines.</summary>
+    public bool? CheckVisibilityCSS { get; set; }
+
+    internal CheckVisibilityJsOptions ToJsObject() => new()
+    {
+        ContentVisibilityAuto = ContentVisibilityAuto,
+        OpacityProperty = OpacityProperty,
+        VisibilityProperty = VisibilityProperty,
+        CheckOpacity = CheckOpacity,
+        CheckVisibilityCSS = CheckVisibilityCSS
+    };
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/ElementPopover.cs b/src/Butil/Bit.Butil/Publics/Element/ElementPopover.cs
new file mode 100644
index 00000000000..b82c2167fa9
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/ElementPopover.cs
@@ -0,0 +1,17 @@
+namespace Bit.Butil;
+
+/// <summary>The popover behaviour of an element - the values of its <c>popover</c> attribute.</summary>
+public enum ElementPopover
+{
+    /// <summary>Not a popover.</summary>
+    NotSet,
+
+    /// <summary>Light-dismissed: opening it closes other auto popovers, and clicking away or pressing Escape closes it.</summary>
+    Auto,
+
+    /// <summary>Closed only by the code that opened it. Several can be open at once.</summary>
+    Manual,
+
+    /// <summary>Light-dismissed like <see cref="Auto"/>, but does not close other popovers - for tooltips over an open menu.</summary>
+    Hint
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/ElementReferenceAriaExtensions.cs b/src/Butil/Bit.Butil/Publics/Element/ElementReferenceAriaExtensions.cs
new file mode 100644
index 00000000000..11ce46443db
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/ElementReferenceAriaExtensions.cs
@@ -0,0 +1,705 @@
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Butil;
+
+/// <summary>
+/// The ARIA reflection properties of
+/// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</see>: the
+/// <c>role</c> and every <c>aria-*</c> attribute, read and written as properties rather than as
+/// attribute strings.
+/// </summary>
+/// <remarks>
+/// Prefer rendering these as attributes in your markup - Blazor passes <c>aria-label</c> and friends
+/// straight through, it costs no interop, and a re-render cannot undo it. These are for the
+/// attributes that have to change in response to something outside the render tree, and for reading
+/// what another script or a component library put on an element.
+/// <br/>
+/// Every value is a string, including the numeric ones (<c>AriaLevel</c>, <c>AriaValueNow</c>) and
+/// the boolean ones (<c>AriaExpanded</c>, <c>AriaHidden</c>) - that is how ARIA itself is defined,
+/// and <c>"false"</c> and <c>""</c> mean different things to a screen reader. An attribute that is
+/// not set reads as null.
+/// <br/>
+/// During prerender/SSR (no JS runtime) every read returns an empty string rather than throwing, so
+/// it cannot be told apart from a genuinely empty one. Defer reads you branch on to
+/// <c>OnAfterRenderAsync</c>.
+/// </remarks>
+public static class ElementReferenceAriaExtensions
+{
+    /// <summary>
+    /// Whether assistive technology presents the whole changed region or only the part that changed. Reflects <c>aria-atomic</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAtomic">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAtomic</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaAtomic(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaAtomic");
+    /// <summary>
+    /// Whether assistive technology presents the whole changed region or only the part that changed. Reflects <c>aria-atomic</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAtomic">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAtomic</see>
+    /// </summary>
+    public static ValueTask SetAriaAtomic(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaAtomic", value);
+
+    /// <summary>
+    /// What kind of completion an input offers: <c>inline</c>, <c>list</c>, <c>both</c> or <c>none</c>. Reflects <c>aria-autocomplete</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAutoComplete">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAutoComplete</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaAutoComplete(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaAutoComplete");
+    /// <summary>
+    /// What kind of completion an input offers: <c>inline</c>, <c>list</c>, <c>both</c> or <c>none</c>. Reflects <c>aria-autocomplete</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAutoComplete">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaAutoComplete</see>
+    /// </summary>
+    public static ValueTask SetAriaAutoComplete(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaAutoComplete", value);
+
+    /// <summary>
+    /// The label a braille display shows in place of the accessible name. Reflects <c>aria-braillelabel</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleLabel">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleLabel</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaBrailleLabel(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaBrailleLabel");
+    /// <summary>
+    /// The label a braille display shows in place of the accessible name. Reflects <c>aria-braillelabel</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleLabel">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleLabel</see>
+    /// </summary>
+    public static ValueTask SetAriaBrailleLabel(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaBrailleLabel", value);
+
+    /// <summary>
+    /// The role description a braille display shows in place of the spoken one. Reflects <c>aria-brailleroledescription</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleRoleDescription">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleRoleDescription</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaBrailleRoleDescription(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaBrailleRoleDescription");
+    /// <summary>
+    /// The role description a braille display shows in place of the spoken one. Reflects <c>aria-brailleroledescription</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleRoleDescription">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleRoleDescription</see>
+    /// </summary>
+    public static ValueTask SetAriaBrailleRoleDescription(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaBrailleRoleDescription", value);
+
+    /// <summary>
+    /// Whether the element is still being updated, so assistive technology waits before announcing it. Reflects <c>aria-busy</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBusy">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBusy</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaBusy(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaBusy");
+    /// <summary>
+    /// Whether the element is still being updated, so assistive technology waits before announcing it. Reflects <c>aria-busy</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBusy">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBusy</see>
+    /// </summary>
+    public static ValueTask SetAriaBusy(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaBusy", value);
+
+    /// <summary>
+    /// The checked state of a checkbox, radio or switch that is not a native input: <c>true</c>, <c>false</c> or <c>mixed</c>. Reflects <c>aria-checked</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaChecked">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaChecked</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaChecked(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaChecked");
+    /// <summary>
+    /// The checked state of a checkbox, radio or switch that is not a native input: <c>true</c>, <c>false</c> or <c>mixed</c>. Reflects <c>aria-checked</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaChecked">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaChecked</see>
+    /// </summary>
+    public static ValueTask SetAriaChecked(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaChecked", value);
+
+    /// <summary>
+    /// How many columns the whole table has, when the DOM holds only some of them. Reflects <c>aria-colcount</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColCount">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColCount</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaColCount(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaColCount");
+    /// <summary>
+    /// How many columns the whole table has, when the DOM holds only some of them. Reflects <c>aria-colcount</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColCount">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColCount</see>
+    /// </summary>
+    public static ValueTask SetAriaColCount(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaColCount", value);
+
+    /// <summary>
+    /// Which column of the whole table this cell sits in, counting from one. Reflects <c>aria-colindex</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndex">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndex</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaColIndex(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaColIndex");
+    /// <summary>
+    /// Which column of the whole table this cell sits in, counting from one. Reflects <c>aria-colindex</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndex">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndex</see>
+    /// </summary>
+    public static ValueTask SetAriaColIndex(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaColIndex", value);
+
+    /// <summary>
+    /// A human-readable column label, announced instead of the column number. Reflects <c>aria-colindextext</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndexText">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndexText</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaColIndexText(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaColIndexText");
+    /// <summary>
+    /// A human-readable column label, announced instead of the column number. Reflects <c>aria-colindextext</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndexText">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndexText</see>
+    /// </summary>
+    public static ValueTask SetAriaColIndexText(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaColIndexText", value);
+
+    /// <summary>
+    /// How many columns the cell spans, for a grid not built from table elements. Reflects <c>aria-colspan</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColSpan">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColSpan</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaColSpan(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaColSpan");
+    /// <summary>
+    /// How many columns the cell spans, for a grid not built from table elements. Reflects <c>aria-colspan</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColSpan">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColSpan</see>
+    /// </summary>
+    public static ValueTask SetAriaColSpan(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaColSpan", value);
+
+    /// <summary>
+    /// Which item of a set is the current one: <c>page</c>, <c>step</c>, <c>location</c>, <c>date</c>, <c>time</c> or <c>true</c>. Reflects <c>aria-current</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaCurrent">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaCurrent</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaCurrent(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaCurrent");
+    /// <summary>
+    /// Which item of a set is the current one: <c>page</c>, <c>step</c>, <c>location</c>, <c>date</c>, <c>time</c> or <c>true</c>. Reflects <c>aria-current</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaCurrent">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaCurrent</see>
+    /// </summary>
+    public static ValueTask SetAriaCurrent(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaCurrent", value);
+
+    /// <summary>
+    /// A longer description of the element, announced after its name. Reflects <c>aria-description</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaDescription(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaDescription");
+    /// <summary>
+    /// A longer description of the element, announced after its name. Reflects <c>aria-description</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription</see>
+    /// </summary>
+    public static ValueTask SetAriaDescription(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaDescription", value);
+
+    /// <summary>
+    /// Whether the element is perceivable but not operable. Unlike the <c>disabled</c> attribute it stays focusable. Reflects <c>aria-disabled</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDisabled">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDisabled</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaDisabled(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaDisabled");
+    /// <summary>
+    /// Whether the element is perceivable but not operable. Unlike the <c>disabled</c> attribute it stays focusable. Reflects <c>aria-disabled</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDisabled">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDisabled</see>
+    /// </summary>
+    public static ValueTask SetAriaDisabled(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaDisabled", value);
+
+    /// <summary>
+    /// Whether the thing this element controls is expanded or collapsed. Reflects <c>aria-expanded</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaExpanded(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaExpanded");
+    /// <summary>
+    /// Whether the thing this element controls is expanded or collapsed. Reflects <c>aria-expanded</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded</see>
+    /// </summary>
+    public static ValueTask SetAriaExpanded(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaExpanded", value);
+
+    /// <summary>
+    /// What kind of popup the element opens: <c>menu</c>, <c>listbox</c>, <c>tree</c>, <c>grid</c> or <c>dialog</c>. Reflects <c>aria-haspopup</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHasPopup">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHasPopup</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaHasPopup(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaHasPopup");
+    /// <summary>
+    /// What kind of popup the element opens: <c>menu</c>, <c>listbox</c>, <c>tree</c>, <c>grid</c> or <c>dialog</c>. Reflects <c>aria-haspopup</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHasPopup">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHasPopup</see>
+    /// </summary>
+    public static ValueTask SetAriaHasPopup(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaHasPopup", value);
+
+    /// <summary>
+    /// Whether the element and its subtree are hidden from the accessibility tree while staying visible on screen. Reflects <c>aria-hidden</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHidden">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHidden</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaHidden(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaHidden");
+    /// <summary>
+    /// Whether the element and its subtree are hidden from the accessibility tree while staying visible on screen. Reflects <c>aria-hidden</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHidden">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHidden</see>
+    /// </summary>
+    public static ValueTask SetAriaHidden(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaHidden", value);
+
+    /// <summary>
+    /// Whether the entered value is rejected, and why: <c>true</c>, <c>grammar</c> or <c>spelling</c>. Reflects <c>aria-invalid</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaInvalid">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaInvalid</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaInvalid(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaInvalid");
+    /// <summary>
+    /// Whether the entered value is rejected, and why: <c>true</c>, <c>grammar</c> or <c>spelling</c>. Reflects <c>aria-invalid</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaInvalid">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaInvalid</see>
+    /// </summary>
+    public static ValueTask SetAriaInvalid(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaInvalid", value);
+
+    /// <summary>
+    /// The keyboard shortcuts that activate the element, as a space-separated list. Reflects <c>aria-keyshortcuts</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaKeyShortcuts">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaKeyShortcuts</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaKeyShortcuts(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaKeyShortcuts");
+    /// <summary>
+    /// The keyboard shortcuts that activate the element, as a space-separated list. Reflects <c>aria-keyshortcuts</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaKeyShortcuts">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaKeyShortcuts</see>
+    /// </summary>
+    public static ValueTask SetAriaKeyShortcuts(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaKeyShortcuts", value);
+
+    /// <summary>
+    /// The element's accessible name, for when no visible text supplies one. Reflects <c>aria-label</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabel">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabel</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaLabel(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaLabel");
+    /// <summary>
+    /// The element's accessible name, for when no visible text supplies one. Reflects <c>aria-label</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabel">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabel</see>
+    /// </summary>
+    public static ValueTask SetAriaLabel(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaLabel", value);
+
+    /// <summary>
+    /// The element's level in a hierarchy - a heading's rank, a tree item's depth. Reflects <c>aria-level</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLevel">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLevel</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaLevel(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaLevel");
+    /// <summary>
+    /// The element's level in a hierarchy - a heading's rank, a tree item's depth. Reflects <c>aria-level</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLevel">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLevel</see>
+    /// </summary>
+    public static ValueTask SetAriaLevel(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaLevel", value);
+
+    /// <summary>
+    /// How urgently updates to this region are announced: <c>off</c>, <c>polite</c> or <c>assertive</c>. Reflects <c>aria-live</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLive">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLive</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaLive(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaLive");
+    /// <summary>
+    /// How urgently updates to this region are announced: <c>off</c>, <c>polite</c> or <c>assertive</c>. Reflects <c>aria-live</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLive">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLive</see>
+    /// </summary>
+    public static ValueTask SetAriaLive(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaLive", value);
+
+    /// <summary>
+    /// Whether a dialog is modal, so assistive technology confines itself to its contents. Reflects <c>aria-modal</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaModal">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaModal</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaModal(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaModal");
+    /// <summary>
+    /// Whether a dialog is modal, so assistive technology confines itself to its contents. Reflects <c>aria-modal</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaModal">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaModal</see>
+    /// </summary>
+    public static ValueTask SetAriaModal(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaModal", value);
+
+    /// <summary>
+    /// Whether a textbox takes more than one line, so Enter inserts a newline rather than submitting. Reflects <c>aria-multiline</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiline">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiline</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaMultiline(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaMultiline");
+    /// <summary>
+    /// Whether a textbox takes more than one line, so Enter inserts a newline rather than submitting. Reflects <c>aria-multiline</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiline">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiline</see>
+    /// </summary>
+    public static ValueTask SetAriaMultiline(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaMultiline", value);
+
+    /// <summary>
+    /// Whether more than one item of the list, grid or tree can be selected at once. Reflects <c>aria-multiselectable</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiSelectable">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiSelectable</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaMultiSelectable(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaMultiSelectable");
+    /// <summary>
+    /// Whether more than one item of the list, grid or tree can be selected at once. Reflects <c>aria-multiselectable</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiSelectable">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaMultiSelectable</see>
+    /// </summary>
+    public static ValueTask SetAriaMultiSelectable(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaMultiSelectable", value);
+
+    /// <summary>
+    /// Whether the element is laid out <c>horizontal</c>ly or <c>vertical</c>ly. Reflects <c>aria-orientation</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOrientation">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOrientation</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaOrientation(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaOrientation");
+    /// <summary>
+    /// Whether the element is laid out <c>horizontal</c>ly or <c>vertical</c>ly. Reflects <c>aria-orientation</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOrientation">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOrientation</see>
+    /// </summary>
+    public static ValueTask SetAriaOrientation(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaOrientation", value);
+
+    /// <summary>
+    /// The hint shown in an empty input, for controls with no native placeholder. Reflects <c>aria-placeholder</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPlaceholder">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPlaceholder</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaPlaceholder(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaPlaceholder");
+    /// <summary>
+    /// The hint shown in an empty input, for controls with no native placeholder. Reflects <c>aria-placeholder</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPlaceholder">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPlaceholder</see>
+    /// </summary>
+    public static ValueTask SetAriaPlaceholder(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaPlaceholder", value);
+
+    /// <summary>
+    /// Which position this item holds in its set, counting from one - for a list the DOM holds only part of. Reflects <c>aria-posinset</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPosInSet">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPosInSet</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaPosInSet(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaPosInSet");
+    /// <summary>
+    /// Which position this item holds in its set, counting from one - for a list the DOM holds only part of. Reflects <c>aria-posinset</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPosInSet">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPosInSet</see>
+    /// </summary>
+    public static ValueTask SetAriaPosInSet(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaPosInSet", value);
+
+    /// <summary>
+    /// The pressed state of a toggle button: <c>true</c>, <c>false</c> or <c>mixed</c>. Reflects <c>aria-pressed</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPressed">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPressed</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaPressed(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaPressed");
+    /// <summary>
+    /// The pressed state of a toggle button: <c>true</c>, <c>false</c> or <c>mixed</c>. Reflects <c>aria-pressed</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPressed">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaPressed</see>
+    /// </summary>
+    public static ValueTask SetAriaPressed(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaPressed", value);
+
+    /// <summary>
+    /// Whether the value can be read but not changed. Reflects <c>aria-readonly</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaReadOnly">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaReadOnly</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaReadOnly(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaReadOnly");
+    /// <summary>
+    /// Whether the value can be read but not changed. Reflects <c>aria-readonly</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaReadOnly">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaReadOnly</see>
+    /// </summary>
+    public static ValueTask SetAriaReadOnly(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaReadOnly", value);
+
+    /// <summary>
+    /// Which changes in a live region are worth announcing: <c>additions</c>, <c>removals</c>, <c>text</c> or <c>all</c>. Reflects <c>aria-relevant</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRelevant">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRelevant</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRelevant(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRelevant");
+    /// <summary>
+    /// Which changes in a live region are worth announcing: <c>additions</c>, <c>removals</c>, <c>text</c> or <c>all</c>. Reflects <c>aria-relevant</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRelevant">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRelevant</see>
+    /// </summary>
+    public static ValueTask SetAriaRelevant(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRelevant", value);
+
+    /// <summary>
+    /// Whether a value must be supplied before the form can be submitted. Reflects <c>aria-required</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRequired">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRequired</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRequired(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRequired");
+    /// <summary>
+    /// Whether a value must be supplied before the form can be submitted. Reflects <c>aria-required</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRequired">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRequired</see>
+    /// </summary>
+    public static ValueTask SetAriaRequired(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRequired", value);
+
+    /// <summary>
+    /// A human-readable name for the element's role, announced instead of the standard one. Reflects <c>aria-roledescription</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRoleDescription">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRoleDescription</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRoleDescription(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRoleDescription");
+    /// <summary>
+    /// A human-readable name for the element's role, announced instead of the standard one. Reflects <c>aria-roledescription</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRoleDescription">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRoleDescription</see>
+    /// </summary>
+    public static ValueTask SetAriaRoleDescription(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRoleDescription", value);
+
+    /// <summary>
+    /// How many rows the whole table has, when the DOM holds only some of them. Reflects <c>aria-rowcount</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowCount">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowCount</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRowCount(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRowCount");
+    /// <summary>
+    /// How many rows the whole table has, when the DOM holds only some of them. Reflects <c>aria-rowcount</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowCount">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowCount</see>
+    /// </summary>
+    public static ValueTask SetAriaRowCount(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRowCount", value);
+
+    /// <summary>
+    /// Which row of the whole table this row or cell sits in, counting from one. Reflects <c>aria-rowindex</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndex">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndex</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRowIndex(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRowIndex");
+    /// <summary>
+    /// Which row of the whole table this row or cell sits in, counting from one. Reflects <c>aria-rowindex</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndex">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndex</see>
+    /// </summary>
+    public static ValueTask SetAriaRowIndex(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRowIndex", value);
+
+    /// <summary>
+    /// A human-readable row label, announced instead of the row number. Reflects <c>aria-rowindextext</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndexText">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndexText</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRowIndexText(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRowIndexText");
+    /// <summary>
+    /// A human-readable row label, announced instead of the row number. Reflects <c>aria-rowindextext</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndexText">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndexText</see>
+    /// </summary>
+    public static ValueTask SetAriaRowIndexText(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRowIndexText", value);
+
+    /// <summary>
+    /// How many rows the cell spans, for a grid not built from table elements. Reflects <c>aria-rowspan</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowSpan">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowSpan</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaRowSpan(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaRowSpan");
+    /// <summary>
+    /// How many rows the cell spans, for a grid not built from table elements. Reflects <c>aria-rowspan</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowSpan">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowSpan</see>
+    /// </summary>
+    public static ValueTask SetAriaRowSpan(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaRowSpan", value);
+
+    /// <summary>
+    /// Whether the item is selected - for options, tabs, rows and grid cells. Reflects <c>aria-selected</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSelected">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSelected</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaSelected(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaSelected");
+    /// <summary>
+    /// Whether the item is selected - for options, tabs, rows and grid cells. Reflects <c>aria-selected</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSelected">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSelected</see>
+    /// </summary>
+    public static ValueTask SetAriaSelected(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaSelected", value);
+
+    /// <summary>
+    /// How many items the whole set holds, when the DOM holds only some of them. Reflects <c>aria-setsize</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSetSize">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSetSize</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaSetSize(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaSetSize");
+    /// <summary>
+    /// How many items the whole set holds, when the DOM holds only some of them. Reflects <c>aria-setsize</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSetSize">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSetSize</see>
+    /// </summary>
+    public static ValueTask SetAriaSetSize(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaSetSize", value);
+
+    /// <summary>
+    /// How a column or row is sorted: <c>ascending</c>, <c>descending</c>, <c>other</c> or <c>none</c>. Reflects <c>aria-sort</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaSort(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaSort");
+    /// <summary>
+    /// How a column or row is sorted: <c>ascending</c>, <c>descending</c>, <c>other</c> or <c>none</c>. Reflects <c>aria-sort</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort</see>
+    /// </summary>
+    public static ValueTask SetAriaSort(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaSort", value);
+
+    /// <summary>
+    /// The largest value a range widget accepts. Reflects <c>aria-valuemax</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMax">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMax</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaValueMax(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaValueMax");
+    /// <summary>
+    /// The largest value a range widget accepts. Reflects <c>aria-valuemax</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMax">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMax</see>
+    /// </summary>
+    public static ValueTask SetAriaValueMax(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaValueMax", value);
+
+    /// <summary>
+    /// The smallest value a range widget accepts. Reflects <c>aria-valuemin</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaValueMin(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaValueMin");
+    /// <summary>
+    /// The smallest value a range widget accepts. Reflects <c>aria-valuemin</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin</see>
+    /// </summary>
+    public static ValueTask SetAriaValueMin(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaValueMin", value);
+
+    /// <summary>
+    /// The current value of a range widget. Reflects <c>aria-valuenow</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueNow">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueNow</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaValueNow(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaValueNow");
+    /// <summary>
+    /// The current value of a range widget. Reflects <c>aria-valuenow</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueNow">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueNow</see>
+    /// </summary>
+    public static ValueTask SetAriaValueNow(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaValueNow", value);
+
+    /// <summary>
+    /// A human-readable rendering of the current value, announced instead of the number. Reflects <c>aria-valuetext</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueText">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueText</see>
+    /// </summary>
+    public static ValueTask<string> GetAriaValueText(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "ariaValueText");
+    /// <summary>
+    /// A human-readable rendering of the current value, announced instead of the number. Reflects <c>aria-valuetext</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueText">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueText</see>
+    /// </summary>
+    public static ValueTask SetAriaValueText(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "ariaValueText", value);
+
+    /// <summary>
+    /// The element's ARIA role - what it is to assistive technology, for when the tag alone does not say. Reflects <c>role</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/role">https://developer.mozilla.org/en-US/docs/Web/API/Element/role</see>
+    /// </summary>
+    public static ValueTask<string> GetRole(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAria", element, "role");
+    /// <summary>
+    /// The element's ARIA role - what it is to assistive technology, for when the tag alone does not say. Reflects <c>role</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/role">https://developer.mozilla.org/en-US/docs/Web/API/Element/role</see>
+    /// </summary>
+    public static ValueTask SetRole(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAria", element, "role", value);
+
+    /// <summary>
+    /// Announces <paramref name="message"/> to assistive technology without changing the page - the
+    /// direct alternative to mutating a live region so that a screen reader reads it out.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaNotify">https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaNotify</see>
+    /// </summary>
+    /// <remarks>
+    /// Experimental and Chromium-only. A no-op everywhere else rather than a throw: an announcement
+    /// that does not happen is not a failure of the page that asked for it, so a caller does not
+    /// have to feature-detect. Keep the visible UI telling the same story, since most users will
+    /// never receive this.
+    /// </remarks>
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(AriaNotifyJsOptions))]
+    public static ValueTask AriaNotify(this ElementReference element, string message, AriaNotifyOptions? options = null)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.ariaNotify", element, message, options?.ToJsObject());
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/ElementReferenceDomExtensions.cs b/src/Butil/Bit.Butil/Publics/Element/ElementReferenceDomExtensions.cs
new file mode 100644
index 00000000000..8d5830c3dad
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/ElementReferenceDomExtensions.cs
@@ -0,0 +1,360 @@
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Butil;
+
+/// <summary>
+/// The parts of <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</see>
+/// and <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</see>
+/// that change what an element contains or how it is presented: inserting text and markup around
+/// and inside it, its class list, its <c>data-*</c> attributes, its inline style, its popover state
+/// and the queries that count what is under it.
+/// </summary>
+/// <remarks>
+/// Blazor owns the DOM it rendered, and a diff can undo anything written here on the next render.
+/// These are for elements Blazor does not re-render - a container it renders once, or an element
+/// outside the component's own markup.
+/// <br/>
+/// The DOM insertion methods take nodes as well as strings; only the strings cross this boundary.
+/// A <see cref="ElementReference"/> is minted by Blazor's renderer and cannot be handed back to it
+/// from JavaScript, so there is no way to name another element as the thing being inserted. Each
+/// string becomes a text node - use <see cref="InsertAdjacentHtml"/> to insert markup.
+/// </remarks>
+public static class ElementReferenceDomExtensions
+{
+    /// <summary>
+    /// Inserts text nodes immediately after the element, as siblings.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/after">https://developer.mozilla.org/en-US/docs/Web/API/Element/after</see>
+    /// </summary>
+    public static ValueTask After(this ElementReference element, params string[] nodes)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.after", element, nodes);
+
+    /// <summary>
+    /// Appends text nodes inside the element, after its last child.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/append">https://developer.mozilla.org/en-US/docs/Web/API/Element/append</see>
+    /// </summary>
+    public static ValueTask Append(this ElementReference element, params string[] nodes)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.append", element, nodes);
+
+    /// <summary>
+    /// Inserts text nodes immediately before the element, as siblings.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/before">https://developer.mozilla.org/en-US/docs/Web/API/Element/before</see>
+    /// </summary>
+    public static ValueTask Before(this ElementReference element, params string[] nodes)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.before", element, nodes);
+
+    /// <summary>
+    /// Prepends text nodes inside the element, before its first child.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend">https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend</see>
+    /// </summary>
+    public static ValueTask Prepend(this ElementReference element, params string[] nodes)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.prepend", element, nodes);
+
+    /// <summary>
+    /// Replaces every child of the element with the given text nodes. Passing nothing empties it.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren">https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren</see>
+    /// </summary>
+    public static ValueTask ReplaceChildren(this ElementReference element, params string[] nodes)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.replaceChildren", element, nodes);
+
+    /// <summary>
+    /// Replaces the element itself with the given text nodes. The reference is dangling afterwards.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith">https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith</see>
+    /// </summary>
+    public static ValueTask ReplaceWith(this ElementReference element, params string[] nodes)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.replaceWith", element, nodes);
+
+    /// <summary>
+    /// Parses <paramref name="html"/> as markup and inserts the result at the given position,
+    /// without reparsing the element's existing children.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML">https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML</see>
+    /// </summary>
+    /// <remarks>
+    /// <b>Security note:</b> the markup is parsed as-is and bypasses Blazor's encoding. Never pass
+    /// untrusted input - use <see cref="InsertAdjacentText"/>, which cannot introduce elements, or
+    /// <see cref="SetHtml"/>, which sanitizes.
+    /// </remarks>
+    public static ValueTask InsertAdjacentHtml(this ElementReference element, InsertPosition position, string html)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.insertAdjacentHTML", element, PositionName(position), html);
+
+    /// <summary>
+    /// Inserts <paramref name="text"/> as a text node at the given position. Markup in the string
+    /// stays text.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText">https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText</see>
+    /// </summary>
+    public static ValueTask InsertAdjacentText(this ElementReference element, InsertPosition position, string text)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.insertAdjacentText", element, PositionName(position), text);
+
+    /// <summary>
+    /// Serializes the element's contents to HTML, optionally including the shadow roots that were
+    /// attached as serializable - which <c>InnerHtml</c> always leaves out.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML">https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML</see>
+    /// </summary>
+    /// <remarks>
+    /// Where the browser has no <c>getHTML</c>, this falls back to <c>innerHTML</c> - the same
+    /// answer for a tree with no shadow roots in it.
+    /// <br/>
+    /// During prerender/SSR (no JS runtime) this returns an empty string rather than throwing.
+    /// </remarks>
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(GetHtmlJsOptions))]
+    public static ValueTask<string> GetHtml(this ElementReference element, GetHtmlOptions? options = null)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getHTML", element, options?.ToJsObject());
+
+    /// <summary>
+    /// Replaces the element's contents with <paramref name="html"/>, running it through the
+    /// browser's HTML sanitizer first: scripts, event-handler attributes and <c>javascript:</c> URLs
+    /// are stripped.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML">https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML</see>
+    /// </summary>
+    /// <remarks>
+    /// This is the one to reach for when the markup came from a user. It throws where the browser
+    /// has no <c>setHTML</c>: quietly falling back to an unsanitized write would turn the safe call
+    /// into the unsafe one. Feature-detect with a <c>try</c> and fall back to your own sanitizer.
+    /// </remarks>
+    public static ValueTask SetHtml(this ElementReference element, string html)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setHTML", element, html, null);
+
+    /// <summary>
+    /// Replaces the element's contents with <paramref name="html"/> without sanitizing, parsing
+    /// declarative shadow roots in it along the way.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTMLUnsafe">https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTMLUnsafe</see>
+    /// </summary>
+    /// <remarks>
+    /// <b>Security note:</b> "unsafe" is the spec's own word for it. Only for markup you produced.
+    /// Use <see cref="SetHtml"/> for anything else.
+    /// </remarks>
+    public static ValueTask SetHtmlUnsafe(this ElementReference element, string html)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setHTMLUnsafe", element, html);
+
+    /// <summary>
+    /// Every border box the element occupies, in viewport coordinates - more than one for an inline
+    /// element that wraps across lines.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects">https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects</see>
+    /// </summary>
+    /// <remarks>
+    /// Empty for an element that generates no boxes at all, which is how <c>display: none</c> reads
+    /// here - and also what prerender/SSR (no JS runtime) hands back, so the two cannot be told
+    /// apart. Defer the read to <c>OnAfterRenderAsync</c> if you branch on it.
+    /// </remarks>
+    public static async ValueTask<Rect[]> GetClientRects(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<Rect[]>("BitButil.element.getClientRects", element);
+
+    /// <summary>
+    /// Adds classes to the element, ignoring the ones it already has.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList</see>
+    /// </summary>
+    public static ValueTask AddClass(this ElementReference element, params string[] tokens)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.classListAdd", element, tokens);
+
+    /// <summary>
+    /// Removes classes from the element, ignoring the ones it does not have.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList</see>
+    /// </summary>
+    public static ValueTask RemoveClass(this ElementReference element, params string[] tokens)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.classListRemove", element, tokens);
+
+    /// <summary>
+    /// Adds the class when absent and removes it when present, or pins it to
+    /// <paramref name="force"/>. Returns whether the class is on the element afterwards.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList</see>
+    /// </summary>
+    public static async ValueTask<bool> ToggleClass(this ElementReference element, string token, bool? force = null)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.classListToggle", element, token, force);
+
+    /// <summary>
+    /// Swaps <paramref name="oldToken"/> for <paramref name="newToken"/> in place, keeping its
+    /// position in the list. Returns false when the old class was not there, in which case nothing
+    /// is added.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList</see>
+    /// </summary>
+    public static async ValueTask<bool> ReplaceClass(this ElementReference element, string oldToken, string newToken)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.classListReplace", element, oldToken, newToken);
+
+    /// <summary>
+    /// Returns whether the element carries the class.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList</see>
+    /// </summary>
+    /// <remarks>
+    /// During prerender/SSR (no JS runtime) this returns <c>false</c> rather than throwing, so the
+    /// result can't be distinguished from a genuine one. Defer the read to <c>OnAfterRenderAsync</c>
+    /// if you branch on it.
+    /// </remarks>
+    public static async ValueTask<bool> ContainsClass(this ElementReference element, string token)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.classListContains", element, token);
+
+    /// <summary>
+    /// The element's classes, in document order - <c>className</c> split into its tokens.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList</see>
+    /// </summary>
+    public static async ValueTask<string[]> GetClassList(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<string[]>("BitButil.element.getClassList", element);
+
+    /// <summary>
+    /// Reads one <c>data-*</c> attribute by its dataset key - <c>userId</c> for
+    /// <c>data-user-id</c>. Null when the attribute is absent.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset</see>
+    /// </summary>
+    public static ValueTask<string> GetData(this ElementReference element, string key)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getData", element, key);
+
+    /// <summary>
+    /// Writes one <c>data-*</c> attribute by its dataset key, creating it when absent.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset</see>
+    /// </summary>
+    public static ValueTask SetData(this ElementReference element, string key, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setData", element, key, value);
+
+    /// <summary>
+    /// Removes one <c>data-*</c> attribute by its dataset key.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset</see>
+    /// </summary>
+    public static ValueTask RemoveData(this ElementReference element, string key)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.removeData", element, key);
+
+    /// <summary>
+    /// The dataset keys the element carries - <c>userId</c> for <c>data-user-id</c>, not the
+    /// attribute names.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset</see>
+    /// </summary>
+    public static async ValueTask<string[]> GetDataNames(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<string[]>("BitButil.element.getDataNames", element);
+
+    /// <summary>
+    /// The element's whole inline style, as it would be written in a <c>style</c> attribute.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style</see>
+    /// </summary>
+    /// <remarks>
+    /// Inline style only. What a stylesheet contributes is not here - that is
+    /// <c>getComputedStyle</c>, which belongs to the window rather than to the element.
+    /// </remarks>
+    public static ValueTask<string> GetStyleText(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getStyleText", element);
+
+    /// <summary>
+    /// Replaces the element's whole inline style. Anything already there is dropped.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style</see>
+    /// </summary>
+    public static ValueTask SetStyleText(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setStyleText", element, value);
+
+    /// <summary>
+    /// Reads one inline style declaration by its CSS property name - <c>"background-color"</c>, and
+    /// custom properties (<c>"--accent"</c>) too. Empty when the property is not set inline.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue">https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue</see>
+    /// </summary>
+    public static ValueTask<string> GetStyleProperty(this ElementReference element, string name)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getStyleProperty", element, name);
+
+    /// <summary>
+    /// Sets one inline style declaration by its CSS property name, leaving the rest alone.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty">https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty</see>
+    /// </summary>
+    /// <remarks>Pass <paramref name="important"/> to mark the declaration <c>!important</c>.</remarks>
+    public static ValueTask SetStyleProperty(this ElementReference element, string name, string value, bool important = false)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setStyleProperty", element, name, value, important ? "important" : null);
+
+    /// <summary>
+    /// Removes one inline style declaration and returns what it held.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty">https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty</see>
+    /// </summary>
+    public static ValueTask<string> RemoveStyleProperty(this ElementReference element, string name)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.removeStyleProperty", element, name);
+
+    /// <summary>
+    /// Shows the element as a popover, in the top layer above the rest of the page.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover</see>
+    /// </summary>
+    /// <remarks>
+    /// The element needs a <c>popover</c> attribute - see
+    /// <see cref="ElementReferenceStateExtensions.SetPopover"/>. A no-op where the browser has no
+    /// popover support, so a page can call it without feature-detecting first.
+    /// </remarks>
+    public static ValueTask ShowPopover(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.showPopover", element);
+
+    /// <summary>
+    /// Hides the element if it is showing as a popover.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidePopover">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidePopover</see>
+    /// </summary>
+    public static ValueTask HidePopover(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.hidePopover", element);
+
+    /// <summary>
+    /// Shows the popover when hidden and hides it when shown, or pins it to
+    /// <paramref name="force"/>. Returns whether it is showing afterwards.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover</see>
+    /// </summary>
+    /// <remarks>
+    /// False where the browser has no popover support, which is indistinguishable from a popover
+    /// that ended up hidden - as it also is during prerender/SSR (no JS runtime).
+    /// </remarks>
+    public static async ValueTask<bool> TogglePopover(this ElementReference element, bool? force = null)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.togglePopover", element, force);
+
+    /// <summary>
+    /// Returns whether any descendant of the element matches <paramref name="selectors"/>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector">https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector</see>
+    /// </summary>
+    /// <remarks>
+    /// The DOM method hands back the matched element. An <see cref="ElementReference"/> can only be
+    /// minted by Blazor's renderer, so there is nothing to hand back across the boundary - capture
+    /// the element you need with <c>@ref</c> instead, and use this for the existence question.
+    /// <br/>
+    /// During prerender/SSR (no JS runtime) this returns <c>false</c> rather than throwing.
+    /// </remarks>
+    public static async ValueTask<bool> QuerySelectorMatches(this ElementReference element, string selectors)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.querySelectorMatches", element, selectors);
+
+    /// <summary>
+    /// How many descendants of the element match <paramref name="selectors"/>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll">https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll</see>
+    /// </summary>
+    /// <remarks>
+    /// The count rather than the elements, for the same reason as
+    /// <see cref="QuerySelectorMatches"/>. During prerender/SSR (no JS runtime) this returns
+    /// <c>0</c> rather than throwing.
+    /// </remarks>
+    public static async ValueTask<int> QuerySelectorAllCount(this ElementReference element, string selectors)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<int>("BitButil.element.querySelectorAllCount", element, selectors);
+
+    private static string PositionName(InsertPosition position) => position switch
+    {
+        InsertPosition.BeforeBegin => "beforebegin",
+        InsertPosition.AfterBegin => "afterbegin",
+        InsertPosition.AfterEnd => "afterend",
+        _ => "beforeend",
+    };
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/ElementReferenceStateExtensions.cs b/src/Butil/Bit.Butil/Publics/Element/ElementReferenceStateExtensions.cs
new file mode 100644
index 00000000000..21443d6c26a
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/ElementReferenceStateExtensions.cs
@@ -0,0 +1,474 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+
+namespace Bit.Butil;
+
+/// <summary>
+/// The remaining state an
+/// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</see> or an
+/// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</see>
+/// carries: its identity in the document tree, its tooltip and language, the hints it gives a
+/// virtual keyboard and a spell checker, its popover kind and its shadow-DOM wiring.
+/// </summary>
+/// <remarks>
+/// Every read is one interop round trip, and every one of these has a Blazor equivalent that costs
+/// nothing: <c>title</c>, <c>lang</c> and <c>draggable</c> are attributes you can simply render.
+/// Reach for these when the element is not yours to re-render, or when you need to read what
+/// something else put there.
+/// <br/>
+/// During prerender/SSR (no JS runtime) every read returns a safe default - an empty string, an
+/// empty array, <c>false</c>, <c>0</c> - rather than throwing, so a value read there cannot be told
+/// apart from a genuine one. Defer reads you branch on to <c>OnAfterRenderAsync</c>.
+/// </remarks>
+public static class ElementReferenceStateExtensions
+{
+    /// <summary>
+    /// The label a keyboard shortcut for this element would be shown with - "Alt+S" or "⌃⌥S",
+    /// depending on the platform. Empty on engines that do not compute one.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKeyLabel">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKeyLabel</see>
+    /// </summary>
+    public static ValueTask<string> GetAccessKeyLabel(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.accessKeyLabel", element);
+
+    /// <summary>
+    /// The name of the slot this element is assigned to inside its shadow host, or null when it is
+    /// not slotted. This is where the element <i>landed</i>; <see cref="GetSlot"/> is where it asked
+    /// to go.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/assignedSlot">https://developer.mozilla.org/en-US/docs/Web/API/Element/assignedSlot</see>
+    /// </summary>
+    /// <remarks>
+    /// The DOM property is the slot element itself; an <see cref="ElementReference"/> can only be
+    /// minted by Blazor's renderer, so what crosses the boundary is the slot's name.
+    /// </remarks>
+    public static ValueTask<string> GetAssignedSlotName(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.assignedSlotName", element);
+
+    /// <summary>
+    /// How a virtual keyboard should capitalize text typed into the element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocapitalize">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocapitalize</see>
+    /// </summary>
+    public static async ValueTask<Autocapitalize> GetAutocapitalize(this ElementReference element)
+    {
+        var value = await ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getAutocapitalize", element);
+        return value switch
+        {
+            "none" => Autocapitalize.None,
+            "off" => Autocapitalize.Off,
+            "on" => Autocapitalize.On,
+            "sentences" => Autocapitalize.Sentences,
+            "words" => Autocapitalize.Words,
+            "characters" => Autocapitalize.Characters,
+            _ => Autocapitalize.NotSet,
+        };
+    }
+    /// <summary>
+    /// How a virtual keyboard should capitalize text typed into the element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocapitalize">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocapitalize</see>
+    /// </summary>
+    public static async ValueTask SetAutocapitalize(this ElementReference element, Autocapitalize value)
+    {
+        var v = value switch
+        {
+            Autocapitalize.None => "none",
+            Autocapitalize.Off => "off",
+            Autocapitalize.On => "on",
+            Autocapitalize.Sentences => "sentences",
+            Autocapitalize.Words => "words",
+            Autocapitalize.Characters => "characters",
+            _ => "",
+        };
+        await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAutocapitalize", element, v);
+    }
+
+    /// <summary>
+    /// Whether the browser may autocorrect what the user types into the element. Safari and
+    /// Chromium; false elsewhere, where the feature does not exist.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocorrect">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocorrect</see>
+    /// </summary>
+    public static async ValueTask<bool> GetAutocorrect(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.getAutocorrect", element);
+    /// <summary>
+    /// Whether the browser may autocorrect what the user types into the element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocorrect">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autocorrect</see>
+    /// </summary>
+    public static async ValueTask SetAutocorrect(this ElementReference element, bool value)
+        => await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAutocorrect", element, value);
+
+    /// <summary>
+    /// Whether the element asks for focus when the page loads.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus</see>
+    /// </summary>
+    /// <remarks>
+    /// Setting this after load does nothing on its own - the browser has already decided where
+    /// focus goes. Use <c>Focus</c> for that.
+    /// </remarks>
+    public static async ValueTask<bool> GetAutofocus(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.getAutofocus", element);
+    /// <summary>
+    /// Whether the element asks for focus when the page loads.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus</see>
+    /// </summary>
+    public static async ValueTask SetAutofocus(this ElementReference element, bool value)
+        => await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setAutofocus", element, value);
+
+    /// <summary>
+    /// How many element children the element has - text nodes and comments not counted.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount">https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount</see>
+    /// </summary>
+    public static async ValueTask<int> GetChildElementCount(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<int>("BitButil.element.childElementCount", element);
+
+    /// <summary>
+    /// The effective CSS <c>zoom</c> applied to the element by itself and its ancestors - the factor
+    /// between the numbers <c>GetBoundingClientRect</c> reports and the ones the layout was written
+    /// in. 1 when nothing is zoomed, and on engines with no CSS zoom.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/currentCSSZoom">https://developer.mozilla.org/en-US/docs/Web/API/Element/currentCSSZoom</see>
+    /// </summary>
+    public static async ValueTask<double> GetCurrentCssZoom(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<double>("BitButil.element.currentCSSZoom", element);
+
+    /// <summary>
+    /// Whether the element can be dragged. Note that this is a tri-state attribute in HTML - the
+    /// property collapses it to the effective boolean the browser acts on.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/draggable">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/draggable</see>
+    /// </summary>
+    public static async ValueTask<bool> GetDraggable(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.getDraggable", element);
+    /// <summary>
+    /// Whether the element can be dragged.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/draggable">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/draggable</see>
+    /// </summary>
+    public static async ValueTask SetDraggable(this ElementReference element, bool value)
+        => await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setDraggable", element, value);
+
+    /// <summary>
+    /// The name this element is reported under in Element Timing performance entries. Empty when
+    /// the element is not being timed.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming">https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming</see>
+    /// </summary>
+    public static ValueTask<string> GetElementTiming(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getElementTiming", element);
+    /// <summary>
+    /// Marks the element for Element Timing under the given name, so a
+    /// <c>PerformanceObserver</c> watching "element" entries reports when it was painted.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming">https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming</see>
+    /// </summary>
+    /// <remarks>
+    /// Only an element that has not been painted yet can be timed - setting this on something
+    /// already on screen reports nothing.
+    /// </remarks>
+    public static ValueTask SetElementTiming(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setElementTiming", element, value);
+
+    /// <summary>
+    /// Whether the element hosts a shadow root that scripts can reach - an open one.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot">https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot</see>
+    /// </summary>
+    /// <remarks>
+    /// False for a closed shadow root as well as for no shadow root at all: a closed one is not
+    /// exposed to script, which is the point of closing it.
+    /// </remarks>
+    public static async ValueTask<bool> HasShadowRoot(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.hasShadowRoot", element);
+
+    /// <summary>
+    /// The element's language, as a BCP 47 tag. Empty when it inherits one.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang</see>
+    /// </summary>
+    public static ValueTask<string> GetLang(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getLang", element);
+    /// <summary>
+    /// The element's language, as a BCP 47 tag.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang</see>
+    /// </summary>
+    public static ValueTask SetLang(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setLang", element, value);
+
+    /// <summary>
+    /// The element's local name, without a namespace prefix and in the case the document uses -
+    /// lowercase in HTML, where <c>GetTagName</c> reports uppercase.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/localName">https://developer.mozilla.org/en-US/docs/Web/API/Element/localName</see>
+    /// </summary>
+    public static ValueTask<string> GetLocalName(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.localName", element);
+
+    /// <summary>
+    /// The namespace the element belongs to - the XHTML namespace for HTML elements, and the SVG
+    /// one for anything inside an <c>&lt;svg&gt;</c>.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI">https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI</see>
+    /// </summary>
+    public static ValueTask<string> GetNamespaceUri(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.namespaceURI", element);
+
+    /// <summary>
+    /// The element's CSP nonce. Empty when it has none.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce</see>
+    /// </summary>
+    /// <remarks>
+    /// Browsers hide the nonce <i>attribute</i> from scripts so an injected selector cannot read it;
+    /// the property is what remains, and only same-origin script can reach it.
+    /// </remarks>
+    public static ValueTask<string> GetNonce(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getNonce", element);
+    /// <summary>
+    /// The element's CSP nonce.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce</see>
+    /// </summary>
+    public static ValueTask SetNonce(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setNonce", element, value);
+
+    /// <summary>
+    /// The tag name of the element the offset metrics are measured against - the nearest positioned
+    /// ancestor. Empty when there is none, which is also what a <c>display:none</c> element reports.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent</see>
+    /// </summary>
+    /// <remarks>
+    /// The DOM property is the ancestor element itself; an <see cref="ElementReference"/> can only
+    /// be minted by Blazor's renderer, so what crosses the boundary is its tag name.
+    /// </remarks>
+    public static ValueTask<string> GetOffsetParentTagName(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.offsetParentTagName", element);
+
+    /// <summary>
+    /// The element's rendered text, the way <c>InnerText</c> reports it.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText</see>
+    /// </summary>
+    public static ValueTask<string> GetOuterText(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getOuterText", element);
+    /// <summary>
+    /// Replaces the element itself - not its contents - with the given text.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText</see>
+    /// </summary>
+    /// <remarks>
+    /// The element is gone afterwards and the reference is dangling. This is the asymmetry the DOM
+    /// itself has: reading gives the text inside, writing removes the element.
+    /// </remarks>
+    public static ValueTask SetOuterText(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setOuterText", element, value);
+
+    /// <summary>
+    /// The shadow parts the element exposes to the outside - what a <c>::part()</c> selector can
+    /// reach it by.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/part">https://developer.mozilla.org/en-US/docs/Web/API/Element/part</see>
+    /// </summary>
+    public static async ValueTask<string[]> GetPart(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<string[]>("BitButil.element.getPart", element);
+    /// <summary>
+    /// Sets the shadow parts the element exposes, as a space-separated list.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/part">https://developer.mozilla.org/en-US/docs/Web/API/Element/part</see>
+    /// </summary>
+    public static ValueTask SetPart(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setPart", element, value);
+
+    /// <summary>
+    /// What kind of popover the element is, if any.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover</see>
+    /// </summary>
+    public static async ValueTask<ElementPopover> GetPopover(this ElementReference element)
+    {
+        var value = await ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getPopover", element);
+        return value switch
+        {
+            "auto" => ElementPopover.Auto,
+            "manual" => ElementPopover.Manual,
+            "hint" => ElementPopover.Hint,
+            _ => ElementPopover.NotSet,
+        };
+    }
+    /// <summary>
+    /// Makes the element a popover of the given kind, or - with
+    /// <see cref="ElementPopover.NotSet"/> - stops it being one.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover</see>
+    /// </summary>
+    public static async ValueTask SetPopover(this ElementReference element, ElementPopover value)
+    {
+        var v = value switch
+        {
+            ElementPopover.Auto => "auto",
+            ElementPopover.Manual => "manual",
+            ElementPopover.Hint => "hint",
+            _ => null,
+        };
+        await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setPopover", element, v);
+    }
+
+    /// <summary>
+    /// The element's namespace prefix - "svg" in <c>&lt;svg:rect&gt;</c>. Empty when it has none,
+    /// which is the usual case in an HTML document.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/prefix">https://developer.mozilla.org/en-US/docs/Web/API/Element/prefix</see>
+    /// </summary>
+    public static ValueTask<string> GetPrefix(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.prefix", element);
+
+    /// <summary>
+    /// The largest value <c>SetScrollLeft</c> will take - the element's scrollable width minus what
+    /// fits.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeftMax</see>
+    /// </summary>
+    /// <remarks>
+    /// A Firefox property. Everywhere else this computes the same figure from <c>scrollWidth</c> and
+    /// <c>clientWidth</c>, which is how the property is defined.
+    /// </remarks>
+    public static async ValueTask<float> GetScrollLeftMax(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<float>("BitButil.element.scrollLeftMax", element);
+
+    /// <summary>
+    /// The largest value <c>SetScrollTop</c> will take - the element's scrollable height minus what
+    /// fits.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTopMax</see>
+    /// </summary>
+    /// <remarks>
+    /// A Firefox property. Everywhere else this computes the same figure from <c>scrollHeight</c>
+    /// and <c>clientHeight</c>, which is how the property is defined.
+    /// </remarks>
+    public static async ValueTask<float> GetScrollTopMax(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<float>("BitButil.element.scrollTopMax", element);
+
+    /// <summary>
+    /// The name of the shadow-DOM slot the element asks to be placed in.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/slot">https://developer.mozilla.org/en-US/docs/Web/API/Element/slot</see>
+    /// </summary>
+    public static ValueTask<string> GetSlot(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getSlot", element);
+    /// <summary>
+    /// The name of the shadow-DOM slot the element asks to be placed in.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/slot">https://developer.mozilla.org/en-US/docs/Web/API/Element/slot</see>
+    /// </summary>
+    public static ValueTask SetSlot(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setSlot", element, value);
+
+    /// <summary>
+    /// Whether the browser should spell-check what the user types into the element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/spellcheck">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/spellcheck</see>
+    /// </summary>
+    public static async ValueTask<bool> GetSpellcheck(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.getSpellcheck", element);
+    /// <summary>
+    /// Whether the browser should spell-check what the user types into the element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/spellcheck">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/spellcheck</see>
+    /// </summary>
+    public static async ValueTask SetSpellcheck(this ElementReference element, bool value)
+        => await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setSpellcheck", element, value);
+
+    /// <summary>
+    /// The element's advisory text - what a browser shows as a tooltip on hover.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title</see>
+    /// </summary>
+    public static ValueTask<string> GetTitle(this ElementReference element)
+        => ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getTitle", element);
+    /// <summary>
+    /// The element's advisory text - what a browser shows as a tooltip on hover.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title</see>
+    /// </summary>
+    public static ValueTask SetTitle(this ElementReference element, string value)
+        => ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setTitle", element, value);
+
+    /// <summary>
+    /// Whether the element's text should be translated when the page is. True by default.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/translate">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/translate</see>
+    /// </summary>
+    public static async ValueTask<bool> GetTranslate(this ElementReference element)
+        => await ElementReferenceExtensions.GetRuntime(element).Invoke<bool>("BitButil.element.getTranslate", element);
+    /// <summary>
+    /// Whether the element's text should be translated when the page is. Set it false for code,
+    /// identifiers and proper nouns a machine translator would mangle.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/translate">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/translate</see>
+    /// </summary>
+    public static async ValueTask SetTranslate(this ElementReference element, bool value)
+        => await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setTranslate", element, value);
+
+    /// <summary>
+    /// Who controls the on-screen keyboard for this editable element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/virtualKeyboardPolicy">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/virtualKeyboardPolicy</see>
+    /// </summary>
+    /// <remarks>Chromium only; reads as <see cref="VirtualKeyboardPolicy.NotSet"/> elsewhere.</remarks>
+    public static async ValueTask<VirtualKeyboardPolicy> GetVirtualKeyboardPolicy(this ElementReference element)
+    {
+        var value = await ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getVirtualKeyboardPolicy", element);
+        return value switch
+        {
+            "auto" => VirtualKeyboardPolicy.Auto,
+            "manual" => VirtualKeyboardPolicy.Manual,
+            _ => VirtualKeyboardPolicy.NotSet,
+        };
+    }
+    /// <summary>
+    /// Who controls the on-screen keyboard for this editable element.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/virtualKeyboardPolicy">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/virtualKeyboardPolicy</see>
+    /// </summary>
+    public static async ValueTask SetVirtualKeyboardPolicy(this ElementReference element, VirtualKeyboardPolicy value)
+    {
+        var v = value switch
+        {
+            VirtualKeyboardPolicy.Auto => "auto",
+            VirtualKeyboardPolicy.Manual => "manual",
+            _ => "",
+        };
+        await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setVirtualKeyboardPolicy", element, v);
+    }
+
+    /// <summary>
+    /// Whether the browser may offer inline writing suggestions inside the element. True unless the
+    /// element - or an ancestor - turned them off.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/writingSuggestions">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/writingSuggestions</see>
+    /// </summary>
+    /// <remarks>
+    /// The DOM property is the string "true" or "false"; this reports the boolean it stands for.
+    /// Engines without the feature report true, which is what they behave as.
+    /// </remarks>
+    public static async ValueTask<bool> GetWritingSuggestions(this ElementReference element)
+    {
+        var value = await ElementReferenceExtensions.GetRuntime(element).Invoke<string>("BitButil.element.getWritingSuggestions", element);
+        return value != "false";
+    }
+    /// <summary>
+    /// Whether the browser may offer inline writing suggestions inside the element. Set it false for
+    /// a field where an autocompleted phrase would be wrong - a password hint, a code editor.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/writingSuggestions">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/writingSuggestions</see>
+    /// </summary>
+    public static async ValueTask SetWritingSuggestions(this ElementReference element, bool value)
+        => await ElementReferenceExtensions.GetRuntime(element).InvokeVoid("BitButil.element.setWritingSuggestions", element, value ? "true" : "false");
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/FocusOptions.cs b/src/Butil/Bit.Butil/Publics/Element/FocusOptions.cs
new file mode 100644
index 00000000000..064acb75e20
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/FocusOptions.cs
@@ -0,0 +1,27 @@
+namespace Bit.Butil;
+
+/// <summary>
+/// How <see cref="ElementReferenceExtensions.Focus(Microsoft.AspNetCore.Components.ElementReference, FocusOptions?)"/>
+/// should behave beyond moving focus.
+/// </summary>
+public class FocusOptions
+{
+    /// <summary>
+    /// True to leave the scroll position alone. By default the browser scrolls the newly focused
+    /// element into view, which is wrong for focus moved programmatically during an animation or
+    /// while restoring state.
+    /// </summary>
+    public bool? PreventScroll { get; set; }
+
+    /// <summary>
+    /// Whether the focus ring should be drawn, overriding the browser's own heuristic. Firefox only;
+    /// ignored elsewhere.
+    /// </summary>
+    public bool? FocusVisible { get; set; }
+
+    internal FocusJsOptions ToJsObject() => new()
+    {
+        PreventScroll = PreventScroll,
+        FocusVisible = FocusVisible
+    };
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/GetHtmlOptions.cs b/src/Butil/Bit.Butil/Publics/Element/GetHtmlOptions.cs
new file mode 100644
index 00000000000..f5dcc123000
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/GetHtmlOptions.cs
@@ -0,0 +1,20 @@
+namespace Bit.Butil;
+
+/// <summary>
+/// How <see cref="ElementReferenceDomExtensions.GetHtml(Microsoft.AspNetCore.Components.ElementReference, GetHtmlOptions?)"/>
+/// should treat shadow roots it meets while serializing.
+/// </summary>
+public class GetHtmlOptions
+{
+    /// <summary>
+    /// True to serialize the contents of every shadow root that was attached with
+    /// <c>serializable: true</c>. Shadow content is omitted by default, which is why the innerHTML
+    /// of a component-heavy tree so often reads as empty.
+    /// </summary>
+    public bool? SerializableShadowRoots { get; set; }
+
+    internal GetHtmlJsOptions ToJsObject() => new()
+    {
+        SerializableShadowRoots = SerializableShadowRoots
+    };
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/InsertPosition.cs b/src/Butil/Bit.Butil/Publics/Element/InsertPosition.cs
new file mode 100644
index 00000000000..ddbcc524e0a
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/InsertPosition.cs
@@ -0,0 +1,17 @@
+namespace Bit.Butil;
+
+/// <summary>Where <c>insertAdjacentHTML</c> and <c>insertAdjacentText</c> put what they are given, relative to the element.</summary>
+public enum InsertPosition
+{
+    /// <summary>Immediately before the element itself.</summary>
+    BeforeBegin,
+
+    /// <summary>Inside the element, before its first child.</summary>
+    AfterBegin,
+
+    /// <summary>Inside the element, after its last child.</summary>
+    BeforeEnd,
+
+    /// <summary>Immediately after the element itself.</summary>
+    AfterEnd
+}
diff --git a/src/Butil/Bit.Butil/Publics/Element/VirtualKeyboardPolicy.cs b/src/Butil/Bit.Butil/Publics/Element/VirtualKeyboardPolicy.cs
new file mode 100644
index 00000000000..0802181cede
--- /dev/null
+++ b/src/Butil/Bit.Butil/Publics/Element/VirtualKeyboardPolicy.cs
@@ -0,0 +1,14 @@
+namespace Bit.Butil;
+
+/// <summary>Who decides when the on-screen keyboard appears for a <c>contenteditable</c> element.</summary>
+public enum VirtualKeyboardPolicy
+{
+    /// <summary>The attribute is absent - the browser behaves as if it were <see cref="Auto"/>.</summary>
+    NotSet,
+
+    /// <summary>The browser shows and hides the keyboard as focus moves. The default.</summary>
+    Auto,
+
+    /// <summary>The page controls it through the VirtualKeyboard API instead.</summary>
+    Manual
+}
diff --git a/src/Butil/Bit.Butil/Publics/ElementReferenceExtensions.cs b/src/Butil/Bit.Butil/Publics/ElementReferenceExtensions.cs
index 609a081a121..1b9f498afeb 100644
--- a/src/Butil/Bit.Butil/Publics/ElementReferenceExtensions.cs
+++ b/src/Butil/Bit.Butil/Publics/ElementReferenceExtensions.cs
@@ -47,6 +47,68 @@ private static IJSRuntime GetJSRuntime(ElementReference elementReference)
     public static ValueTask Blur(this ElementReference element)
         => GetJSRuntime(element).InvokeVoid("BitButil.element.blur", element);
 
+    /// <summary>
+    /// Returns whether the element is visible: laid out, not <c>display:none</c>, and - when asked
+    /// for by <paramref name="options"/> - not transparent, not <c>visibility:hidden</c> and not
+    /// inside a skipped <c>content-visibility:auto</c> subtree.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility">https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility</see>
+    /// </summary>
+    /// <remarks>
+    /// During prerender/SSR (no JS runtime) this returns <c>default</c> (e.g. <c>false</c>/<c>0</c>)
+    /// rather than throwing, so the result can't be distinguished from a genuine value. If you
+    /// branch on it, defer the read to <c>OnAfterRenderAsync</c>.
+    /// </remarks>
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(CheckVisibilityJsOptions))]
+    public static async ValueTask<bool> CheckVisibility(this ElementReference element, CheckVisibilityOptions? options = null)
+        => await GetJSRuntime(element).Invoke<bool>("BitButil.element.checkVisibility", element, options?.ToJsObject());
+
+    /// <summary>
+    /// Sends a synthetic click to the element, exactly as a real one would arrive: the element's own
+    /// handlers run, the event bubbles, and default behaviour (submitting a form, following a link,
+    /// toggling a checkbox) happens.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click</see>
+    /// </summary>
+    /// <remarks>
+    /// A synthetic click is not a user gesture. APIs that require one - fullscreen, clipboard writes,
+    /// popup windows - still refuse when reached this way.
+    /// </remarks>
+    public static ValueTask Click(this ElementReference element)
+        => GetJSRuntime(element).InvokeVoid("BitButil.element.click", element);
+
+    /// <summary>
+    /// Returns whether the element, or any ancestor of it, matches <paramref name="selectors"/> -
+    /// the "am I inside one of these?" test.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/closest">https://developer.mozilla.org/en-US/docs/Web/API/Element/closest</see>
+    /// </summary>
+    /// <remarks>
+    /// The DOM method hands back the matching ancestor itself. An <see cref="ElementReference"/> can
+    /// only be minted by Blazor's renderer for an element it rendered, so there is nothing to hand
+    /// back across the boundary and the answer is the match itself.
+    /// <br/>
+    /// During prerender/SSR (no JS runtime) this returns <c>default</c> (e.g. <c>false</c>/<c>0</c>)
+    /// rather than throwing, so the result can't be distinguished from a genuine value. If you
+    /// branch on it, defer the read to <c>OnAfterRenderAsync</c>.
+    /// </remarks>
+    public static async ValueTask<bool> Closest(this ElementReference element, string selectors)
+        => await GetJSRuntime(element).Invoke<bool>("BitButil.element.closest", element, selectors);
+
+    /// <summary>
+    /// Gives the element keyboard focus, scrolling it into view unless
+    /// <see cref="FocusOptions.PreventScroll"/> says otherwise.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus</see>
+    /// </summary>
+    /// <remarks>
+    /// Blazor's own <c>ElementReference.FocusAsync</c> covers the no-options case; this overload is
+    /// for when the scroll or the focus ring has to be controlled.
+    /// </remarks>
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(FocusJsOptions))]
+    public static ValueTask Focus(this ElementReference element, FocusOptions? options = null)
+        => GetJSRuntime(element).InvokeVoid("BitButil.element.focus", element, options?.ToJsObject());
+
     /// <summary>
     /// Retrieves the value of the named attribute from the current node and returns it as a string.
     /// <br />
@@ -55,6 +117,15 @@ public static ValueTask Blur(this ElementReference element)
     public static ValueTask<string> GetAttribute(this ElementReference element, string name)
         => GetJSRuntime(element).Invoke<string>("BitButil.element.getAttribute", element, name);
 
+    /// <summary>
+    /// Retrieves the value of an attribute in the given namespace - what SVG's <c>xlink:href</c> and
+    /// XML's <c>xml:lang</c> need, and what <c>GetAttribute</c> cannot reach.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNS">https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNS</see>
+    /// </summary>
+    public static ValueTask<string> GetAttributeNS(this ElementReference element, string namespaceUri, string localName)
+        => GetJSRuntime(element).Invoke<string>("BitButil.element.getAttributeNS", element, namespaceUri, localName);
+
     /// <summary>
     /// Returns an array of attribute names from the current element.
     /// <br />
@@ -84,6 +155,19 @@ public static async ValueTask<Rect> GetBoundingClientRect(this ElementReference
     public static async ValueTask<bool> HasAttribute(this ElementReference element, string name)
         => await GetJSRuntime(element).Invoke<bool>("BitButil.element.hasAttribute", element, name);
 
+    /// <summary>
+    /// Returns whether the element carries the named attribute in the given namespace.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributeNS">https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributeNS</see>
+    /// </summary>
+    /// <remarks>
+    /// During prerender/SSR (no JS runtime) this returns <c>default</c> (e.g. <c>false</c>/<c>0</c>)
+    /// rather than throwing, so the result can't be distinguished from a genuine value. If you
+    /// branch on it, defer the read to <c>OnAfterRenderAsync</c>.
+    /// </remarks>
+    public static async ValueTask<bool> HasAttributeNS(this ElementReference element, string namespaceUri, string localName)
+        => await GetJSRuntime(element).Invoke<bool>("BitButil.element.hasAttributeNS", element, namespaceUri, localName);
+
     /// <summary>
     /// Returns a boolean value indicating if the element has one or more HTML attributes present.
     /// <br />
@@ -147,6 +231,14 @@ public static async ValueTask Remove(this ElementReference element)
     public static async ValueTask RemoveAttribute(this ElementReference element, string name)
         => await GetJSRuntime(element).InvokeVoid("BitButil.element.removeAttribute", element, name);
 
+    /// <summary>
+    /// Removes the named attribute in the given namespace.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttributeNS">https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttributeNS</see>
+    /// </summary>
+    public static async ValueTask RemoveAttributeNS(this ElementReference element, string namespaceUri, string localName)
+        => await GetJSRuntime(element).InvokeVoid("BitButil.element.removeAttributeNS", element, namespaceUri, localName);
+
     /// <summary>
     /// Asynchronously asks the browser to make the element fullscreen.
     /// <br />
@@ -218,6 +310,24 @@ public static async ValueTask ScrollIntoView(this ElementReference element, bool
     public static async ValueTask ScrollIntoView(this ElementReference element, ScrollIntoViewOptions options)
         => await GetJSRuntime(element).InvokeVoid("BitButil.element.scrollIntoView", element, null, options?.ToJsObject());
 
+    /// <summary>
+    /// Scrolls to a particular set of coordinates inside a given element. The same operation as
+    /// <c>Scroll</c>, under the name the DOM also publishes it as.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo</see>
+    /// </summary>
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(ScrollJsOptions))]
+    public static async ValueTask ScrollTo(this ElementReference element, ScrollOptions? options)
+        => await GetJSRuntime(element).InvokeVoid("BitButil.element.scrollTo", element, options?.ToJsObject(), null, null);
+    /// <summary>
+    /// Scrolls to a particular set of coordinates inside a given element. The same operation as
+    /// <c>Scroll</c>, under the name the DOM also publishes it as.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo</see>
+    /// </summary>
+    public static async ValueTask ScrollTo(this ElementReference element, double? x, double? y)
+        => await GetJSRuntime(element).InvokeVoid("BitButil.element.scrollTo", element, null, x, y);
+
     /// <summary>
     /// Sets the value of a named attribute of the current node.
     /// <br />
@@ -233,6 +343,19 @@ public static async ValueTask ScrollIntoView(this ElementReference element, Scro
     public static async ValueTask SetAttribute(this ElementReference element, string name, string value)
         => await GetJSRuntime(element).InvokeVoid("BitButil.element.setAttribute", element, name, value);
 
+    /// <summary>
+    /// Sets an attribute in the given namespace, creating it when absent.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS">https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS</see>
+    /// </summary>
+    /// <remarks>
+    /// <b>Security note:</b> the same caveat as <c>SetAttribute</c> - values are written verbatim and
+    /// bypass Blazor's encoding, so a namespaced <c>xlink:href</c> holding a <c>javascript:</c> URL is
+    /// an XSS vector. Validate untrusted input before passing it here.
+    /// </remarks>
+    public static async ValueTask SetAttributeNS(this ElementReference element, string namespaceUri, string qualifiedName, string value)
+        => await GetJSRuntime(element).InvokeVoid("BitButil.element.setAttributeNS", element, namespaceUri, qualifiedName, value);
+
     /// <summary>
     /// Designates a specific element as the capture target of future pointer events.
     /// <br />
@@ -417,6 +540,14 @@ public static async ValueTask<float> GetScrollHeight(this ElementReference eleme
     /// </remarks>
     public static async ValueTask<float> GetScrollLeft(this ElementReference element)
         => await GetJSRuntime(element).Invoke<float>("BitButil.element.scrollLeft", element);
+    /// <summary>
+    /// Sets how far the element's content is scrolled from its left edge. Clamped by the browser to
+    /// the scrollable range.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft</see>
+    /// </summary>
+    public static async ValueTask SetScrollLeft(this ElementReference element, double value)
+        => await GetJSRuntime(element).InvokeVoid("BitButil.element.setScrollLeft", element, value);
 
     /// <summary>
     /// A number representing number of pixels the top of the element is scrolled vertically.
@@ -430,6 +561,14 @@ public static async ValueTask<float> GetScrollLeft(this ElementReference element
     /// </remarks>
     public static async ValueTask<float> GetScrollTop(this ElementReference element)
         => await GetJSRuntime(element).Invoke<float>("BitButil.element.scrollTop", element);
+    /// <summary>
+    /// Sets how far the element's content is scrolled from its top edge. Clamped by the browser to
+    /// the scrollable range.
+    /// <br />
+    /// <see href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop</see>
+    /// </summary>
+    public static async ValueTask SetScrollTop(this ElementReference element, double value)
+        => await GetJSRuntime(element).InvokeVoid("BitButil.element.setScrollTop", element, value);
 
     /// <summary>
     /// Returns a number representing the scroll view width of the element.
diff --git a/src/Butil/Bit.Butil/Scripts/element.ts b/src/Butil/Bit.Butil/Scripts/element.ts
index 131972d4bd0..d2fb6f98802 100644
--- a/src/Butil/Bit.Butil/Scripts/element.ts
+++ b/src/Butil/Bit.Butil/Scripts/element.ts
@@ -5,44 +5,135 @@ var BitButil = (window as any).BitButil = (window as any).BitButil || {};
     const _elementHandlers: { [listenerId: string]: { element: HTMLElement, eventName: string, handler: any, options: any } } = {};
 
     butil.element = {
+        after(element: HTMLElement, nodes: string[]) { element.after(...nodes) },
+        append(element: HTMLElement, nodes: string[]) { element.append(...nodes) },
+        ariaNotify,
+        before(element: HTMLElement, nodes: string[]) { element.before(...nodes) },
         blur(element: HTMLElement) { element.blur() },
+        checkVisibility,
+        classListAdd(element: HTMLElement, tokens: string[]) { element.classList.add(...tokens) },
+        classListContains(element: HTMLElement, token: string) { return element.classList.contains(token) },
+        classListRemove(element: HTMLElement, tokens: string[]) { element.classList.remove(...tokens) },
+        classListReplace(element: HTMLElement, oldToken: string, newToken: string) { return element.classList.replace(oldToken, newToken) },
+        classListToggle(element: HTMLElement, token: string, force?: boolean) { return element.classList.toggle(token, force ?? undefined) },
+        click(element: HTMLElement) { element.click() },
+        closest(element: HTMLElement, selectors: string) { return !!element.closest(selectors) },
+        focus(element: HTMLElement, options?: FocusOptions) { options ? element.focus(options) : element.focus() },
         getAttribute(element: HTMLElement, name: string) { return element.getAttribute(name) },
+        getAttributeNS(element: HTMLElement, namespaceUri: string, localName: string) { return element.getAttributeNS(namespaceUri, localName) },
         getAttributeNames(element: HTMLElement) { return element.getAttributeNames() },
         getBoundingClientRect(element: HTMLElement) { return element.getBoundingClientRect() },
+        getClassList(element: HTMLElement) { return Array.from(element.classList) },
+        getClientRects(element: HTMLElement) { return Array.from(element.getClientRects()).map(r => ({ x: r.x, y: r.y, width: r.width, height: r.height })) },
+        getData(element: HTMLElement, key: string) { return element.dataset[key] ?? null },
+        getDataNames(element: HTMLElement) { return Object.keys(element.dataset) },
+        getHTML,
         hasAttribute(element: HTMLElement, name: string) { return element.hasAttribute(name) },
+        hasAttributeNS(element: HTMLElement, namespaceUri: string, localName: string) { return element.hasAttributeNS(namespaceUri, localName) },
         hasAttributes(element: HTMLElement) { return element.hasAttributes() },
         hasPointerCapture(element: HTMLElement, pointerId: number) { return element.hasPointerCapture(pointerId) },
+        hasShadowRoot(element: HTMLElement) { return !!element.shadowRoot },
+        hidePopover,
+        insertAdjacentHTML(element: HTMLElement, position: string, html: string) { element.insertAdjacentHTML(position as InsertPosition, html) },
+        insertAdjacentText(element: HTMLElement, position: string, text: string) { element.insertAdjacentText(position as InsertPosition, text) },
         matches(element: HTMLElement, selectors: string) { return element.matches(selectors) },
+        prepend(element: HTMLElement, nodes: string[]) { element.prepend(...nodes) },
+        querySelectorAllCount(element: HTMLElement, selectors: string) { return element.querySelectorAll(selectors).length },
+        querySelectorMatches(element: HTMLElement, selectors: string) { return !!element.querySelector(selectors) },
         releasePointerCapture(element: HTMLElement, pointerId: number) { element.releasePointerCapture(pointerId) },
         remove(element: HTMLElement) { element.remove() },
         removeAttribute(element: HTMLElement, name: string) { element.removeAttribute(name) },
+        removeAttributeNS(element: HTMLElement, namespaceUri: string, localName: string) { element.removeAttributeNS(namespaceUri, localName) },
+        removeData(element: HTMLElement, key: string) { delete element.dataset[key] },
+        replaceChildren(element: HTMLElement, nodes: string[]) { element.replaceChildren(...nodes) },
+        replaceWith(element: HTMLElement, nodes: string[]) { element.replaceWith(...nodes) },
         requestFullScreen(element: HTMLElement, options?: FullscreenOptions) { return element.requestFullscreen(options) },
         requestPointerLock(element: HTMLElement) { return element.requestPointerLock() },
         scroll,
         scrollBy,
         scrollIntoView,
+        scrollTo: scroll,
         setAttribute(element: HTMLElement, name: string, value: string) { return element.setAttribute(name, value) },
+        setAttributeNS(element: HTMLElement, namespaceUri: string, qualifiedName: string, value: string) { element.setAttributeNS(namespaceUri, qualifiedName, value) },
+        setData(element: HTMLElement, key: string, value: string) { element.dataset[key] = value },
+        setHTML,
+        setHTMLUnsafe,
         setPointerCapture(element: HTMLElement, pointerId: number) { element.setPointerCapture(pointerId) },
+        showPopover,
         toggleAttribute(element: HTMLElement, name: string, force?: boolean) { return element.toggleAttribute(name, force) },
+        togglePopover,
         getAccessKey(element: HTMLElement) { return element.accessKey },
         setAccessKey(element: HTMLElement, key: string) { element.accessKey = key },
+        accessKeyLabel(element: HTMLElement) { return element.accessKeyLabel },
+        getAria(element: HTMLElement, name: string) { return (element as any)[name] ?? null },
+        setAria(element: HTMLElement, name: string, value: string) { (element as any)[name] = value },
+        assignedSlotName(element: HTMLElement) { return element.assignedSlot?.name ?? null },
+        getAutocapitalize(element: HTMLElement) { return element.autocapitalize },
+        setAutocapitalize(element: HTMLElement, value: string) { element.autocapitalize = value },
+        getAutocorrect(element: HTMLElement) { return (element as any).autocorrect },
+        setAutocorrect(element: HTMLElement, value: boolean) { (element as any).autocorrect = value },
+        getAutofocus(element: HTMLElement) { return element.autofocus },
+        setAutofocus(element: HTMLElement, value: boolean) { element.autofocus = value },
         getClassName(element: HTMLElement) { return element.className },
         setClassName(element: HTMLElement, className: string) { element.className = className },
+        childElementCount(element: HTMLElement) { return element.childElementCount },
         clientHeight(element: HTMLElement) { return element.clientHeight },
         clientLeft(element: HTMLElement) { return element.clientLeft },
         clientTop(element: HTMLElement) { return element.clientTop },
         clientWidth(element: HTMLElement) { return element.clientWidth },
+        // Chromium-only; 1 is the value every other engine behaves as if it had.
+        currentCSSZoom(element: HTMLElement) { return (element as any).currentCSSZoom ?? 1 },
+        getDraggable(element: HTMLElement) { return element.draggable },
+        setDraggable(element: HTMLElement, value: boolean) { element.draggable = value },
+        getElementTiming(element: HTMLElement) { return (element as any).elementTiming ?? element.getAttribute('elementtiming') },
+        setElementTiming(element: HTMLElement, value: string) { element.setAttribute('elementtiming', value) },
         getId(element: HTMLElement) { return element.id },
         setId(element: HTMLElement, id: string) { element.id = id },
         getInnerHTML(element: HTMLElement) { return element.innerHTML },
         setInnerHTML(element: HTMLElement, innerHTML: string) { element.innerHTML = innerHTML },
+        getLang(element: HTMLElement) { return element.lang },
+        setLang(element: HTMLElement, value: string) { element.lang = value },
+        localName(element: HTMLElement) { return element.localName },
+        namespaceURI(element: HTMLElement) { return element.namespaceURI },
+        getNonce(element: HTMLElement) { return element.nonce ?? null },
+        setNonce(element: HTMLElement, value: string) { element.nonce = value },
+        offsetParentTagName(element: HTMLElement) { return element.offsetParent?.tagName ?? null },
         getOuterHTML(element: HTMLElement) { return element.outerHTML },
         setOuterHTML(element: HTMLElement, outerHTML: string) { element.outerHTML = outerHTML },
+        getOuterText(element: HTMLElement) { return element.outerText },
+        setOuterText(element: HTMLElement, value: string) { element.outerText = value },
+        getPart(element: HTMLElement) { return Array.from(element.part) },
+        setPart(element: HTMLElement, value: string) { element.setAttribute('part', value) },
+        getPopover(element: HTMLElement) { return element.popover ?? null },
+        setPopover(element: HTMLElement, value: string) { element.popover = value },
+        prefix(element: HTMLElement) { return element.prefix },
         scrollHeight(element: HTMLElement) { return element.scrollHeight },
         scrollLeft(element: HTMLElement) { return element.scrollLeft },
+        setScrollLeft(element: HTMLElement, value: number) { element.scrollLeft = value },
+        // Firefox-only, and its definition everywhere else is the difference of the two box widths.
+        scrollLeftMax(element: HTMLElement) { return (element as any).scrollLeftMax ?? (element.scrollWidth - element.clientWidth) },
         scrollTop(element: HTMLElement) { return element.scrollTop },
+        setScrollTop(element: HTMLElement, value: number) { element.scrollTop = value },
+        scrollTopMax(element: HTMLElement) { return (element as any).scrollTopMax ?? (element.scrollHeight - element.clientHeight) },
         scrollWidth(element: HTMLElement) { return element.scrollWidth },
+        getSlot(element: HTMLElement) { return element.slot },
+        setSlot(element: HTMLElement, value: string) { element.slot = value },
+        getSpellcheck(element: HTMLElement) { return element.spellcheck },
+        setSpellcheck(element: HTMLElement, value: boolean) { element.spellcheck = value },
+        getStyleProperty(element: HTMLElement, name: string) { return element.style.getPropertyValue(name) },
+        setStyleProperty(element: HTMLElement, name: string, value: string, priority?: string) { element.style.setProperty(name, value, priority ?? undefined) },
+        removeStyleProperty(element: HTMLElement, name: string) { return element.style.removeProperty(name) },
+        getStyleText(element: HTMLElement) { return element.style.cssText },
+        setStyleText(element: HTMLElement, value: string) { element.style.cssText = value },
         tagName(element: HTMLElement) { return element.tagName },
+        getTitle(element: HTMLElement) { return element.title },
+        setTitle(element: HTMLElement, value: string) { element.title = value },
+        getTranslate(element: HTMLElement) { return element.translate },
+        setTranslate(element: HTMLElement, value: boolean) { element.translate = value },
+        getVirtualKeyboardPolicy(element: HTMLElement) { return (element as any).virtualKeyboardPolicy ?? null },
+        setVirtualKeyboardPolicy(element: HTMLElement, value: string) { (element as any).virtualKeyboardPolicy = value },
+        getWritingSuggestions(element: HTMLElement) { return (element as any).writingSuggestions ?? null },
+        setWritingSuggestions(element: HTMLElement, value: string) { (element as any).writingSuggestions = value },
         getContentEditable(element: HTMLElement) { return element.contentEditable },
         setContentEditable(element: HTMLElement, value: string) { return element.contentEditable = value },
         isContentEditable(element: HTMLElement) { return element.isContentEditable },
@@ -95,6 +186,57 @@ var BitButil = (window as any).BitButil = (window as any).BitButil || {};
         element.scrollIntoView(alignToTop ?? options);
     }
 
+    // checkVisibility shipped later than the rest of this module. Where it is missing, the two
+    // conditions it started life as - a laid-out box, and no visibility:hidden above it - are what
+    // a caller is asking about, so answer those rather than reporting a visible element invisible.
+    function checkVisibility(element: HTMLElement, options?: any) {
+        const check = (element as any).checkVisibility;
+        if (typeof check === 'function') return options ? check.call(element, options) : check.call(element);
+
+        return element.getClientRects().length > 0 && getComputedStyle(element).visibility !== 'hidden';
+    }
+
+    function getHTML(element: HTMLElement, options?: any) {
+        const get = (element as any).getHTML;
+        return typeof get === 'function' ? get.call(element, options ?? undefined) : element.innerHTML;
+    }
+
+    // setHTML sanitizes; setHTMLUnsafe does not. Falling back from the sanitizing one to innerHTML
+    // would turn a safe call into an unsafe one silently, so it reports the gap instead.
+    function setHTML(element: HTMLElement, html: string, options?: any) {
+        const set = (element as any).setHTML;
+        if (typeof set !== 'function') throw new Error('Element.setHTML is not supported by this browser.');
+
+        set.call(element, html, options ?? undefined);
+    }
+
+    function setHTMLUnsafe(element: HTMLElement, html: string) {
+        const set = (element as any).setHTMLUnsafe;
+        if (typeof set === 'function') set.call(element, html);
+        else element.innerHTML = html;
+    }
+
+    function showPopover(element: HTMLElement) {
+        if (typeof element.showPopover === 'function') element.showPopover();
+    }
+
+    function hidePopover(element: HTMLElement) {
+        if (typeof element.hidePopover === 'function') element.hidePopover();
+    }
+
+    function togglePopover(element: HTMLElement, force?: boolean) {
+        if (typeof element.togglePopover !== 'function') return false;
+
+        return element.togglePopover(force ?? undefined);
+    }
+
+    // Experimental and Chromium-only: a no-op elsewhere rather than a throw, because an
+    // announcement that does not happen is not a failure of the page that asked for it.
+    function ariaNotify(element: HTMLElement, message: string, options?: any) {
+        const notify = (element as any).ariaNotify;
+        if (typeof notify === 'function') notify.call(element, message, options ?? undefined);
+    }
+
     function subscribeEvent(element: HTMLElement, elementId: string, eventName: string, methodName: string,
         dotNetRef: any, listenerId: string, argsMembers: string[], options: AddEventListenerOptions | boolean,
         preventDefault: boolean, stopPropagation: boolean) {
@@ -120,4 +262,4 @@ var BitButil = (window as any).BitButil = (window as any).BitButil || {};
             entry.element.removeEventListener(entry.eventName, entry.handler, entry.options);
         } catch { /* element may already be detached */ }
     }
-}(BitButil));
\ No newline at end of file
+}(BitButil));
diff --git a/src/Butil/README.md b/src/Butil/README.md
index 3fe7de0f711..d4b2972aaa3 100644
--- a/src/Butil/README.md
+++ b/src/Butil/README.md
@@ -97,7 +97,7 @@ registering everything.
 
 | Service | What it wraps |
 | --- | --- |
-| `ElementReference` extensions | Attributes, scrolling, fullscreen, pointer capture, per-element events |
+| `ElementReference` extensions | Attributes (namespaced too), ARIA and `role`, classes, `data-*`, inline style, content insertion, scrolling, layout metrics, fullscreen, popovers, pointer capture, per-element events |
 | Animation extensions | The Web Animations API on any element |
 | `Keyboard` | App-wide keyboard shortcuts with modifier support |
 | `IntersectionObserver` | Element visibility inside the viewport or a scroll container |
diff --git a/src/Butil/Samples/Bit.Butil.Samples.Core/Pages/E2EPage.razor b/src/Butil/Samples/Bit.Butil.Samples.Core/Pages/E2EPage.razor
index c37d5dab3ec..695d12e42b8 100644
--- a/src/Butil/Samples/Bit.Butil.Samples.Core/Pages/E2EPage.razor
+++ b/src/Butil/Samples/Bit.Butil.Samples.Core/Pages/E2EPage.razor
@@ -1,4 +1,4 @@
-@page "/e2e"
+@page "/e2e"
 @inject Bit.Butil.LocalStorage localStorage
 @inject Bit.Butil.SessionStorage sessionStorage
 @inject Bit.Butil.Cookie cookie
@@ -81,6 +81,37 @@
     <button id="window-matchmedia" @onclick="WindowMatchMedia">matchMedia</button>
 </section>
 
+<section>
+    <h3>Element</h3>
+    @* The element extensions run against elements this harness renders once and never re-renders,
+       so a Blazor diff cannot undo what the interop writes between the click and the assertion. *@
+    <div @ref="_elementBox" id="el-box" class="el-target" data-demo="butil" style="height:6rem;overflow:auto;">
+        <p>Element extension target.</p>
+        <ul><li>one</li><li>two</li><li>three</li></ul>
+        <div style="height:20rem;">scroll space</div>
+    </div>
+    <div @ref="_elementHidden" id="el-hidden" style="display:none;">hidden</div>
+    <div @ref="_elementContent" id="el-content-box">original</div>
+    <div @ref="_elementPopover" id="el-popover-box">popover body</div>
+    <button @ref="_elementButton" id="el-synthetic" @onclick="() => _syntheticClicks++">synthetic target</button>
+    <input @ref="_elementInput" id="el-input" />
+    <button id="el-click" @onclick="ElementClick">Click</button>
+    <button id="el-focus" @onclick="ElementFocus">Focus + Matches(:focus)</button>
+    <button id="el-visibility" @onclick="ElementVisibility">CheckVisibility</button>
+    <button id="el-closest" @onclick="ElementClosest">Closest</button>
+    <button id="el-classes" @onclick="ElementClasses">classList</button>
+    <button id="el-data" @onclick="ElementData">dataset</button>
+    <button id="el-style" @onclick="ElementStyle">inline style</button>
+    <button id="el-content" @onclick="ElementContent">content insertion</button>
+    <button id="el-aria" @onclick="ElementAria">ARIA + role</button>
+    <button id="el-ns" @onclick="ElementNamespacedAttributes">namespaced attributes</button>
+    <button id="el-query" @onclick="ElementQueries">query helpers</button>
+    <button id="el-scroll" @onclick="ElementScrollOffsets">scroll offsets</button>
+    <button id="el-rects" @onclick="ElementClientRects">getClientRects</button>
+    <button id="el-popover" @onclick="ElementPopoverState">popover</button>
+    <button id="el-identity" @onclick="ElementIdentity">identity + tree facts</button>
+</section>
+
 @code {
     private const string TestCookieName = "butil_e2e";
     private const string TestCookieValue = "v=1; b=hello world & again";
@@ -88,6 +119,17 @@
 
     private void Set(string value) { _status = value; StateHasChanged(); }
 
+    private ElementReference _elementBox;
+    private ElementReference _elementContent;
+    private ElementReference _elementHidden;
+    private ElementReference _elementPopover;
+    private ElementReference _elementButton;
+    private ElementReference _elementInput;
+    private int _syntheticClicks;
+
+    /// <summary>The namespace SVG's href lives in - the usual reason for the *NS attribute overloads.</summary>
+    private const string XlinkNamespace = "http://www.w3.org/1999/xlink";
+
     // ─── Storage ────────────────────────────────────────────────────────────────
     private async Task LocalStorageSet()
     {
@@ -292,6 +334,132 @@
         Set($"history:scroll:{value}");
     }
 
+    // ─── Element extensions ─────────────────────────────────────────────────────
+    private async Task ElementClick()
+    {
+        var before = _syntheticClicks;
+        await _elementButton.Click();
+        // The button's own @onclick ran, which is the whole point: a synthetic click is a real
+        // click as far as the page is concerned, gesture-gated APIs aside.
+        Set($"el:click:{_syntheticClicks - before}");
+    }
+    private async Task ElementFocus()
+    {
+        await _elementInput.Focus(new FocusOptions { PreventScroll = true });
+        var focused = await _elementInput.Matches(":focus");
+        Set($"el:focus:{focused}");
+    }
+    private async Task ElementVisibility()
+    {
+        var options = new CheckVisibilityOptions { OpacityProperty = true, VisibilityProperty = true };
+        var shown = await _elementBox.CheckVisibility(options);
+        var hidden = await _elementHidden.CheckVisibility(options);
+        Set($"el:vis:{shown}/{hidden}");
+    }
+    private async Task ElementClosest()
+    {
+        var inSection = await _elementBox.Closest("section");
+        var inTable = await _elementBox.Closest("table");
+        Set($"el:closest:{inSection}/{inTable}");
+    }
+    private async Task ElementClasses()
+    {
+        await _elementBox.AddClass("alpha", "beta");
+        var has = await _elementBox.ContainsClass("alpha");
+        var swapped = await _elementBox.ReplaceClass("beta", "gamma");
+        var toggled = await _elementBox.ToggleClass("alpha");
+        var list = await _elementBox.GetClassList();
+        await _elementBox.RemoveClass("gamma");
+        Set($"el:class:{has}/{swapped}/{toggled}/{list.Length}");
+    }
+    private async Task ElementData()
+    {
+        await _elementBox.SetData("userId", "42");
+        var value = await _elementBox.GetData("userId");
+        var names = await _elementBox.GetDataNames();
+        await _elementBox.RemoveData("userId");
+        var afterRemoval = await _elementBox.GetData("userId");
+        Set($"el:data:{value}/{names.Contains("userId")}/{string.IsNullOrEmpty(afterRemoval)}");
+    }
+    private async Task ElementStyle()
+    {
+        await _elementBox.SetStyleProperty("--butil-accent", "#123456");
+        var custom = await _elementBox.GetStyleProperty("--butil-accent");
+        await _elementBox.SetStyleProperty("outline-width", "3px", important: true);
+        var removed = await _elementBox.RemoveStyleProperty("outline-width");
+        Set($"el:style:{custom.Trim()}/{removed}");
+    }
+    private async Task ElementContent()
+    {
+        await _elementContent.ReplaceChildren("base");
+        await _elementContent.Append("+append");
+        await _elementContent.Prepend("prepend+");
+        await _elementContent.InsertAdjacentText(InsertPosition.BeforeEnd, "!");
+        var html = await _elementContent.GetHtml();
+        Set($"el:content:{html}");
+    }
+    private async Task ElementAria()
+    {
+        await _elementBox.SetRole("region");
+        await _elementBox.SetAriaLabel("butil-e2e");
+        await _elementBox.SetAriaExpanded("true");
+        var role = await _elementBox.GetRole();
+        var label = await _elementBox.GetAriaLabel();
+        var expanded = await _elementBox.GetAriaExpanded();
+        Set($"el:aria:{role}/{label}/{expanded}");
+    }
+    private async Task ElementNamespacedAttributes()
+    {
+        await _elementBox.SetAttributeNS(XlinkNamespace, "xlink:href", "#star");
+        var value = await _elementBox.GetAttributeNS(XlinkNamespace, "href");
+        var present = await _elementBox.HasAttributeNS(XlinkNamespace, "href");
+        await _elementBox.RemoveAttributeNS(XlinkNamespace, "href");
+        var afterRemoval = await _elementBox.HasAttributeNS(XlinkNamespace, "href");
+        Set($"el:ns:{value}/{present}/{afterRemoval}");
+    }
+    private async Task ElementQueries()
+    {
+        var matches = await _elementBox.QuerySelectorMatches("li");
+        var count = await _elementBox.QuerySelectorAllCount("li");
+        var none = await _elementBox.QuerySelectorAllCount("table");
+        Set($"el:query:{matches}/{count}/{none}");
+    }
+    private async Task ElementScrollOffsets()
+    {
+        await _elementBox.SetScrollTop(60);
+        var top = await _elementBox.GetScrollTop();
+        var max = await _elementBox.GetScrollTopMax();
+        await _elementBox.SetScrollTop(0);
+        Set($"el:scroll:{top > 0}/{max > 0}");
+    }
+    private async Task ElementClientRects()
+    {
+        var rects = await _elementBox.GetClientRects();
+        Set($"el:rects:{rects.Length > 0}/{rects.Length > 0 && rects[0].Width > 0}");
+    }
+    private async Task ElementPopoverState()
+    {
+        await _elementPopover.SetPopover(ElementPopover.Manual);
+        var kind = await _elementPopover.GetPopover();
+        var showing = await _elementPopover.TogglePopover();
+        await _elementPopover.HidePopover();
+        await _elementPopover.SetPopover(ElementPopover.NotSet);
+        Set($"el:popover:{kind}/{showing}");
+    }
+    private async Task ElementIdentity()
+    {
+        await _elementBox.SetTitle("butil-e2e-title");
+        await _elementBox.SetLang("fa-IR");
+        await _elementBox.SetDraggable(true);
+        var title = await _elementBox.GetTitle();
+        var lang = await _elementBox.GetLang();
+        var draggable = await _elementBox.GetDraggable();
+        var localName = await _elementBox.GetLocalName();
+        var children = await _elementBox.GetChildElementCount();
+        var zoom = await _elementBox.GetCurrentCssZoom();
+        Set($"el:identity:{title}/{lang}/{draggable}/{localName}/{children}/{zoom > 0}");
+    }
+
     public class SamplePayload(int number, string label)
     {
         public int Number { get; set; } = number;
diff --git a/src/Butil/tests/Bit.Butil.Tests.E2E/ElementTests.cs b/src/Butil/tests/Bit.Butil.Tests.E2E/ElementTests.cs
new file mode 100644
index 00000000000..c2e201e21a6
--- /dev/null
+++ b/src/Butil/tests/Bit.Butil.Tests.E2E/ElementTests.cs
@@ -0,0 +1,118 @@
+using Bit.Butil.Tests.E2E.Infrastructure;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.Butil.Tests.E2E;
+
+/// <summary>
+/// The <see cref="Microsoft.AspNetCore.Components.ElementReference"/> extensions, driven against a
+/// real element in a real engine.
+/// </summary>
+/// <remarks>
+/// These wrappers are thin, which is exactly why they need a browser: nothing but a live DOM can
+/// tell a correctly spelled property from one the engine ignores, and a misspelling on either side
+/// of the interop boundary compiles cleanly and reads back as an empty string. Every case below
+/// therefore round-trips - it writes through the wrapper and reads back through another one, or
+/// through a state the DOM itself changes.
+/// </remarks>
+[TestClass]
+public class ElementTests : ButilPageTest
+{
+    [TestMethod]
+    public async Task Click_Runs_The_Elements_Own_Handler()
+    {
+        // The harness counts the Blazor @onclick, so this passing means the synthetic click really
+        // dispatched rather than merely not throwing.
+        await ClickAndExpectAsync("el-click", "el:click:1");
+    }
+
+    [TestMethod]
+    public async Task Focus_Moves_Keyboard_Focus_To_The_Element()
+    {
+        // Read back through Matches(":focus") rather than through anything Butil wrote itself.
+        await ClickAndExpectAsync("el-focus", "el:focus:True");
+    }
+
+    [TestMethod]
+    public async Task CheckVisibility_Separates_A_Rendered_Element_From_A_Display_None_One()
+    {
+        await ClickAndExpectAsync("el-visibility", "el:vis:True/False");
+    }
+
+    [TestMethod]
+    public async Task Closest_Reports_Matching_And_Non_Matching_Ancestors()
+    {
+        await ClickAndExpectAsync("el-closest", "el:closest:True/False");
+    }
+
+    [TestMethod]
+    public async Task ClassList_Add_Contains_Replace_Toggle_And_Remove_Round_Trip()
+    {
+        // The element starts with one class; add two, replace one, toggle one back off, so what
+        // survives is the original plus the replacement.
+        await ClickAndExpectAsync("el-classes", "el:class:True/True/False/2");
+    }
+
+    [TestMethod]
+    public async Task Dataset_Set_Get_Names_And_Remove_Round_Trip()
+    {
+        await ClickAndExpectAsync("el-data", "el:data:42/True/True");
+    }
+
+    [TestMethod]
+    public async Task Inline_Style_Handles_Custom_Properties_And_Removal()
+    {
+        // A custom property proves the write goes through setProperty rather than through a
+        // camel-cased CSSStyleDeclaration member, which cannot express "--butil-accent" at all.
+        await ClickAndExpectAsync("el-style", "el:style:#123456/3px");
+    }
+
+    [TestMethod]
+    public async Task Content_Insertion_Places_Text_In_The_Right_Order()
+    {
+        await ClickAndExpectAsync("el-content", "el:content:prepend+base+append!");
+    }
+
+    [TestMethod]
+    public async Task Aria_Properties_And_Role_Round_Trip()
+    {
+        // aria-expanded reads back as the string "true": these are enumerated attributes, and an
+        // absent one does not mean the same thing to a screen reader as "false".
+        await ClickAndExpectAsync("el-aria", "el:aria:region/butil-e2e/true");
+    }
+
+    [TestMethod]
+    public async Task Namespaced_Attributes_Round_Trip_And_Remove()
+    {
+        await ClickAndExpectAsync("el-ns", "el:ns:#star/True/False");
+    }
+
+    [TestMethod]
+    public async Task Query_Helpers_Report_Matches_And_Counts()
+    {
+        await ClickAndExpectAsync("el-query", "el:query:True/3/0");
+    }
+
+    [TestMethod]
+    public async Task Scroll_Offsets_Can_Be_Written_And_Their_Maximum_Read()
+    {
+        await ClickAndExpectAsync("el-scroll", "el:scroll:True/True");
+    }
+
+    [TestMethod]
+    public async Task GetClientRects_Reports_At_Least_One_Laid_Out_Box()
+    {
+        await ClickAndExpectAsync("el-rects", "el:rects:True/True");
+    }
+
+    [TestMethod]
+    public async Task Popover_Kind_Round_Trips_And_Toggle_Shows_It()
+    {
+        await ClickAndExpectAsync("el-popover", "el:popover:Manual/True");
+    }
+
+    [TestMethod]
+    public async Task Identity_Hints_And_Tree_Facts_Read_Back()
+    {
+        await ClickAndExpectAsync("el-identity", "el:identity:butil-e2e-title/fa-IR/True/div/3/True");
+    }
+}
diff --git a/src/Butil/tests/Bit.Butil.Tests.Mcp/ToolBehaviourTests.cs b/src/Butil/tests/Bit.Butil.Tests.Mcp/ToolBehaviourTests.cs
index 4225cff47df..f1d5d88a2bf 100644
--- a/src/Butil/tests/Bit.Butil.Tests.Mcp/ToolBehaviourTests.cs
+++ b/src/Butil/tests/Bit.Butil.Tests.Mcp/ToolBehaviourTests.cs
@@ -99,7 +99,7 @@ public async Task No_type_reference_exceeds_the_documented_cap()
         // types are enormous - the extension classes are sixty members with their remarks - and one
         // of them uncapped was 30,000 characters. The members are the answer, so the remarks are
         // what goes, and the reference says where they went.
-        foreach (var typeName in new[] { "ElementReferenceExtensions", "Window", "ButilKeyCodes", "Clipboard" })
+        foreach (var typeName in new[] { "ElementReferenceExtensions", "ElementReferenceAriaExtensions", "Window", "ButilKeyCodes", "Clipboard" })
         {
             var result = await CallStructuredAsync<ApiDetailsResult>("GetButilApiDetails", new { typeName });
             var text = Text(await CallRawAsync("GetButilApiDetails", new { typeName }));
@@ -125,6 +125,42 @@ public async Task No_type_reference_exceeds_the_documented_cap()
         }
     }
 
+    [TestMethod]
+    public async Task The_element_page_reaches_every_extension_class_its_members_live_on()
+    {
+        // The ElementReference surface is spread over several static classes rather than one, and
+        // nothing about a class makes an agent look for it: a member is only findable through the
+        // page that names the class it is on. A class added to the library and not to the docs nav
+        // is a member the tools cannot answer about, which no consistency check can notice - the
+        // page and the reflected assembly would each still be perfectly coherent on their own.
+        var expected = new Dictionary<string, string>(StringComparer.Ordinal)
+        {
+            ["ElementReferenceExtensions"] = "Click",
+            ["ElementReferenceDomExtensions"] = "InsertAdjacentHtml",
+            ["ElementReferenceStateExtensions"] = "GetTitle",
+            ["ElementReferenceAriaExtensions"] = "SetAriaLabel",
+            ["ElementReferenceEventExtensions"] = "SubscribeEvent",
+            ["ElementReferenceMediaExtensions"] = "Play",
+        };
+
+        var page = (await DocsIndexAsync()).Single(row => row.Slug == "element");
+
+        using (Assert.Scope())
+        {
+            Assert.IsEmpty(expected.Keys.Except(page.Services, StringComparer.Ordinal),
+                "The Element docs page does not name every class its members live on.");
+
+            foreach (var (typeName, member) in expected)
+            {
+                var details = (await CallStructuredAsync<ApiDetailsResult>("GetButilApiDetails", new { typeName })).Details;
+
+                Assert.IsNotNull(details, $"{typeName} has no reference.");
+                Assert.Contains(member, details!.Members.Select(m => m.Name),
+                    $"{typeName} answers without {member}.");
+            }
+        }
+    }
+
     [TestMethod]
     public async Task Api_details_carry_the_signatures_and_the_shipped_documentation()
     {