From 0c30a3e2af62e01fc9221dd1c97b5e73bc4e7c73 Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <a.n.karpovich@gmail.com>
Date: Wed, 2 Feb 2022 14:24:10 +0100
Subject: [PATCH] web: add typealias AttrsBuilder referencing new
 AttrsScopeBuilder (#1778)

This mitigates possible breaking API changes

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
---
 .../compose/web/attributes/AttrsScope.kt      |  43 +++---
 .../compose/web/elements/Elements.kt          | 131 +++++++++---------
 .../org/jetbrains/compose/web/svg/svg.kt      |  78 +++++------
 3 files changed, 129 insertions(+), 123 deletions(-)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt
index b6205c8fbc..e4f35bcde2 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt
@@ -8,6 +8,15 @@ import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 
+@Deprecated(
+    message = "Renamed to AttrsScopeBuilder",
+    replaceWith = ReplaceWith(
+        expression = "AttrsScopeBuilder<T>",
+        imports = arrayOf("org.jetbrains.compose.web.attributes.AttrsScopeBuilder")
+    )
+)
+typealias AttrsBuilder<T> = AttrsScopeBuilder<T>
+
 /**
  * [AttrsScope] is a class that is used (as a builder context, that is as AttrsBuilder<T>.() -> Unit)
  * in all DOM-element creating API calls. It's used for adding attributes to the element created,
@@ -23,12 +32,12 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
     val attributesMap: Map<String, String>
     @ComposeWebInternalApi
     val styleScope: StyleScope
-    
+
     @ComposeWebInternalApi
     val propertyUpdates: List<Pair<(Element, Any) -> Unit, Any>>
     @ComposeWebInternalApi
     var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)?
-    
+
     /**
      * [style] add inline CSS-style properties to the element via [StyleScope] context
      *
@@ -42,7 +51,7 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
     fun style(builder: StyleScope.() -> Unit) {
         styleScope.apply(builder)
     }
-    
+
     /**
      * [classes] adds all values passed as params to the element's classList.
      *  This method acts cumulatively, that is, each call adds values to the classList.
@@ -50,7 +59,7 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
      *  since if your classList is, for instance, condition-dependent, you can always just call this method conditionally.
      */
     fun classes(vararg classes: String)= prop(setClassList, classes)
-    
+
     fun id(value: String) = attr(ID, value)
     fun hidden() = attr(HIDDEN, true.toString())
     fun title(value: String) = attr(TITLE, value)
@@ -60,17 +69,17 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
     fun lang(value: String) = attr(LANG, value)
     fun tabIndex(value: Int) = attr(TAB_INDEX, value.toString())
     fun spellCheck(value: Boolean) = attr(SPELLCHECK, value.toString())
-    
+
     /**
      * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
      */
     fun inputMode(value: String) = attr("inputmode", value)
-    
+
     /**
      * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
      */
     fun inputMode(value: InputMode) = attr("inputmode", value.str)
-    
+
     /**
      * [ref] can be used to retrieve a reference to a html element.
      * The lambda that `ref` takes in is not Composable. It will be called only once when an element added into a composition.
@@ -79,7 +88,7 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
      * Under the hood, `ref` uses [DisposableEffect](https://developer.android.com/jetpack/compose/side-effects#disposableeffect)
      */
     fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult)
-    
+
     /**
      * [attr] adds arbitrary attribute to the Element.
      * If it called twice for the same attribute name, attribute value will be resolved to the last call.
@@ -90,7 +99,7 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
      * For boolean attributes cast boolean value to String and pass it as value.
      */
     fun attr(attr: String, value: String): AttrsScope<TElement>
-    
+
     /**
      * [prop] allows setting values of element's properties which can't be set by ussing [attr].
      * [update] is a lambda with two parameters: `element` and `value`. `element` is a reference to a native element.
@@ -110,9 +119,10 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
      */
     @Suppress("UNCHECKED_CAST")
     fun <E : HTMLElement, V> prop(update: (E, V) -> Unit, value: V)
-    
+
+    @ComposeWebInternalApi
     fun copyFrom(attrsScope: AttrsScope<TElement>)
-    
+
     companion object {
         const val CLASS = "class"
         const val ID = "id"
@@ -130,10 +140,10 @@ interface AttrsScope<TElement : Element>: EventsListenerScope {
 open class AttrsScopeBuilder<TElement : Element> : AttrsScope<TElement>, EventsListenerScope by EventsListenerScopeBuilder() {
     override val attributesMap = mutableMapOf<String, String>()
     override val styleScope: StyleScope = StyleScopeBuilder()
-    
+
     override val propertyUpdates = mutableListOf<Pair<(Element, Any) -> Unit, Any>>()
     override var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)? = null
-    
+
     /**
      * [ref] can be used to retrieve a reference to a html element.
      * The lambda that `ref` takes in is not Composable. It will be called only once when an element added into a composition.
@@ -184,14 +194,15 @@ open class AttrsScopeBuilder<TElement : Element> : AttrsScope<TElement>, EventsL
     internal fun collect(): Map<String, String> {
         return attributesMap
     }
-    
+
+    @ComposeWebInternalApi
     override fun copyFrom(attrsScope: AttrsScope<TElement>) {
         refEffect = attrsScope.refEffect
         styleScope.copyFrom(attrsScope.styleScope)
-        
+
         attributesMap.putAll(attrsScope.attributesMap)
         propertyUpdates.addAll(attrsScope.propertyUpdates)
-        
+
         copyListenersFrom(attrsScope)
     }
 }
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
index a48b9712c4..50061b09a3 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
@@ -60,12 +60,7 @@ import org.w3c.dom.HTMLVideoElement
 import org.w3c.dom.Text
 import org.w3c.dom.css.CSSStyleSheet
 
-@Deprecated(
-    message = "Renamed to AttrsBuilder<T>",
-    replaceWith = ReplaceWith("AttrsBuilder<T>", "org.jetbrains.compose.web.dom.AttrsBuilder")
-)
-typealias AttrBuilderContext<T> = AttrsBuilder<T>
-typealias AttrsBuilder<T> = AttrsScope<T>.() -> Unit
+typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
 typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit
 
 private open class ElementBuilderImplementation<TElement : Element>(private val tagName: String) : ElementBuilder<TElement> {
@@ -168,7 +163,7 @@ fun interface ElementBuilder<TElement : Element> {
 
 @Composable
 fun Address(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -180,7 +175,7 @@ fun Address(
 
 @Composable
 fun Article(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -192,7 +187,7 @@ fun Article(
 
 @Composable
 fun Aside(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -204,7 +199,7 @@ fun Aside(
 
 @Composable
 fun Header(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -216,7 +211,7 @@ fun Header(
 
 @Composable
 fun Area(
-    attrs: AttrsBuilder<HTMLAreaElement>? = null,
+    attrs: AttrBuilderContext<HTMLAreaElement>? = null,
     content: ContentBuilder<HTMLAreaElement>? = null
 ) {
     TagElement(
@@ -228,7 +223,7 @@ fun Area(
 
 @Composable
 fun Audio(
-    attrs: AttrsBuilder<HTMLAudioElement>? = null,
+    attrs: AttrBuilderContext<HTMLAudioElement>? = null,
     content: ContentBuilder<HTMLAudioElement>? = null
 ) {
     TagElement(
@@ -240,7 +235,7 @@ fun Audio(
 
 @Composable
 fun HTMLMap(
-    attrs: AttrsBuilder<HTMLMapElement>? = null,
+    attrs: AttrBuilderContext<HTMLMapElement>? = null,
     content: ContentBuilder<HTMLMapElement>? = null
 ) {
     TagElement(
@@ -252,7 +247,7 @@ fun HTMLMap(
 
 @Composable
 fun Track(
-    attrs: AttrsBuilder<HTMLTrackElement>? = null,
+    attrs: AttrBuilderContext<HTMLTrackElement>? = null,
     content: ContentBuilder<HTMLTrackElement>? = null
 ) {
     TagElement(
@@ -264,7 +259,7 @@ fun Track(
 
 @Composable
 fun Video(
-    attrs: AttrsBuilder<HTMLVideoElement>? = null,
+    attrs: AttrBuilderContext<HTMLVideoElement>? = null,
     content: ContentBuilder<HTMLVideoElement>? = null
 ) {
     TagElement(
@@ -276,7 +271,7 @@ fun Video(
 
 @Composable
 fun Datalist(
-    attrs: AttrsBuilder<HTMLDataListElement>? = null,
+    attrs: AttrBuilderContext<HTMLDataListElement>? = null,
     content: ContentBuilder<HTMLDataListElement>? = null
 ) {
     TagElement(
@@ -288,7 +283,7 @@ fun Datalist(
 
 @Composable
 fun Fieldset(
-    attrs: AttrsBuilder<HTMLFieldSetElement>? = null,
+    attrs: AttrBuilderContext<HTMLFieldSetElement>? = null,
     content: ContentBuilder<HTMLFieldSetElement>? = null
 ) {
     TagElement(
@@ -300,7 +295,7 @@ fun Fieldset(
 
 @Composable
 fun Legend(
-    attrs: AttrsBuilder<HTMLLegendElement>? = null,
+    attrs: AttrBuilderContext<HTMLLegendElement>? = null,
     content: ContentBuilder<HTMLLegendElement>? = null
 ) {
     TagElement(
@@ -312,7 +307,7 @@ fun Legend(
 
 @Composable
 fun Meter(
-    attrs: AttrsBuilder<HTMLMeterElement>? = null,
+    attrs: AttrBuilderContext<HTMLMeterElement>? = null,
     content: ContentBuilder<HTMLMeterElement>? = null
 ) {
     TagElement(
@@ -324,7 +319,7 @@ fun Meter(
 
 @Composable
 fun Output(
-    attrs: AttrsBuilder<HTMLOutputElement>? = null,
+    attrs: AttrBuilderContext<HTMLOutputElement>? = null,
     content: ContentBuilder<HTMLOutputElement>? = null
 ) {
     TagElement(
@@ -336,7 +331,7 @@ fun Output(
 
 @Composable
 fun Progress(
-    attrs: AttrsBuilder<HTMLProgressElement>? = null,
+    attrs: AttrBuilderContext<HTMLProgressElement>? = null,
     content: ContentBuilder<HTMLProgressElement>? = null
 ) {
     TagElement(
@@ -348,7 +343,7 @@ fun Progress(
 
 @Composable
 fun Embed(
-    attrs: AttrsBuilder<HTMLEmbedElement>? = null,
+    attrs: AttrBuilderContext<HTMLEmbedElement>? = null,
     content: ContentBuilder<HTMLEmbedElement>? = null
 ) {
     TagElement(
@@ -360,7 +355,7 @@ fun Embed(
 
 @Composable
 fun Iframe(
-    attrs: AttrsBuilder<HTMLIFrameElement>? = null,
+    attrs: AttrBuilderContext<HTMLIFrameElement>? = null,
     content: ContentBuilder<HTMLIFrameElement>? = null
 ) {
     TagElement(
@@ -372,7 +367,7 @@ fun Iframe(
 
 @Composable
 fun Object(
-    attrs: AttrsBuilder<HTMLObjectElement>? = null,
+    attrs: AttrBuilderContext<HTMLObjectElement>? = null,
     content: ContentBuilder<HTMLObjectElement>? = null
 ) {
     TagElement(
@@ -384,7 +379,7 @@ fun Object(
 
 @Composable
 fun Param(
-    attrs: AttrsBuilder<HTMLParamElement>? = null,
+    attrs: AttrBuilderContext<HTMLParamElement>? = null,
     content: ContentBuilder<HTMLParamElement>? = null
 ) {
     TagElement(
@@ -396,7 +391,7 @@ fun Param(
 
 @Composable
 fun Picture(
-    attrs: AttrsBuilder<HTMLPictureElement>? = null,
+    attrs: AttrBuilderContext<HTMLPictureElement>? = null,
     content: ContentBuilder<HTMLPictureElement>? = null
 ) {
     TagElement(
@@ -408,7 +403,7 @@ fun Picture(
 
 @Composable
 fun Source(
-    attrs: AttrsBuilder<HTMLSourceElement>? = null,
+    attrs: AttrBuilderContext<HTMLSourceElement>? = null,
     content: ContentBuilder<HTMLSourceElement>? = null
 ) {
     TagElement(
@@ -431,7 +426,7 @@ fun Text(value: String) {
 
 @Composable
 fun Div(
-    attrs: AttrsBuilder<HTMLDivElement>? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     content: ContentBuilder<HTMLDivElement>? = null
 ) {
     TagElement(
@@ -444,7 +439,7 @@ fun Div(
 @Composable
 fun A(
     href: String? = null,
-    attrs: AttrsBuilder<HTMLAnchorElement>? = null,
+    attrs: AttrBuilderContext<HTMLAnchorElement>? = null,
     content: ContentBuilder<HTMLAnchorElement>? = null
 ) {
     TagElement(
@@ -463,101 +458,101 @@ fun A(
 
 @Composable
 fun Button(
-    attrs: AttrsBuilder<HTMLButtonElement>? = null,
+    attrs: AttrBuilderContext<HTMLButtonElement>? = null,
     content: ContentBuilder<HTMLButtonElement>? = null
 ) = TagElement(elementBuilder = Button, applyAttrs = attrs, content = content)
 
 @Composable
 fun H1(
-    attrs: AttrsBuilder<HTMLHeadingElement>? = null,
+    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
     content: ContentBuilder<HTMLHeadingElement>? = null
 ) = TagElement(elementBuilder = H1, applyAttrs = attrs, content = content)
 
 @Composable
 fun H2(
-    attrs: AttrsBuilder<HTMLHeadingElement>? = null,
+    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
     content: ContentBuilder<HTMLHeadingElement>? = null
 ) = TagElement(elementBuilder = H2, applyAttrs = attrs, content = content)
 
 @Composable
 fun H3(
-    attrs: AttrsBuilder<HTMLHeadingElement>? = null,
+    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
     content: ContentBuilder<HTMLHeadingElement>? = null
 ) = TagElement(elementBuilder = H3, applyAttrs = attrs, content = content)
 
 @Composable
 fun H4(
-    attrs: AttrsBuilder<HTMLHeadingElement>? = null,
+    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
     content: ContentBuilder<HTMLHeadingElement>? = null
 ) = TagElement(elementBuilder = H4, applyAttrs = attrs, content = content)
 
 @Composable
 fun H5(
-    attrs: AttrsBuilder<HTMLHeadingElement>? = null,
+    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
     content: ContentBuilder<HTMLHeadingElement>? = null
 ) = TagElement(elementBuilder = H5, applyAttrs = attrs, content = content)
 
 @Composable
 fun H6(
-    attrs: AttrsBuilder<HTMLHeadingElement>? = null,
+    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
     content: ContentBuilder<HTMLHeadingElement>? = null
 ) = TagElement(elementBuilder = H6, applyAttrs = attrs, content = content)
 
 @Composable
 fun P(
-    attrs: AttrsBuilder<HTMLParagraphElement>? = null,
+    attrs: AttrBuilderContext<HTMLParagraphElement>? = null,
     content: ContentBuilder<HTMLParagraphElement>? = null
 ) = TagElement(elementBuilder = P, applyAttrs = attrs, content = content)
 
 @Composable
 fun Em(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) = TagElement(elementBuilder = Em, applyAttrs = attrs, content = content)
 
 @Composable
 fun I(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) = TagElement(elementBuilder = I, applyAttrs = attrs, content = content)
 
 @Composable
 fun B(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) = TagElement(elementBuilder = B, applyAttrs = attrs, content = content)
 
 @Composable
 fun Small(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) = TagElement(elementBuilder = Small, applyAttrs = attrs, content = content)
 
 @Composable
 fun Span(
-    attrs: AttrsBuilder<HTMLSpanElement>? = null,
+    attrs: AttrBuilderContext<HTMLSpanElement>? = null,
     content: ContentBuilder<HTMLSpanElement>? = null
 ) = TagElement(elementBuilder = Span, applyAttrs = attrs, content = content)
 
 @Composable
-fun Br(attrs: AttrsBuilder<HTMLBRElement>? = null) =
+fun Br(attrs: AttrBuilderContext<HTMLBRElement>? = null) =
     TagElement(elementBuilder = Br, applyAttrs = attrs, content = null)
 
 @Composable
 fun Ul(
-    attrs: AttrsBuilder<HTMLUListElement>? = null,
+    attrs: AttrBuilderContext<HTMLUListElement>? = null,
     content: ContentBuilder<HTMLUListElement>? = null
 ) = TagElement(elementBuilder = Ul, applyAttrs = attrs, content = content)
 
 @Composable
 fun Ol(
-    attrs: AttrsBuilder<HTMLOListElement>? = null,
+    attrs: AttrBuilderContext<HTMLOListElement>? = null,
     content: ContentBuilder<HTMLOListElement>? = null
 ) = TagElement(elementBuilder = Ol, applyAttrs = attrs, content = content)
 
 @Composable
 fun Li(
-    attrs: AttrsBuilder<HTMLLIElement>? = null,
+    attrs: AttrBuilderContext<HTMLLIElement>? = null,
     content: ContentBuilder<HTMLLIElement>? = null
 ) = TagElement(elementBuilder = Li, applyAttrs = attrs, content = content)
 
@@ -565,7 +560,7 @@ fun Li(
 fun Img(
     src: String,
     alt: String = "",
-    attrs: AttrsBuilder<HTMLImageElement>? = null
+    attrs: AttrBuilderContext<HTMLImageElement>? = null
 ) = TagElement(
     elementBuilder = Img,
     applyAttrs = {
@@ -580,7 +575,7 @@ fun Img(
 @Composable
 fun Form(
     action: String? = null,
-    attrs: AttrsBuilder<HTMLFormElement>? = null,
+    attrs: AttrBuilderContext<HTMLFormElement>? = null,
     content: ContentBuilder<HTMLFormElement>? = null
 ) = TagElement(
     elementBuilder = Form,
@@ -616,7 +611,7 @@ fun Select(
 @Composable
 fun Option(
     value: String,
-    attrs: AttrsBuilder<HTMLOptionElement>? = null,
+    attrs: AttrBuilderContext<HTMLOptionElement>? = null,
     content: ContentBuilder<HTMLOptionElement>? = null
 ) = TagElement(
     elementBuilder = Option,
@@ -632,7 +627,7 @@ fun Option(
 @Composable
 fun OptGroup(
     label: String,
-    attrs: AttrsBuilder<HTMLOptGroupElement>? = null,
+    attrs: AttrBuilderContext<HTMLOptGroupElement>? = null,
     content: ContentBuilder<HTMLOptGroupElement>? = null
 ) = TagElement(
     elementBuilder = OptGroup,
@@ -647,7 +642,7 @@ fun OptGroup(
 
 @Composable
 fun Section(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) = TagElement(
     elementBuilder = Section,
@@ -713,7 +708,7 @@ private val textAreaRestoreControlledStateEffect: DomEffectScope.(HTMLTextAreaEl
 
 @Composable
 fun Nav(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) = TagElement(
     elementBuilder = Nav,
@@ -723,7 +718,7 @@ fun Nav(
 
 @Composable
 fun Pre(
-    attrs: AttrsBuilder<HTMLPreElement>? = null,
+    attrs: AttrBuilderContext<HTMLPreElement>? = null,
     content: ContentBuilder<HTMLPreElement>? = null
 ) {
     TagElement(
@@ -735,7 +730,7 @@ fun Pre(
 
 @Composable
 fun Code(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -747,7 +742,7 @@ fun Code(
 
 @Composable
 fun Main(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -759,7 +754,7 @@ fun Main(
 
 @Composable
 fun Footer(
-    attrs: AttrsBuilder<HTMLElement>? = null,
+    attrs: AttrBuilderContext<HTMLElement>? = null,
     content: ContentBuilder<HTMLElement>? = null
 ) {
     TagElement(
@@ -771,7 +766,7 @@ fun Footer(
 
 @Composable
 fun Hr(
-    attrs: AttrsBuilder<HTMLHRElement>? = null
+    attrs: AttrBuilderContext<HTMLHRElement>? = null
 ) {
     TagElement(
         elementBuilder = Hr,
@@ -783,7 +778,7 @@ fun Hr(
 @Composable
 fun Label(
     forId: String? = null,
-    attrs: AttrsBuilder<HTMLLabelElement>? = null,
+    attrs: AttrBuilderContext<HTMLLabelElement>? = null,
     content: ContentBuilder<HTMLLabelElement>? = null
 ) {
     TagElement(
@@ -802,7 +797,7 @@ fun Label(
 
 @Composable
 fun Table(
-    attrs: AttrsBuilder<HTMLTableElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableElement>? = null,
     content: ContentBuilder<HTMLTableElement>? = null
 ) {
     TagElement(
@@ -814,7 +809,7 @@ fun Table(
 
 @Composable
 fun Caption(
-    attrs: AttrsBuilder<HTMLTableCaptionElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableCaptionElement>? = null,
     content: ContentBuilder<HTMLTableCaptionElement>? = null
 ) {
     TagElement(
@@ -826,7 +821,7 @@ fun Caption(
 
 @Composable
 fun Col(
-    attrs: AttrsBuilder<HTMLTableColElement>? = null
+    attrs: AttrBuilderContext<HTMLTableColElement>? = null
 ) {
     TagElement(
         elementBuilder = Col,
@@ -837,7 +832,7 @@ fun Col(
 
 @Composable
 fun Colgroup(
-    attrs: AttrsBuilder<HTMLTableColElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableColElement>? = null,
     content: ContentBuilder<HTMLTableColElement>? = null
 ) {
     TagElement(
@@ -849,7 +844,7 @@ fun Colgroup(
 
 @Composable
 fun Tr(
-    attrs: AttrsBuilder<HTMLTableRowElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableRowElement>? = null,
     content: ContentBuilder<HTMLTableRowElement>? = null
 ) {
     TagElement(
@@ -861,7 +856,7 @@ fun Tr(
 
 @Composable
 fun Thead(
-    attrs: AttrsBuilder<HTMLTableSectionElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
     content: ContentBuilder<HTMLTableSectionElement>? = null
 ) {
     TagElement(
@@ -873,7 +868,7 @@ fun Thead(
 
 @Composable
 fun Th(
-    attrs: AttrsBuilder<HTMLTableCellElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
     content: ContentBuilder<HTMLTableCellElement>? = null
 ) {
     TagElement(
@@ -885,7 +880,7 @@ fun Th(
 
 @Composable
 fun Td(
-    attrs: AttrsBuilder<HTMLTableCellElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
     content: ContentBuilder<HTMLTableCellElement>? = null
 ) {
     TagElement(
@@ -897,7 +892,7 @@ fun Td(
 
 @Composable
 fun Tbody(
-    attrs: AttrsBuilder<HTMLTableSectionElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
     content: ContentBuilder<HTMLTableSectionElement>? = null
 ) {
     TagElement(
@@ -909,7 +904,7 @@ fun Tbody(
 
 @Composable
 fun Tfoot(
-    attrs: AttrsBuilder<HTMLTableSectionElement>? = null,
+    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
     content: ContentBuilder<HTMLTableSectionElement>? = null
 ) {
     TagElement(
diff --git a/web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt b/web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
index dee2de80df..53cfc97f34 100644
--- a/web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
+++ b/web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
@@ -62,7 +62,7 @@ private val View = ElementBuilderNS<SVGViewElement>("view", SVG_NS)
 @ExperimentalComposeWebSvgApi
 fun Svg(
   viewBox: String? = null,
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -79,7 +79,7 @@ fun Svg(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.SvgA(
   href: String,
-  attrs: AttrsBuilder<SVGAElement>? = null,
+  attrs: AttrBuilderContext<SVGAElement>? = null,
   content: ContentBuilder<SVGAElement>? = null
 ) {
     TagElement(
@@ -98,7 +98,7 @@ fun ElementScope<SVGElement>.Circle(
   cx: CSSLengthOrPercentageValue,
   cy: CSSLengthOrPercentageValue,
   r: CSSLengthOrPercentageValue,
-  attrs: AttrsBuilder<SVGCircleElement>? = null,
+  attrs: AttrBuilderContext<SVGCircleElement>? = null,
   content: ContentBuilder<SVGCircleElement>? = null
 ) {
     TagElement(
@@ -120,7 +120,7 @@ fun ElementScope<SVGElement>.Circle(
   cx: Number,
   cy: Number,
   r: Number,
-  attrs: AttrsBuilder<SVGCircleElement>? = null,
+  attrs: AttrBuilderContext<SVGCircleElement>? = null,
   content: ContentBuilder<SVGCircleElement>? = null
 ) {
     TagElement(
@@ -142,7 +142,7 @@ fun ElementScope<SVGElement>.SvgText(
   text: String,
   x: Number = 0,
   y: Number = 0,
-  attrs: AttrsBuilder<SVGTextElement>? = null,
+  attrs: AttrBuilderContext<SVGTextElement>? = null,
 ) {
     TagElement(
         elementBuilder = Text,
@@ -162,7 +162,7 @@ fun ElementScope<SVGElement>.SvgText(
 fun ElementScope<SVGElement>.View(
   id: String,
   viewBox: String,
-  attrs: AttrsBuilder<SVGViewElement>? = null,
+  attrs: AttrBuilderContext<SVGViewElement>? = null,
 ) {
     TagElement(
         elementBuilder = View,
@@ -182,7 +182,7 @@ fun ElementScope<SVGElement>.Rect(
   y: Number,
   width: Number,
   height: Number,
-  attrs: AttrsBuilder<SVGRectElement>? = null,
+  attrs: AttrBuilderContext<SVGRectElement>? = null,
   content: ContentBuilder<SVGRectElement>? = null
 ) {
     TagElement(
@@ -205,7 +205,7 @@ fun ElementScope<SVGElement>.Rect(
   y: CSSLengthOrPercentageValue,
   width: CSSLengthOrPercentageValue,
   height: CSSLengthOrPercentageValue,
-  attrs: AttrsBuilder<SVGRectElement>? = null,
+  attrs: AttrBuilderContext<SVGRectElement>? = null,
   content: ContentBuilder<SVGRectElement>? = null
 ) {
     TagElement(
@@ -228,7 +228,7 @@ fun ElementScope<SVGElement>.Ellipse(
   cy: CSSLengthOrPercentageValue,
   rx: CSSLengthOrPercentageValue,
   ry: CSSLengthOrPercentageValue,
-  attrs: AttrsBuilder<SVGEllipseElement>? = null,
+  attrs: AttrBuilderContext<SVGEllipseElement>? = null,
   content: ContentBuilder<SVGEllipseElement>? = null
 ) {
     TagElement(
@@ -251,7 +251,7 @@ fun ElementScope<SVGElement>.Ellipse(
   cy: Number,
   rx: Number,
   ry: Number,
-  attrs: AttrsBuilder<SVGEllipseElement>? = null,
+  attrs: AttrBuilderContext<SVGEllipseElement>? = null,
   content: ContentBuilder<SVGEllipseElement>? = null
 ) {
     TagElement(
@@ -272,7 +272,7 @@ fun ElementScope<SVGElement>.Ellipse(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Symbol(
   id: String? = null,
-  attrs: AttrsBuilder<SVGSymbolElement>? = null,
+  attrs: AttrBuilderContext<SVGSymbolElement>? = null,
   content: ContentBuilder<SVGSymbolElement>? = null
 ) {
     TagElement(
@@ -289,7 +289,7 @@ fun ElementScope<SVGElement>.Symbol(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Use(
   href: String,
-  attrs: AttrsBuilder<SVGUseElement>? = null,
+  attrs: AttrBuilderContext<SVGUseElement>? = null,
   content: ContentBuilder<SVGUseElement>? = null
 ) {
     TagElement(
@@ -309,7 +309,7 @@ fun ElementScope<SVGElement>.Line(
   y1: CSSLengthOrPercentageValue,
   x2: CSSLengthOrPercentageValue,
   y2: CSSLengthOrPercentageValue,
-  attrs: AttrsBuilder<SVGLineElement>? = null,
+  attrs: AttrBuilderContext<SVGLineElement>? = null,
   content: ContentBuilder<SVGLineElement>? = null
 ) {
     TagElement(
@@ -332,7 +332,7 @@ fun ElementScope<SVGElement>.Line(
   y1: Number,
   x2: Number,
   y2: Number,
-  attrs: AttrsBuilder<SVGLineElement>? = null,
+  attrs: AttrBuilderContext<SVGLineElement>? = null,
   content: ContentBuilder<SVGLineElement>? = null
 ) {
     TagElement(
@@ -353,7 +353,7 @@ fun ElementScope<SVGElement>.Line(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.ClipPath(
   id: String,
-  attrs: AttrsBuilder<SVGClipPathElement>? = null,
+  attrs: AttrBuilderContext<SVGClipPathElement>? = null,
   content: ContentBuilder<SVGClipPathElement>? = null
 ) {
     TagElement(
@@ -370,7 +370,7 @@ fun ElementScope<SVGElement>.ClipPath(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Path(
   d: String,
-  attrs: AttrsBuilder<SVGPathElement>? = null,
+  attrs: AttrBuilderContext<SVGPathElement>? = null,
   content: ContentBuilder<SVGPathElement>? = null
 ) {
     TagElement(
@@ -386,7 +386,7 @@ fun ElementScope<SVGElement>.Path(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.G(
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -400,7 +400,7 @@ fun ElementScope<SVGElement>.G(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Image(
   href: String,
-  attrs: AttrsBuilder<SVGImageElement>? = null,
+  attrs: AttrBuilderContext<SVGImageElement>? = null,
   content: ContentBuilder<SVGImageElement>? = null
 ) {
     TagElement(
@@ -417,7 +417,7 @@ fun ElementScope<SVGElement>.Image(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Mask(
   id: String? = null,
-  attrs: AttrsBuilder<SVGMaskElement>? = null,
+  attrs: AttrBuilderContext<SVGMaskElement>? = null,
   content: ContentBuilder<SVGMaskElement>? = null
 ) {
     TagElement(
@@ -433,7 +433,7 @@ fun ElementScope<SVGElement>.Mask(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Defs(
-  attrs: AttrsBuilder<SVGDefsElement>? = null,
+  attrs: AttrBuilderContext<SVGDefsElement>? = null,
   content: ContentBuilder<SVGDefsElement>? = null
 ) {
     TagElement(
@@ -447,7 +447,7 @@ fun ElementScope<SVGElement>.Defs(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Pattern(
   id: String,
-  attrs: AttrsBuilder<SVGPatternElement>? = null,
+  attrs: AttrBuilderContext<SVGPatternElement>? = null,
   content: ContentBuilder<SVGPatternElement>? = null
 ) {
     TagElement(
@@ -464,7 +464,7 @@ fun ElementScope<SVGElement>.Pattern(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Polygon(
   vararg points: Number,
-  attrs: AttrsBuilder<SVGPolygonElement>? = null,
+  attrs: AttrBuilderContext<SVGPolygonElement>? = null,
   content: ContentBuilder<SVGPolygonElement>? = null
 ) {
     TagElement(
@@ -481,7 +481,7 @@ fun ElementScope<SVGElement>.Polygon(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Polyline(
   vararg points: Number,
-  attrs: AttrsBuilder<SVGPolylineElement>? = null,
+  attrs: AttrBuilderContext<SVGPolylineElement>? = null,
   content: ContentBuilder<SVGPolylineElement>? = null
 ) {
     TagElement(
@@ -499,7 +499,7 @@ fun ElementScope<SVGElement>.Polyline(
 fun ElementScope<SVGElement>.TextPath(
   href: String,
   text: String,
-  attrs: AttrsBuilder<SVGTextPathElement>? = null,
+  attrs: AttrBuilderContext<SVGTextPathElement>? = null,
 ) {
     TagElement(
         elementBuilder = TextPath,
@@ -516,7 +516,7 @@ fun ElementScope<SVGElement>.TextPath(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Animate(
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -529,7 +529,7 @@ fun ElementScope<SVGElement>.Animate(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.AnimateMotion(
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -542,7 +542,7 @@ fun ElementScope<SVGElement>.AnimateMotion(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.AnimateTransform(
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -556,7 +556,7 @@ fun ElementScope<SVGElement>.AnimateTransform(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.LinearGradient(
   id: String? = null,
-  attrs: AttrsBuilder<SVGLinearGradientElement>? = null,
+  attrs: AttrBuilderContext<SVGLinearGradientElement>? = null,
   content: ContentBuilder<SVGLinearGradientElement>? = null
 ) {
     TagElement(
@@ -574,7 +574,7 @@ fun ElementScope<SVGElement>.LinearGradient(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.RadialGradient(
   id: String? = null,
-  attrs: AttrsBuilder<SVGRadialGradientElement>? = null,
+  attrs: AttrBuilderContext<SVGRadialGradientElement>? = null,
   content: ContentBuilder<SVGRadialGradientElement>? = null
 ) {
     TagElement(
@@ -590,7 +590,7 @@ fun ElementScope<SVGElement>.RadialGradient(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Stop(
-  attrs: AttrsBuilder<SVGStopElement>? = null,
+  attrs: AttrBuilderContext<SVGStopElement>? = null,
   content: ContentBuilder<SVGStopElement>? = null
 ) {
     TagElement(
@@ -603,7 +603,7 @@ fun ElementScope<SVGElement>.Stop(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Switch(
-  attrs: AttrsBuilder<SVGSwitchElement>? = null,
+  attrs: AttrBuilderContext<SVGSwitchElement>? = null,
   content: ContentBuilder<SVGSwitchElement>? = null
 ) {
     TagElement(
@@ -617,7 +617,7 @@ fun ElementScope<SVGElement>.Switch(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Title(
   text: String,
-  attrs: AttrsBuilder<SVGTitleElement>? = null,
+  attrs: AttrBuilderContext<SVGTitleElement>? = null,
 ) {
     TagElement(
         elementBuilder = Title,
@@ -631,7 +631,7 @@ fun ElementScope<SVGElement>.Title(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Tspan(
-  attrs: AttrsBuilder<SVGTSpanElement>? = null,
+  attrs: AttrBuilderContext<SVGTSpanElement>? = null,
   content: ContentBuilder<SVGTSpanElement>? = null
 ) {
     TagElement(
@@ -645,7 +645,7 @@ fun ElementScope<SVGElement>.Tspan(
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Desc(
   content: String,
-  attrs: AttrsBuilder<SVGDescElement>? = null,
+  attrs: AttrBuilderContext<SVGDescElement>? = null,
 ) {
     TagElement(
         elementBuilder = Desc,
@@ -659,7 +659,7 @@ fun ElementScope<SVGElement>.Desc(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Marker(
-  attrs: AttrsBuilder<SVGMarkerElement>? = null,
+  attrs: AttrBuilderContext<SVGMarkerElement>? = null,
   content: ContentBuilder<SVGMarkerElement>? = null
 ) {
     TagElement(
@@ -672,7 +672,7 @@ fun ElementScope<SVGElement>.Marker(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Mpath(
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -685,7 +685,7 @@ fun ElementScope<SVGElement>.Mpath(
 @Composable
 @ExperimentalComposeWebSvgApi
 fun ElementScope<SVGElement>.Filter(
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -700,7 +700,7 @@ fun ElementScope<SVGElement>.Filter(
 fun ElementScope<SVGElement>.Set(
   attributeName: String,
   to: String,
-  attrs: AttrsBuilder<SVGElement>? = null,
+  attrs: AttrBuilderContext<SVGElement>? = null,
   content: ContentBuilder<SVGElement>? = null
 ) {
     TagElement(
@@ -718,7 +718,7 @@ fun ElementScope<SVGElement>.Set(
 @ExperimentalComposeWebSvgApi
 fun <T : SVGElement> SvgElement(
   name: String,
-  attrs: AttrsBuilder<T>? = null,
+  attrs: AttrBuilderContext<T>? = null,
   content: ContentBuilder<T>? = null
 ) {
     TagElement(