Drop component and Navbar improvements

0.2.1

.github/workflows/build.yml

@@ -5,15 +5,11 @@ on: [push]
 jobs:
   build:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v2
-      - name: Set up JDK 1.8
+      - name: Set up JDK 11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.8
-      - name: Fix android 31.0.0 dx
-        continue-on-error: true
-        run: cd /usr/local/lib/android/sdk/build-tools/31.0.0/ && mv d8 dx && cd lib  && mv d8.jar dx.jar
+          java-version: 11
       - name: Build with Gradle
         run: ./gradlew build

CHANGELOG.md

@@ -1,5 +1,100 @@
 # Changelog
 
+## 0.2.2
+
+* Add support of `Drop` component
+* Improve support of `Navbar`s
+
+## 0.2.1
+
+* `Tab` elements become supported
+
+## 0.2.0
+
+**ALL DEPRECATIONS HAVE BEEN REMOVED**
+
+* `Kotlin`: `1.7.0`
+* `Compose`: `1.2.0-alpha01-dev753`
+
+## 0.1.10
+
+* `Grid` support improvements
+
+## 0.1.9
+
+* `Artile` elements become supported
+* `Iconnav` elements become supported
+* `Leader` elements become supported
+* `Grid` support improvements
+
+## 0.1.8
+
+* `Compose`: `1.2.0-alpha01-dev731`
+
+## 0.1.7
+
+Add Toggle builder
+
+## 0.1.6
+
+* Add support of UIKitButton size and group
+
+## 0.1.5
+
+* Fix access to `UIKitSticky`
+
+## 0.1.4
+
+* Improvements in `UIKitGrid`
+* Add support of `UIKitSticky`
+
+## 0.1.3
+
+* Add support of sections
+* Improve support of navbars
+
+## 0.1.2
+
+* New typealias `AttrsWithContentBuilder`
+* Old `DList` and related composable functions removed (they are built-in in compose)
+
+## 0.1.1
+
+* `Compose`: `1.2.0-alpha01-dev686`
+
+## 0.1.0
+
+* `Kotlin` = `1.6.21`
+* `Compose`: `1.2.0-alpha01-dev683`
+
+## 0.0.53
+
+* Improvements in `UIKitPadding`
+* Add support of UIKit lists
+
+## 0.0.52
+
+* Improve work with UIKitModifiers
+
+## 0.0.51
+
+* New interface `Dropdown` which will be used to create (or retrieve) dropdown for an element
+* New attribute in `NavItemElement` for configuration of `A` element
+
+## 0.0.50
+
+* Add opportunity to customize content in title of `Nav` after text
+
+## 0.0.49
+
+* Now it is possible to use optional title in navs builders
+
+## 0.0.48
+
+* Added support of `Breadcrumb`
+* Add opportunity to summarize `UIKitModifier`
+* Add opportunity to simply create attributes builder using `UIKitModifier` of array of them
+
 ## 0.0.47
 
 * Add support of `Close` element

build.gradle

@@ -26,6 +26,7 @@ repositories {
     mavenLocal()
     mavenCentral()
     google()
+    maven { url "https://maven.pkg.jetbrains.space/public/p/compose/dev" }
 }
 
 kotlin {

github_release.gradle

@@ -21,7 +21,7 @@ if (new File(projectDir, "secret.gradle").exists()) {
         owner "InsanusMokrassar"
         repo "JSUIKitKBindings"
 
-        tagName "${project.version}"
+        tagName "v${project.version}"
         releaseName "${project.version}"
         targetCommitish "${project.version}"
 

gradle.properties

@@ -9,4 +9,4 @@ android.enableJetifier=true
 # Project data
 
 group=dev.inmo
-version=0.0.47
+version=0.2.2

gradle/libs.versions.toml

@@ -1,9 +1,9 @@
 [versions]
 
-kt = "1.6.10"
-jb-compose = "1.1.1"
-jb-dokka = "1.6.10"
-gh-release = "2.2.12"
+kt = "1.7.0"
+jb-compose = "1.2.0-alpha01-dev753"
+jb-dokka = "1.7.0"
+gh-release = "2.4.1"
 
 [libraries]
 

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

src/jsMain/kotlin/dev/inmo/jsuikit/UIKitAttributeValueBuilder.kt

@@ -1,31 +1,12 @@
 package dev.inmo.jsuikit
 
-import dev.inmo.jsuikit.modifiers.AttributeValue
-import dev.inmo.jsuikit.utils.AttributeBuilder
-import dev.inmo.jsuikit.utils.buildAttribute
+import dev.inmo.jsuikit.utils.*
 import org.jetbrains.compose.web.attributes.AttrsScope
 
-@Deprecated("Will be removed soon")
-class UIKitAttributeValueBuilder {
-    private val attrs = mutableListOf<Pair<String, String>>()
-
-    infix fun String.to(other: String?) {
-        other ?.let {
-            attrs.add(Pair(this, other))
-        }
-    }
-
-    infix fun String.to(other: AttributeValue?) {
-        this to other ?.name
-    }
-
-    fun build(): String = attrs.joinToString(";") { (k, v) -> "$k: $v" }
-}
-
 fun AttrsScope<*>.buildAndAddAttribute(
     attributeName: String,
     skipNullValues: Boolean = true,
-    block: AttributeBuilder.() -> Unit
+    block: ParametersBuilder.() -> Unit
 ) {
     buildAttribute(attributeName, skipNullValues, block).let {
         attr(it.first, it.second)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Article.kt

@@ -0,0 +1,57 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitArticle
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.jsuikit.utils.optionallyDraw
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
+
+@Composable
+fun UIKitArticleElement (
+    headerBuilder: ContentBuilder<HTMLHeadingElement>,
+    headerAttrs: Attrs<HTMLHeadingElement> = Attrs.empty(),
+    metaBuilder: ContentBuilder<HTMLParagraphElement>? = null,
+    metaAttrs: Attrs<HTMLParagraphElement>? = null,
+    otherContentBuilder: ContentBuilder<HTMLElement>
+) = Article(
+    {
+        include(UIKitArticle)
+    }
+) {
+    H1(
+        {
+            include(UIKitArticle.Title)
+            headerAttrs.builder(this)
+        },
+        headerBuilder
+    )
+    optionallyDraw(metaAttrs, metaBuilder) {
+        P(
+            {
+                include(UIKitArticle.Meta)
+                metaAttrs ?.builder ?.invoke(this)
+            },
+            metaBuilder ?: {}
+        )
+    }
+
+    otherContentBuilder()
+}
+
+@Composable
+fun UIKitArticleElement (
+    header: String,
+    meta: String? = null,
+    otherContentBuilder: ContentBuilder<HTMLElement>
+) = UIKitArticleElement(
+    { Text(header) },
+    metaBuilder = meta ?.let {
+        {
+            Text(meta)
+        }
+    },
+    otherContentBuilder = otherContentBuilder
+)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Breadcrumb.kt

@@ -0,0 +1,50 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitBreadcrumb
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun <T> Breadcrumb(
+    data: Iterable<T>,
+    rootAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrs: Attrs<HTMLLIElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLLIElement>.(T) -> Unit = {},
+) {
+    Ul(
+        {
+            include(UIKitBreadcrumb)
+            rootAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            Li({ elementAttrs.builder(this) }) {
+                elementContent(it)
+            }
+        }
+    }
+}
+
+@Composable
+fun BreadcrumbActiveElement(
+    href: String? = "#",
+    elementAttrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLAnchorElement>.() -> Unit = {},
+) {
+    A(href, { elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}
+
+@Composable
+fun BreadcrumbInactiveElement(
+    elementAttrs: Attrs<HTMLSpanElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLSpanElement>.() -> Unit = {},
+) {
+    Span({ elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/DescriptionList.kt

@@ -4,8 +4,7 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitDescriptionList
 import dev.inmo.jsuikit.modifiers.include
 import dev.inmo.jsuikit.utils.*
-import org.jetbrains.compose.web.dom.ContentBuilder
-import org.jetbrains.compose.web.dom.ElementScope
+import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDListElement
 import org.w3c.dom.HTMLElement
 

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Drop.kt

@@ -0,0 +1,24 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitDrop
+import dev.inmo.jsuikit.modifiers.attrsBuilder
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Drop(
+    buttonBuilder: AttrsWithContentBuilder<HTMLButtonElement>,
+    dropBuilder: AttrsWithContentBuilder<HTMLDivElement>
+) {
+    DefaultButton(
+        attributesCustomizer = buttonBuilder.attributesBuilderContext,
+        contentAllocator = buttonBuilder.builder
+    )
+    Div(
+        (Attrs<HTMLDivElement>(UIKitDrop.Custom()) + dropBuilder.attrs).builder,
+        dropBuilder.builder
+    )
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/DropArea.kt

@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement
 @Composable
 fun DropArea(
     attrs: Attrs<HTMLDivElement> = Attrs.empty(),
-    inputAttrs: InputAttrs<String> = Attrs.empty(),
+    inputAttrs: InputAttrs<String> = InputAttrs.empty(),
     contentBuilder: ContentBuilder<HTMLDivElement> = {}
 ) = Div(
     {

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Dropdown.kt

@@ -3,10 +3,26 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.types.DropdownOptions
 import dev.inmo.jsuikit.utils.Milliseconds
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
+@Composable
+fun Dropdown(
+    vararg modifiers: UIKitModifier,
+    dropdownOptions: DropdownOptions,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            include(UIKitDropdown(dropdownOptions), *modifiers)
+            attributesCustomizer()
+        },
+        contentBuilder
+    )
+}
 @Composable
 fun Dropdown(
     vararg modifiers: UIKitModifier,
@@ -26,21 +42,24 @@ fun Dropdown(
 ) {
     Div(
         {
-            buildAndAddAttribute("uk-dropdown") {
-                "toggle" to toggle
-                "pos" to pos
-                "mode" to mode
-                "delayShow" to delayShow
-                "delayHide" to delayHide
-                "boundary" to boundary
-                "boundaryAlign" to boundaryAlign
-                "flip" to flip
-                "offset" to offset
-                "animation" to animation
-                "duration" to duration
-            }
-            classes("uk-dropdown")
-            include(*modifiers)
+            include(
+                UIKitDropdown(
+                    DropdownOptions(
+                        toggle = toggle,
+                        pos = pos,
+                        mode = mode,
+                        delayShow = delayShow,
+                        delayHide = delayHide,
+                        boundary = boundary,
+                        boundaryAlign = boundaryAlign,
+                        flip = flip,
+                        offset = offset,
+                        animation = animation,
+                        duration = duration
+                    )
+                ),
+                *modifiers
+            )
             attributesCustomizer()
         },
         contentBuilder

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt

@@ -1,8 +1,8 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.buildAttribute
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
@@ -26,23 +26,18 @@ fun GridColumn(
 fun Grid(
     vararg modifiers: UIKitModifier,
     masonry: Boolean = false,
-    parallax: Int? = null,
-    marginClass: String? = null,
+    parallax: UInt? = null,
+    marginClass: UIKitMargin? = null,
     firstColumnClass: String? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
+    builder: ContentBuilder<HTMLDivElement> = {}
 ) {
-    val attrs = listOfNotNull(
-        if (masonry) "masonry" to "true" else null,
-        parallax ?.let { "parallax" to it.toString() },
-        marginClass ?.let { "margin" to it },
-        firstColumnClass ?.let { "first-column" to it },
-    )
     Div(
         {
-            attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" })
-            classes("uk-grid")
-            include(*modifiers)
+            include(
+                UIKitGrid.invoke(marginClass, firstColumnClass, masonry, parallax),
+                *modifiers
+            )
             attributesCustomizer()
         }
     ) {

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Iconnav.kt

@@ -0,0 +1,41 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitIconnav
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
+
+@Composable
+fun <T> IconNav(
+    data: Iterable<T>,
+    listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
+    elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
+) {
+    Ul(
+        {
+            include(UIKitIconnav)
+            listAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            Li(
+                {
+                    elementAttrsBuilder.invoke(this, it)
+                }
+            ) { elementBuilder(this, it) }
+        }
+    }
+}
+
+@Composable
+fun <T> Iconnav(
+    data: Iterable<T>,
+    listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
+    elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
+) = IconNav(data, listAttrs, elementAttrsBuilder, elementBuilder)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/List.kt

@@ -2,14 +2,32 @@ package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.snapshots.SnapshotStateList
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLHeadingElement
 import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun <T> List(
+    data: SnapshotStateList<T>,
+    ukAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) {
+    Ul(
+        {
+            include(UIKitList)
+            ukAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            elementAllocator(it)
+        }
+    }
+}
+
+@Composable
+fun <T> ListWithTitle(
     title: String,
     data: SnapshotStateList<T>,
     vararg titleModifiers: UIKitModifier,
@@ -23,15 +41,5 @@ fun <T> List(
         Text(title)
     }
     besidesTitleAndList ?.invoke()
-    Ul(
-        {
-            classes("uk-list")
-            include(*ulModifiers)
-            ulCustomizer()
-        }
-    ) {
-        data.forEach {
-            elementAllocator(it)
-        }
-    }
+    List(data, Attrs(*ulModifiers) { ulCustomizer(this) }, elementAllocator)
 }

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt

@@ -1,7 +1,6 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.snapshots.SnapshotStateList
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.Milliseconds
@@ -94,7 +93,7 @@ fun SubNav(
 
 @Composable
 fun <T> Nav(
-    title: String,
+    title: String?,
     data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
@@ -104,6 +103,7 @@ fun <T> Nav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) {
@@ -119,11 +119,14 @@ fun <T> Nav(
             ulCustomizer()
         }
     ) {
-        NavHeader(
-            title,
-            *titleModifiers,
-            attributesCustomizer = titleCustomizer
-        )
+        title ?.let {
+            NavHeader(
+                title,
+                *titleModifiers,
+                attributesCustomizer = titleCustomizer,
+                afterTitleContentBuilder = afterTitleContentBuilder
+            )
+        }
         besidesTitleAndList ?.let { it() }
         data.forEach {
             elementAllocator(it)
@@ -133,7 +136,7 @@ fun <T> Nav(
 
 @Composable
 fun <T> DefaultNav(
-    title: String,
+    title: String?,
     data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
@@ -143,6 +146,7 @@ fun <T> DefaultNav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) = Nav(
@@ -156,13 +160,14 @@ fun <T> DefaultNav(
     duration,
     besidesTitleAndList,
     titleCustomizer,
+    afterTitleContentBuilder,
     ulCustomizer,
     elementAllocator
 )
 
 @Composable
 fun <T> PrimaryNav(
-    title: String,
+    title: String?,
     data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
@@ -172,6 +177,7 @@ fun <T> PrimaryNav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) = Nav(
@@ -185,13 +191,14 @@ fun <T> PrimaryNav(
     duration,
     besidesTitleAndList,
     titleCustomizer,
+    afterTitleContentBuilder,
     ulCustomizer,
     elementAllocator
 )
 
 @Composable
 fun <T> SubNav(
-    title: String,
+    title: String?,
     data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
@@ -201,6 +208,7 @@ fun <T> SubNav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) = Nav(
@@ -214,6 +222,7 @@ fun <T> SubNav(
     duration,
     besidesTitleAndList,
     titleCustomizer,
+    afterTitleContentBuilder,
     ulCustomizer,
     elementAllocator
 )
@@ -223,6 +232,7 @@ fun NavHeader(
     text: String,
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {}
 ) {
     Li(
         {
@@ -231,6 +241,7 @@ fun NavHeader(
         }
     ) {
         Text(text)
+        afterTitleContentBuilder()
     }
 }
 
@@ -238,6 +249,7 @@ fun NavHeader(
 fun NavItemElement(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    anchorAttributesCustomizer: AttrBuilderContext<HTMLAnchorElement> = {},
     contentAllocator: ContentBuilder<HTMLAnchorElement>
 ) {
     Li(
@@ -246,7 +258,7 @@ fun NavItemElement(
             attributesCustomizer()
         }
     ) {
-        A("#") {
+        A("#", attrs = anchorAttributesCustomizer) {
             contentAllocator()
         }
     }

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt

@@ -1,35 +1,49 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.*
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 
 @Composable
 fun Navbar(
-    leftBuilder: NavbarNavBuilder? = null,
-    centerBuilder: NavbarNavBuilder? = null,
-    rightBuilder: NavbarNavBuilder? = null,
-    vararg navModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+    contentBuilder: ContentBuilder<HTMLElement>
 ) {
     Nav(
         {
-            attr("uk-navbar", "")
-            classes("uk-navbar-container", "uk-navbar")
+            include(UIKitNavbar, UIKitNavbar(), UIKitNavbar.Container)
+            attributesCustomizer()
+        }
+    ) {
+        contentBuilder()
+    }
+}
+
+@Composable
+fun Navbar(
+    leftBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    centerBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    rightBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    vararg navModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+) {
+    Navbar(
+        attributesCustomizer = {
             include(*navModifiers)
             attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {
-            Div({ classes("uk-navbar-left") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Left);leftBuilder.attributesBuilderContext(this) }, leftBuilder.builder)
         }
         centerBuilder ?.let {
-            Div({ classes("uk-navbar-center") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Center);centerBuilder.attributesBuilderContext(this) }, centerBuilder.builder)
         }
         rightBuilder ?.let {
-            Div({ classes("uk-navbar-right") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Right);rightBuilder.attributesBuilderContext(this) }, rightBuilder.builder)
         }
     }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt

@@ -1,63 +1,45 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.*
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLLIElement
-import org.w3c.dom.HTMLUListElement
+import org.w3c.dom.*
 
-interface NavbarNavElement {
-    fun AttrsScope<HTMLLIElement>.setup() {}
-    @Composable
-    fun ElementScope<HTMLLIElement>.fill()
-
-    class Default(
-        private val setupCallback: AttrsScope<HTMLLIElement>.() -> Unit,
-        private val fillCallback: @Composable ElementScope<HTMLLIElement>.() -> Unit
-    ) : NavbarNavElement {
-        override fun AttrsScope<HTMLLIElement>.setup() {
-            setupCallback()
-        }
-
-        @Composable
-        override fun ElementScope<HTMLLIElement>.fill() {
-            fillCallback()
-        }
-    }
-}
-
-class NavbarNavBuilder(
-    private val modifiers: Array<UIKitModifier>,
-    private val elements: List<NavbarNavElement>,
-    private val attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+@Composable
+fun NavbarNav(
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty()
 ) {
-    constructor(
-        modifiers: Array<UIKitModifier>,
-        vararg elements: NavbarNavElement,
-        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
-    ) : this(modifiers, elements.toList(), attributesCustomizer)
-    constructor(
-        vararg elements: NavbarNavElement,
-        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
-    ) : this(emptyArray(), elements.toList(), attributesCustomizer)
-    @Composable
-    fun draw() {
-        Ul(
-            {
-                classes("uk-navbar-nav")
-                include(*modifiers)
-                attributesCustomizer()
-            }
-        ) {
-            elements.forEach { element ->
-                Li(
-                    { element.apply { setup() } }
-                ) {
-                    element.apply { fill() }
-                }
-            }
+    Ul(
+        {
+            include(UIKitNavbar.Nav)
+            attrs.builder(this)
+        }
+    ) {
+        elements.forEach { element ->
+            Li(element.attributesBuilderContext, element.builder)
         }
     }
 }
+
+@Composable
+fun NavbarNav(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty()
+) = NavbarNav(elements.toList(), attrs)
+
+fun NavbarNavBuilder(
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
+) = AttrsWithContentBuilder<HTMLDivElement>(containerAttrs) {
+    NavbarNav(elements, attrs)
+}
+
+fun NavbarNavBuilder(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
+) = NavbarNavBuilder(elements.toList(), attrs, containerAttrs)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/StandardInput.kt

@@ -41,14 +41,3 @@ fun <T> StandardInput(
         attributesCustomizer()
     }
 }
-
-@Composable
-@Deprecated("Renamed", ReplaceWith("StandardInput", "dev.inmo.jsuikit.elements.StandardInput"))
-fun <T> TextField(
-    type: InputType<T>,
-    state: MutableState<T>,
-    disabledState: State<Boolean>? = null,
-    placeholder: String? = null,
-    vararg modifiers: UIKitModifier,
-    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
-) = StandardInput(type, state, disabledState, placeholder, modifiers = modifiers, attributesCustomizer)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Tabs.kt

@@ -0,0 +1,46 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitTab
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.optionallyDraw
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
+
+@Composable
+fun <T> Tabs(
+    data: Iterable<T>,
+    tabsItemBuilder: @Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit,
+    tabsItemAttrs: AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit = { _, _ -> },
+    tabsContainerAttrs: AttrsScope<HTMLUListElement>.() -> Unit = {},
+    contentContainerAttrs: (AttrsScope<HTMLUListElement>.() -> Unit)? = null,
+    contentItemAttrs: (AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null,
+    contentItemBuilder: (@Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null
+) {
+    Ul({
+        include(UIKitTab);
+        tabsContainerAttrs()
+    }) {
+        data.forEachIndexed { i, data ->
+            Li({ tabsItemAttrs(i, data) }) {
+                tabsItemBuilder(i, data)
+            }
+        }
+    }
+
+    optionallyDraw(contentItemAttrs != null, contentItemBuilder != null, contentContainerAttrs != null) {
+        Ul({
+            contentContainerAttrs ?.invoke(this)
+        }) {
+            optionallyDraw(contentItemAttrs != null, contentItemBuilder != null) {
+                data.forEachIndexed { i, data ->
+                    Li({ contentItemAttrs ?.invoke(this, i, data) }) {
+                        contentItemBuilder ?.invoke(this, i, data)
+                    }
+                }
+            }
+        }
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Toggle.kt

@@ -0,0 +1,26 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitToggle
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.ButtonType
+import org.jetbrains.compose.web.attributes.type
+import org.jetbrains.compose.web.dom.Button
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.HTMLButtonElement
+
+@Composable
+fun Toggle(
+    attrs: Attrs<HTMLButtonElement>,
+    contentBuilder: ContentBuilder<HTMLButtonElement>
+) {
+    Button(
+        {
+            include(UIKitToggle)
+            type(ButtonType.Button)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/AttributeValue.kt

@@ -1,3 +1,5 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class AttributeValue(val name: String)
+sealed class AttributeValue(val name: String) {
+    override fun toString(): String = name
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitArticle.kt

@@ -0,0 +1,12 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitArticle(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Title : UIKitArticle(arrayOf("uk-article-title"))
+    object Meta : UIKitArticle(arrayOf("uk-article-meta"))
+
+    companion object : UIKitArticle(arrayOf("uk-article"))
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitBreadcrumb.kt

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBreadcrumb(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    companion object : UIKitBreadcrumb(arrayOf("uk-breadcrumb"))
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitButton.kt

@@ -12,5 +12,12 @@ sealed class UIKitButton(suffix: String?) : UIKitModifier {
         object Link : Type("link")
     }
 
+    sealed class Size(suffix: String) : UIKitButton(suffix) {
+        object Small : Size("small")
+        object Large : Size("large")
+    }
+
+    object Group : UIKitButton("group")
+
     companion object : UIKitButton(null)
 }

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitDrop.kt

@@ -0,0 +1,122 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.css.selectors.CSSSelector
+
+sealed class UIKitDrop(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    sealed class Position(name: String) : AttributeValue(name) {
+
+        sealed class Bottom(name: String) : Position("bottom-$name") {
+
+            object Left : Bottom("left")
+            object Center : Bottom("center")
+            object Right : Bottom("right")
+            object Justify : Bottom("justify")
+
+        }
+
+        sealed class Top(name: String) : Position("top-$name") {
+
+            object Left : Top("left")
+            object Center : Top("center")
+            object Right : Top("right")
+            object Justify : Top("justify")
+
+        }
+
+        sealed class Left(name: String) : Position("left-$name") {
+
+            object Top : Left("top")
+            object Center : Left("center")
+            object Bottom : Left("bottom")
+
+        }
+
+        sealed class Right(name: String) : Position("right-$name") {
+
+            object Top : Right("top")
+            object Center : Right("center")
+            object Bottom : Right("bottom")
+
+        }
+    }
+
+    sealed class Stretch(name: String) : AttributeValue(name) {
+        object True : Stretch("true")
+        object X : Stretch("x")
+        object Y : Stretch("y")
+    }
+
+    sealed class Mode(name: String) : AttributeValue(name) {
+
+        object Click : Mode("click")
+        object Hover : Mode("hover")
+
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
+    }
+
+    class Custom internal constructor(
+        classes: Array<String> = emptyArray(),
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitDrop(classes, otherAttrs)
+
+    companion object {
+        operator fun invoke(
+            toggle: CSSSelector? = null,
+            position: Position? = null,
+            stretch: Stretch? = null,
+            mode: Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            autoUpdate: Boolean? = null,
+            boundary: CSSSelector? = null,
+            boundaryX: CSSSelector? = null,
+            boundaryY: CSSSelector? = null,
+            target: CSSSelector? = null,
+            targetX: CSSSelector? = null,
+            targetY: CSSSelector? = null,
+            inset: Boolean? = null,
+            flip: Boolean? = null,
+            shift: Boolean? = null,
+            offset: Pixels? = null,
+            animation: UIKitAnimation? = null,
+            animationOut: Boolean? = null,
+            bgScroll: Boolean? = null,
+            duration: Milliseconds? = null,
+            container: Boolean? = null
+        ) = Custom(
+            arrayOf("uk-drop"),
+            mapOf(
+                buildAttribute("uk-drop") {
+                    "toggle" to toggle
+                    "position" to position
+                    "stretch" to stretch
+                    "mode" to mode
+                    "delay-show" to delayShow
+                    "delay-hide" to delayHide
+                    "auto-update" to autoUpdate
+                    "boundary" to boundary
+                    "boundary-x" to boundaryX
+                    "boundary-y" to boundaryY
+                    "target" to target
+                    "target-x" to targetX
+                    "target-y" to targetY
+                    "inset" to inset
+                    "flip" to flip
+                    "shift" to shift
+                    "offset" to offset
+                    "animation" to animation
+                    "animation-out" to animationOut
+                    "bg-scroll" to bgScroll
+                    "duration" to duration
+                    "container" to container
+                }
+            )
+        )
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitDropdown.kt

@@ -1,5 +1,9 @@
 package dev.inmo.jsuikit.modifiers
 
+import dev.inmo.jsuikit.types.DropdownOptions
+import dev.inmo.jsuikit.utils.Milliseconds
+import dev.inmo.jsuikit.utils.buildAttribute
+
 sealed class UIKitDropdown(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)
 
@@ -50,6 +54,9 @@ sealed class UIKitDropdown(classname: String) : UIKitModifier {
         object Click : Mode("click")
         object Hover : Mode("hover")
 
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
     }
 
     sealed class Flip(name: String) : AttributeValue(name) {
@@ -61,4 +68,48 @@ sealed class UIKitDropdown(classname: String) : UIKitModifier {
 
     }
 
+    class Custom(
+        dropdownOptions: DropdownOptions
+    ) : UIKitDropdown("uk-dropdown") {
+        override val otherAttrs: Map<String, String> = mapOf(
+            buildAttribute(
+                "uk-dropdown"
+            ) {
+                dropdownOptions.includeParameters(this)
+            }
+        )
+    }
+
+    companion object {
+        operator fun invoke(
+            dropdownOptions: DropdownOptions
+        ) = Custom(dropdownOptions)
+        operator fun invoke(
+            toggle: String? = null,
+            pos: Position? = null,
+            mode: Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            flip: Flip? = null,
+            offset: Int? = null,
+            animation: UIKitAnimation? = null,
+            duration: Milliseconds? = null,
+        ) = Custom(
+            DropdownOptions(
+                toggle = toggle,
+                pos = pos,
+                mode = mode,
+                delayShow = delayShow,
+                delayHide = delayHide,
+                boundary = boundary,
+                boundaryAlign = boundaryAlign,
+                flip = flip,
+                offset = offset,
+                animation = animation,
+                duration = duration
+            )
+        )
+    }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitGrid.kt

@@ -1,20 +1,59 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitGrid(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-grid-$suffix")
+import dev.inmo.jsuikit.utils.buildAttribute
 
-    sealed class Gap(suffix: String) : UIKitGrid(suffix) {
+sealed class UIKitGrid(vararg classnames: String) : UIKitModifier {
+    override val classes: Array<String> = classnames as Array<String>
 
-        object Small : Gap("small")
-        object Medium : Gap("medium")
-        object Large : Gap("large")
-        object Collapse : Gap("collapse")
+    sealed class Gap(classname: String) : UIKitGrid(classname) {
+
+        object Small : Gap("uk-grid-small")
+        object Medium : Gap("uk-grid-medium")
+        object Large : Gap("uk-grid-large")
+        object Collapse : Gap("uk-grid-collapse")
 
     }
 
-    object Divider : UIKitGrid("divider")
+    sealed class Column(classname: String) : UIKitGrid(classname) {
 
-    object MatchHeight : UIKitGrid("match")
-    object ItemMatchHeight : UIKitGrid("item-match")
+        object Small : Column("uk-grid-column-small")
+        object Medium : Column("uk-grid-column-medium")
+        object Large : Column("uk-grid-column-large")
+        object Collapse : Column("uk-grid-column-collapse")
 
+    }
+
+    sealed class Row(classname: String) : UIKitGrid(classname) {
+
+        object Small : Row("uk-grid-row-small")
+        object Medium : Row("uk-grid-row-medium")
+        object Large : Row("uk-grid-row-large")
+        object Collapse : Row("uk-grid-row-collapse")
+
+    }
+
+    object Divider : UIKitGrid("uk-grid-divider")
+
+    object MatchHeight : UIKitGrid("uk-grid-match")
+    object ItemMatchHeight : UIKitGrid("uk-grid-item-match")
+
+    class Custom internal constructor(override val otherAttrs: Map<String, String>) : UIKitGrid("uk-grid")
+
+    companion object : UIKitGrid("uk-grid") {
+        operator fun invoke(
+            margin: UIKitMargin? = null,
+            firstColumnClass: String? = null,
+            masonry: Boolean? = null,
+            parallax: UInt? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-grid") {
+                    margin to margin ?.classes ?.joinToString(" ")
+                    "first-column" to firstColumnClass
+                    "masonry" to masonry
+                    "parallax" to parallax
+                }
+            )
+        )
+    }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitIconnav.kt

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitIconnav(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Vertical : UIKitIconnav(arrayOf("uk-iconnav-vertical"))
+
+    companion object : UIKitIconnav(arrayOf("uk-iconnav"))
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLeader.kt

@@ -0,0 +1,28 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitLeader(
+    override val classes: Array<String>,
+    override val otherAttrs: Map<String, String>
+) : UIKitModifier {
+
+    class Custom(
+        otherAttrs: Map<String, String>
+    ) : UIKitLeader(arrayOf("uk-leader"), otherAttrs)
+
+    companion object : UIKitLeader(arrayOf("uk-leader"), emptyMap()) {
+        operator fun invoke(
+            media: String? = null,
+            fill: String? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-leader") {
+                    "fill" to fill
+                    "media" to media
+                }
+            )
+        )
+    }
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitList.kt

@@ -0,0 +1,46 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitList(
+    vararg classes: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classes as Array<String>
+
+    sealed class Style(vararg classes: String) : UIKitList(*classes) {
+
+        object Disc : Style("uk-list-disc")
+        object Circle : Style("uk-list-circle")
+        object Square : Style("uk-list-square")
+        object Decimal : Style("uk-list-decimal")
+        object Hyphen : Style("uk-list-hyphen")
+
+    }
+
+    sealed class Size(vararg classes: String) : UIKitList(*classes) {
+
+        object Large : Size("uk-list-large")
+        object Collapse : Size("uk-list-collapse")
+
+    }
+
+    sealed class Color(vararg classes: String) : UIKitList(*classes) {
+
+        object Muted : Color("uk-list-muted")
+        object Emphasis : Color("uk-list-emphasis")
+        object Primary : Color("uk-list-primary")
+        object Secondary : Color("uk-list-secondary")
+        companion object {
+            val Bullet = UIKitList.Bullet
+        }
+
+    }
+
+    object Bullet: UIKitList("uk-list-bullet")
+
+    object Divider: UIKitList("uk-list-divider")
+
+    object Striped: UIKitList("uk-list-striped")
+
+    companion object : UIKitList("uk-list")
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitModifier.kt

@@ -1,6 +1,9 @@
 package dev.inmo.jsuikit.modifiers
 
+import dev.inmo.jsuikit.utils.Attrs
 import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
 
 interface UIKitModifier {
     val classes: Array<String>
@@ -15,3 +18,16 @@ fun AttrsScope<*>.include(vararg container: UIKitModifier?) {
         it ?.otherAttrs ?.let { attrs -> attrs.forEach { (k, v) -> attr(k, v) } }
     }
 }
+
+fun <T : Element> UIKitModifier.asAttributesBuilder(): AttrBuilderContext<T> = {
+    include(this@asAttributesBuilder)
+}
+operator fun UIKitModifier.plus(other: UIKitModifier): UIKitModifier = UIKitCustom(
+    classes + other.classes,
+    otherAttrs + other.otherAttrs
+)
+fun <T: Element> UIKitModifier?.builder() = Attrs<T>(this).builder
+fun <T: Element> Array<out UIKitModifier?>.builder() = Attrs<T>(*this).builder
+inline fun <T: Element> attrsBuilder(vararg modifiers: UIKitModifier?) = modifiers.builder<T>()
+@JsName("plusBuilder")
+operator fun <T: Element> UIKitModifier?.plus(other: UIKitModifier?): AttrBuilderContext<T> = Attrs<T>(this@plus, other).builder

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt

@@ -14,6 +14,8 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
 
     object Center : UIKitNav("uk-nav-center")
 
+    object Sub : UIKitNav("uk-nav-sub")
+
     companion object : UIKitNav("uk-nav") {
         val SubNav = UIKitSubNav
     }

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt

@@ -1,17 +1,86 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitNavbar(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-navbar-$suffix")
+import dev.inmo.jsuikit.types.Dropdown
+import dev.inmo.jsuikit.utils.*
 
-    object Transparent : UIKitNavbar("transparent")
-    sealed class Dropdown(suffix: String?) : UIKitNavbar("dropdown${suffix ?.let { "-$it" } ?: ""}") {
+sealed class UIKitNavbar(vararg classes: String) : UIKitModifier {
+    override val classes: Array<String> = classes as Array<String>
+
+    object Transparent : UIKitNavbar("uk-navbar-transparent")
+    object Container : UIKitNavbar("uk-navbar-container")
+    sealed class Dropdown(suffix: String?) : UIKitNavbar("uk-navbar-dropdown${suffix ?.let { "-$it" } ?: ""}") {
         object Nav : Dropdown("nav")
 
+        sealed class Width(suffix: String) : Dropdown(suffix) {
+            object Two : Width("width-2")
+            object Three : Width("width-3")
+            object Four : Width("width-4")
+            object Five : Width("width-5")
+        }
+
         companion object : Dropdown(null)
     }
-    object Item : UIKitNavbar("item")
+    sealed class Alignment(val suffix: String) : UIKitNavbar("uk-navbar-$suffix") {
+        object Left : Alignment("left")
+        sealed class Center(suffix: String) : Alignment(suffix) {
+            object Left : Center("center-left")
+            object Right : Center("center-right")
 
-    companion object {
+            companion object : Center("center")
+        }
+        object Right : Alignment("right")
+    }
+    object Item : UIKitNavbar("uk-navbar-item")
+    object Nav : UIKitNavbar("uk-navbar-nav")
+    object Subtitle : UIKitNavbar("uk-navbar-subtitle")
+    object Toggle : UIKitNavbar("uk-navbar-toggle")
+    object Sticky : UIKitNavbar("uk-navbar-sticky")
+
+    class Component internal constructor(
+        override val otherAttrs: Map<String, String>
+    ) : UIKitNavbar(*UIKitNavbar.classes)
+
+    companion object : UIKitNavbar("uk-navbar") {
         val Logo = UIKitUtility.Logo
+
+        operator fun invoke(
+            align: String?,
+            mode: String? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component {
+            return Component(
+                mapOf(
+                    buildAttribute(UIKitNavbar.classes.first()) {
+                        "align" to align
+                        "mode" to mode
+                        "delay-show" to delayShow
+                        "delay-hide" to delayHide
+                        "boundary" to boundary
+                        "boundary-align" to boundaryAlign
+                        "offset" to offset
+                        "dropbar" to dropbar
+                        "duration" to duration
+                    }
+                )
+            )
+        }
+
+        operator fun invoke(
+            align: Alignment? = null,
+            mode: UIKitDropdown.Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component = invoke(align ?.suffix, mode ?.name, delayShow, delayHide, boundary, boundaryAlign, offset, dropbar, duration)
     }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitPadding.kt

@@ -8,7 +8,10 @@ sealed class UIKitPadding(suffix: String?) : UIKitModifier {
         object Small : Size("small")
         object Large : Size("large")
 
-        companion object : Size(null)
+        companion object : Size(null) {
+            val Default
+                get() = this
+        }
 
     }
 
@@ -25,5 +28,6 @@ sealed class UIKitPadding(suffix: String?) : UIKitModifier {
 
     }
 
+    companion object : Size(null)
 
 }

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSection.kt

@@ -0,0 +1,23 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitSection(vararg classes: String) : UIKitModifier {
+    override val classes: Array<String> = classes as Array<String>
+
+    sealed class Style(suffix: String) : UIKitSection("uk-section-$suffix") {
+        object Default : Style("default")
+        object Muted : Style("muted")
+        object Primary : Style("primary")
+        object Secondary : Style("secondary")
+    }
+
+    sealed class Size(suffix: String) : UIKitSection("uk-section-$suffix") {
+        object XSmall : Size("xsmall")
+        object Small : Size("small")
+        object Large : Size("large")
+        object XLarge : Size("xlarge")
+    }
+
+    object Overlap : UIKitSection("uk-section-overlap")
+
+    companion object : UIKitSection("uk-section")
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSticky.kt

@@ -0,0 +1,47 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.jetbrains.compose.web.css.CSSUnitLengthOrPercentage
+import org.jetbrains.compose.web.css.CSSUnitValueTyped
+
+class UIKitSticky(
+    position: Position? = null,
+    start: String? = null,
+    end: String? = null,
+    offset: CSSUnitValueTyped<CSSUnitLengthOrPercentage>? = null,
+    overflowFlip: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    classForActiveItems: String? = null,
+    classForInactiveItems: String? = null,
+    showOnUp: Boolean? = null,
+    media: String? = null,
+    targetOffset: CSSUnitValueTyped<CSSUnitLengthOrPercentage>? = null
+) : UIKitModifier {
+    override val otherAttrs: Map<String, String> = mapOf(
+        buildAttribute("uk-sticky") {
+            "position" to position ?.name
+            "start" to start
+            "end" to end
+            "offset" to offset ?.toString()
+            "overflow-flip" to overflowFlip
+            "animation" to animation
+            "cls-active" to classForActiveItems
+            "cls-inactive" to classForInactiveItems
+            "show-on-up" to showOnUp
+            "media" to media
+            "target-offset" to targetOffset ?.toString()
+        }
+    )
+
+    sealed interface Position {
+        val name: String
+        object Top : Position {
+            override val name: String
+                get() = "top"
+        }
+        object Bottom : Position {
+            override val name: String
+                get() = "bottom"
+        }
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitTab.kt

@@ -0,0 +1,51 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.jetbrains.compose.web.css.selectors.CSSSelector
+import kotlin.time.Duration
+
+sealed class UIKitTab(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    sealed class Position(
+        classes: Array<String> = emptyArray(),
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitTab(classes, otherAttrs) {
+        object Bottom : Position(arrayOf("uk-tab-bottom"))
+        object Left : Position(arrayOf("uk-tab-left"))
+        object Right : Position(arrayOf("uk-tab-right"))
+    }
+
+    class Custom(
+        connect: CSSSelector? = null,
+        toggle: CSSSelector? = null,
+        active: Int? = null,
+        animationsIn: Array<UIKitAnimation>? = null,
+        animationsOut: Array<UIKitAnimation>? = null,
+        animationDuration: Duration? = null,
+        swiping: Boolean? = null,
+        media: String? = null
+    ) : UIKitTab(
+        arrayOf("uk-tab"),
+        mapOf(
+            buildAttribute("uk-tab") {
+                "connect" to connect
+                "toggle" to toggle
+                "active" to active
+                "animation" to (
+                    (animationsIn ?.let {
+                        it.joinToString(" ") { it.name }
+                    } ?: "") + (animationsOut ?.let {
+                        it.joinToString(" ", ",") { it.name }
+                    } ?: "")
+                ).takeIf { it.isNotBlank() }
+                "duration" to animationDuration
+                "swiping" to swiping
+                "media" to media
+            }
+        )
+    )
+
+    companion object : UIKitTab(arrayOf("uk-tab"), mapOf("uk-tab" to ""))
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitToggle.kt

@@ -38,7 +38,7 @@ sealed class UIKitToggle(
 
     class Custom internal constructor(otherAttrs: Map<String, String>) : UIKitToggle(otherAttrs = otherAttrs)
 
-    companion object {
+    companion object : UIKitToggle(otherAttrs = mapOf("uk-toggle" to "")) {
         operator fun invoke(
             target: String? = null,
             mode: Mode? = null,

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt

@@ -38,7 +38,10 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
         object Width : Responsive("width")
         object Height : Responsive("height")
     }
-    object PreserveWidth : UIKitUtility("uk-preserve-width")
+    sealed class Preserve(suffix: String) : UIKitUtility("uk-preserve-$suffix") {
+        object Width : Preserve("width")
+        object Color : Preserve("color")
+    }
 
     sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") {
         object Rounded : Border("rounded")
@@ -112,4 +115,8 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
 
     object Open : UIKitUtility("uk-open")
     object Link : UIKitUtility("uk-link")
+
+    companion object {
+        val PreserveWidth = Preserve.Width
+    }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/types/Dropdown.kt

@@ -0,0 +1,44 @@
+package dev.inmo.jsuikit.types
+
+import dev.inmo.jsuikit.modifiers.UIKitAnimation
+import dev.inmo.jsuikit.modifiers.UIKitDropdown
+import dev.inmo.jsuikit.utils.*
+
+external interface Dropdown {
+    fun show()
+    fun hide(delay: Boolean = definedExternally)
+    fun hide(delay: Milliseconds)
+}
+
+data class DropdownOptions(
+    private val toggle: String? = null,
+    private val pos: UIKitDropdown.Position? = null,
+    private val mode: UIKitDropdown.Mode? = null,
+    private val delayShow: Milliseconds? = null,
+    private val delayHide: Milliseconds? = null,
+    private val boundary: String? = null,
+    private val boundaryAlign: Boolean? = null,
+    private val flip: UIKitDropdown.Flip? = null,
+    private val offset: Int? = null,
+    private val animation: UIKitAnimation? = null,
+    private val duration: Milliseconds? = null,
+) {
+    fun includeParameters(parametersBuilder: ParametersBuilder) {
+        with(parametersBuilder) {
+            "toggle" to toggle
+            "pos" to pos
+            "mode" to mode
+            "delayShow" to delayShow
+            "delayHide" to delayHide
+            "boundary" to boundary
+            "boundaryAlign" to boundaryAlign
+            "flip" to flip
+            "offset" to offset
+            "animation" to animation
+            "duration" to duration
+        }
+    }
+    fun parameters() = buildParametersWithoutNulls {
+        includeParameters(this)
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKit.kt

@@ -13,4 +13,7 @@ external interface UIKit {
 
     fun modal(element: Element): UIKitDialog
     fun modal(selector: String): UIKitDialog?
+
+    fun dropdown(element: Element, options: DropdownOptions = definedExternally): Dropdown
+    fun dropdown(selector: String, options: DropdownOptions = definedExternally): Dropdown?
 }

src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributeBuilder.kt

@@ -2,26 +2,24 @@ package dev.inmo.jsuikit.utils
 
 class AttributeBuilder (
     val attributeName: String,
-    val skipNullValues: Boolean = true,
-    private val parametersPreset: MutableMap<String, String?> = mutableMapOf()
+    val parametersBuilder: ParametersBuilder
 ) {
-
-    fun add(k: String, v: Any? = null) {
-        if (v != null || !skipNullValues) {
-            parametersPreset[k] = v ?.toString()
-        }
+    fun build(): Pair<String, String> = parametersBuilder.build().run {
+        Pair(
+            attributeName, toList().joinToString(";") {
+                "${it.first}${it.second ?.let { ": $it" } ?: ""}"
+            }
+        )
     }
-    infix fun String.to(value: Any?) = add(this, value)
-    operator fun String.unaryPlus() = add(this, null)
-
-    fun build(): Pair<String, String> = Pair(
-        attributeName, parametersPreset.toList().joinToString(";") {
-            "${it.first}${it.second ?.let { ": $it" } ?: ""}"
-        }
-    )
 }
 
-inline fun buildAttribute(attributeName: String, skipNullValues: Boolean = true, block: AttributeBuilder.() -> Unit) = AttributeBuilder(
+inline fun buildAttribute(
+    attributeName: String,
+    skipNullValues: Boolean = true,
+    block: ParametersBuilder.() -> Unit
+) = AttributeBuilder(
     attributeName,
-    skipNullValues
-).apply(block).build()
+    ParametersBuilder(skipNullValues)
+).apply {
+    parametersBuilder.block()
+}.build()

src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributesCollection.kt

@@ -3,7 +3,9 @@ package dev.inmo.jsuikit.utils
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.attributes.HtmlAttrMarker
 import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLInputElement
 

src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttrsWithContentBuilder.kt

@@ -0,0 +1,32 @@
+package dev.inmo.jsuikit.utils
+
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.Element
+
+typealias AttrsWithContentBuilder<T> = Pair<Attrs<T>, ContentBuilder<T>>
+
+@Suppress("NOTHING_TO_INLINE")
+inline fun <T : Element> AttrsWithContentBuilder(
+    vararg modifiers: UIKitModifier?,
+    noinline attrs: AttrsScope<T>.() -> Unit = {},
+    noinline builder: ContentBuilder<T>
+) = AttrsWithContentBuilder(
+    Attrs(*modifiers, attrs = attrs),
+    builder
+)
+
+@Suppress("NOTHING_TO_INLINE")
+inline fun <T : Element> AttrsWithContentBuilder(attrs: Attrs<T>) = AttrsWithContentBuilder(
+    attrs
+) {}
+
+inline val <T : Element> AttrsWithContentBuilder<T>.attrs
+    get() = first
+
+inline val <T : Element> AttrsWithContentBuilder<T>.attributesBuilderContext
+    get() = attrs.builder
+
+inline val <T : Element> AttrsWithContentBuilder<T>.builder
+    get() = second

src/jsMain/kotlin/dev/inmo/jsuikit/utils/Dlist.kt

@@ -1,55 +0,0 @@
-package dev.inmo.jsuikit.utils
-
-import androidx.compose.runtime.Composable
-import kotlinx.browser.document
-import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.*
-
-private object DListElementBuilder : ElementBuilder<HTMLDListElement> {
-    private val el: Element by lazy { document.createElement("dl") }
-    override fun create(): HTMLDListElement = el.cloneNode() as HTMLDListElement
-}
-
-private object DTermElementBuilder : ElementBuilder<HTMLElement> {
-    private val el: Element by lazy { document.createElement("dt") }
-    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
-}
-
-private object DDescriptionElementBuilder : ElementBuilder<HTMLElement> {
-    private val el: Element by lazy { document.createElement("dd") }
-    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
-}
-
-@Composable
-fun DList(
-    attrs: AttrBuilderContext<HTMLDListElement>? = null,
-    content: ContentBuilder<HTMLDListElement>? = null
-) {
-    TagElement(
-        DListElementBuilder,
-        attrs,
-        content
-    )
-}
-@Composable
-fun DTerm(
-    attrs: AttrBuilderContext<HTMLElement>? = null,
-    content: ContentBuilder<HTMLElement>? = null
-) {
-    TagElement(
-        DTermElementBuilder,
-        attrs,
-        content
-    )
-}
-@Composable
-fun DDescription(
-    attrs: AttrBuilderContext<HTMLElement>? = null,
-    content: ContentBuilder<HTMLElement>? = null
-) {
-    TagElement(
-        DDescriptionElementBuilder,
-        attrs,
-        content
-    )
-}

src/jsMain/kotlin/dev/inmo/jsuikit/utils/OptionallyDraw.kt

@@ -4,13 +4,19 @@ import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.dom.ContentBuilder
 import org.w3c.dom.Element
 
+@Composable
+inline fun optionallyDraw (
+    vararg bools: Boolean,
+    whatToDraw: @Composable () -> Unit
+) {
+    if (bools.any { it }) {
+        whatToDraw()
+    }
+}
+
 @Composable
 inline fun <T : Element> optionallyDraw (
     attrs: Attrs<T>? = null,
     noinline contentBuilder: ContentBuilder<T>? = null,
     whatToDraw: @Composable () -> Unit
-) {
-    if (attrs != null || contentBuilder != null) {
-        whatToDraw()
-    }
-}
+) = optionallyDraw(attrs != null || contentBuilder != null, whatToDraw = whatToDraw)

src/jsMain/kotlin/dev/inmo/jsuikit/utils/ParametersBuilder.kt

@@ -0,0 +1,42 @@
+package dev.inmo.jsuikit.utils
+
+import dev.inmo.jsuikit.modifiers.AttributeValue
+
+
+class ParametersBuilder(
+    val skipNullValues: Boolean = true,
+    private val parameters: MutableMap<String, String?> = mutableMapOf()
+) {
+    fun add(k: String, v: Any? = null) {
+        when {
+            v is AttributeValue -> parameters[k] = v.name
+            v == null && skipNullValues -> return
+            else -> parameters[k] = v ?.toString()
+        }
+    }
+    infix fun String.to(value: Any?) = add(this, value)
+    operator fun String.unaryPlus() = add(this, null)
+
+    operator fun Map<String, String?>.unaryPlus() = forEach {
+
+    }
+
+    fun build() = parameters.toMap()
+    fun buildNotNullable() = parameters.mapNotNull { (k, v) ->
+        if (v != null) {
+            Pair(k, v)
+        } else {
+            null
+        }
+    }.toMap()
+}
+
+fun buildParameters(
+    skipNullValues: Boolean = true,
+    block: ParametersBuilder.() -> Unit
+) = ParametersBuilder(skipNullValues).apply(block).build()
+
+fun buildParametersWithoutNulls(
+    skipNullValues: Boolean = true,
+    block: ParametersBuilder.() -> Unit
+) = ParametersBuilder(skipNullValues).apply(block).buildNotNullable()