Add missing image and multimedia HTML elements

AREA, AUDIO, MAP, TRACK, VIDEO

see https://developer.mozilla.org/en-US/docs/Web/HTML/Element

web/core/src/jsMain/kotlin/androidx/compose/web/elements/Base.kt

@@ -14,8 +14,11 @@ import org.jetbrains.compose.web.DomApplier
 import org.jetbrains.compose.web.DomElementWrapper
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 import kotlinx.browser.document
+import org.w3c.dom.Audio
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.HTMLAreaElement
+import org.w3c.dom.HTMLAudioElement
 import org.w3c.dom.HTMLBRElement
 import org.w3c.dom.HTMLButtonElement
 import org.w3c.dom.HTMLDivElement
@@ -27,6 +30,7 @@ import org.w3c.dom.HTMLImageElement
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLLIElement
 import org.w3c.dom.HTMLLabelElement
+import org.w3c.dom.HTMLMapElement
 import org.w3c.dom.HTMLOListElement
 import org.w3c.dom.HTMLOptGroupElement
 import org.w3c.dom.HTMLOptionElement
@@ -42,7 +46,9 @@ import org.w3c.dom.HTMLTableElement
 import org.w3c.dom.HTMLTableRowElement
 import org.w3c.dom.HTMLTableSectionElement
 import org.w3c.dom.HTMLTextAreaElement
+import org.w3c.dom.HTMLTrackElement
 import org.w3c.dom.HTMLUListElement
+import org.w3c.dom.HTMLVideoElement
 
 @OptIn(ComposeCompilerApi::class)
 @Composable
@@ -93,6 +99,12 @@ interface ElementBuilder<TElement : Element> {
         val Aside: ElementBuilder<HTMLElement> = ElementBuilderImplementation("aside")
         val Header: ElementBuilder<HTMLElement> = ElementBuilderImplementation("header")
 
+        val Area: ElementBuilder<HTMLAreaElement> = ElementBuilderImplementation("area")
+        val Audio: ElementBuilder<HTMLAudioElement> = ElementBuilderImplementation("audio")
+        val Map: ElementBuilder<HTMLMapElement> = ElementBuilderImplementation("map")
+        val Track: ElementBuilder<HTMLTrackElement> = ElementBuilderImplementation("track")
+        val Video: ElementBuilder<HTMLVideoElement> = ElementBuilderImplementation("video")
+
         val Div: ElementBuilder<HTMLDivElement> = ElementBuilderImplementation("div")
         val A: ElementBuilder<HTMLAnchorElement> = ElementBuilderImplementation("a")
         val Input: ElementBuilder<HTMLInputElement> = ElementBuilderImplementation("input")

web/core/src/jsMain/kotlin/androidx/compose/web/elements/Elements.kt

@@ -16,6 +16,8 @@ import org.jetbrains.compose.web.attributes.type
 import org.jetbrains.compose.web.attributes.value
 import kotlinx.browser.document
 import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.HTMLAreaElement
+import org.w3c.dom.HTMLAudioElement
 import org.w3c.dom.HTMLBRElement
 import org.w3c.dom.HTMLButtonElement
 import org.w3c.dom.HTMLDivElement
@@ -27,6 +29,7 @@ import org.w3c.dom.HTMLImageElement
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLLIElement
 import org.w3c.dom.HTMLLabelElement
+import org.w3c.dom.HTMLMapElement
 import org.w3c.dom.HTMLOListElement
 import org.w3c.dom.HTMLOptGroupElement
 import org.w3c.dom.HTMLOptionElement
@@ -41,7 +44,9 @@ import org.w3c.dom.HTMLTableElement
 import org.w3c.dom.HTMLTableRowElement
 import org.w3c.dom.HTMLTableSectionElement
 import org.w3c.dom.HTMLTextAreaElement
+import org.w3c.dom.HTMLTrackElement
 import org.w3c.dom.HTMLUListElement
+import org.w3c.dom.HTMLVideoElement
 import org.w3c.dom.Text
 
 typealias AttrBuilderContext<T> = AttrsBuilder<T>.() -> Unit
@@ -95,6 +100,66 @@ fun Header(
     )
 }
 
+@Composable
+fun Area(
+    attrs: AttrBuilderContext<HTMLAreaElement> = {},
+    content: ContentBuilder<HTMLAreaElement>? = null
+) {
+    TagElement(
+        elementBuilder = ElementBuilder.Area,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun Audio(
+    attrs: AttrBuilderContext<HTMLAudioElement> = {},
+    content: ContentBuilder<HTMLAudioElement>? = null
+) {
+    TagElement(
+        elementBuilder = ElementBuilder.Audio,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun HTMLMap(
+    attrs: AttrBuilderContext<HTMLMapElement> = {},
+    content: ContentBuilder<HTMLMapElement>? = null
+) {
+    TagElement(
+        elementBuilder = ElementBuilder.Map,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun Track(
+    attrs: AttrBuilderContext<HTMLTrackElement> = {},
+    content: ContentBuilder<HTMLTrackElement>? = null
+) {
+    TagElement(
+        elementBuilder = ElementBuilder.Track,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
+@Composable
+fun Video(
+    attrs: AttrBuilderContext<HTMLVideoElement> = {},
+    content: ContentBuilder<HTMLVideoElement>? = null
+) {
+    TagElement(
+        elementBuilder = ElementBuilder.Video,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
 @Composable
 fun Text(value: String) {
     ComposeNode<DomNodeWrapper, DomApplier>(

web/core/src/jsTest/kotlin/elements/ElementsTests.kt

@@ -10,8 +10,10 @@ import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.core.tests.runTest
 import org.jetbrains.compose.web.dom.A
 import org.jetbrains.compose.web.dom.Address
+import org.jetbrains.compose.web.dom.Area
 import org.jetbrains.compose.web.dom.Article
 import org.jetbrains.compose.web.dom.Aside
+import org.jetbrains.compose.web.dom.Audio
 import org.jetbrains.compose.web.dom.B
 import org.jetbrains.compose.web.dom.Br
 import org.jetbrains.compose.web.dom.Button
@@ -30,6 +32,7 @@ import org.jetbrains.compose.web.dom.H3
 import org.jetbrains.compose.web.dom.H4
 import org.jetbrains.compose.web.dom.H5
 import org.jetbrains.compose.web.dom.H6
+import org.jetbrains.compose.web.dom.HTMLMap
 import org.jetbrains.compose.web.dom.Header
 import org.jetbrains.compose.web.dom.Hr
 import org.jetbrains.compose.web.dom.I
@@ -56,7 +59,9 @@ import org.jetbrains.compose.web.dom.Tfoot
 import org.jetbrains.compose.web.dom.Th
 import org.jetbrains.compose.web.dom.Thead
 import org.jetbrains.compose.web.dom.Tr
+import org.jetbrains.compose.web.dom.Track
 import org.jetbrains.compose.web.dom.Ul
+import org.jetbrains.compose.web.dom.Video
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
 import kotlin.test.Test
@@ -71,6 +76,12 @@ class ElementsTests {
             Pair({ Aside() }, "ASIDE"),
             Pair({ Header() }, "HEADER"),
 
+            Pair({ Area() }, "AREA"),
+            Pair({ Audio() }, "AUDIO"),
+            Pair({ HTMLMap() }, "MAP"),
+            Pair({ Track() }, "TRACK"),
+            Pair({ Video() }, "VIDEO"),
+
             Pair({ Div() }, "DIV"),
             Pair({ A() }, "A"),
             Pair({ Button() }, "BUTTON"),