diff --git a/templates/web-template/build.gradle.kts b/templates/web-template/build.gradle.kts
index 95d87d9bb3..0c77d19ec8 100644
--- a/templates/web-template/build.gradle.kts
+++ b/templates/web-template/build.gradle.kts
@@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins {
// __KOTLIN_COMPOSE_VERSION__
- kotlin("multiplatform") version "1.5.0"
+ kotlin("multiplatform") version "1.5.10"
// __LATEST_COMPOSE_RELEASE_VERSION__
- id("org.jetbrains.compose") version ("0.0.0-web-dev-13")
+ id("org.jetbrains.compose") version ("0.0.0-web-dev-14")
}
repositories {
diff --git a/tutorials/Web/Building_UI/README.md b/tutorials/Web/Building_UI/README.md
index 255c59da75..f0e614e30b 100644
--- a/tutorials/Web/Building_UI/README.md
+++ b/tutorials/Web/Building_UI/README.md
@@ -175,19 +175,20 @@ You can find a more detailed overview of the style DSL, as well as additional ex
### Runnable example
```kotlin
-import androidx.compose.web.elements.*
-import androidx.compose.web.attributes.*
-import androidx.compose.web.css.*
-import androidx.compose.web.renderComposable
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
fun main() {
renderComposable(rootElementId = "root") {
Div(
attrs = {
// specify attributes here
- },
- style = {
- // specify inline style here
+ style {
+ // specify inline style here
+ }
}
) {
Text("A text in
")
@@ -196,17 +197,16 @@ fun main() {
Input(
type = InputType.Text, // All InputTypes supported
value = "", // sets the input value
- attrs = {},
- style = {}
+ attrs = {}
)
Input(attrs = { type(InputType.Text) })
Text("Arbitrary text")
- Span(
- style = { color("red") } // inline style
- ) {
+ Span({
+ style { color("red") } // inline style
+ }) {
Text("Red text")
}
@@ -241,15 +241,15 @@ fun main() {
}
) { Text("Button") }
- Div(
- style = {
+ Div({
+ style {
display(DisplayStyle.Flex)
padding(20.px)
// custom property
property("font-family", value("Arial, Helvetica, sans-serif"))
}
- ) { Text("Text in Div with inline style") }
+ }) { Text("Text in Div with inline style") }
}
}
```
\ No newline at end of file
diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md
index 5412409360..670dee2e73 100644
--- a/tutorials/Web/Events_Handling/README.md
+++ b/tutorials/Web/Events_Handling/README.md
@@ -60,9 +60,9 @@ There are more event listeners supported out of a box. We plan to add the docume
```kotlin
import androidx.compose.runtime.*
-import androidx.compose.web.elements.*
-import androidx.compose.web.attributes.*
-import androidx.compose.web.renderComposable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
fun main() {
renderComposable(rootElementId = "root") {
diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md
index 8226a7f56f..b89d084ab6 100644
--- a/tutorials/Web/Getting_Started/README.md
+++ b/tutorials/Web/Getting_Started/README.md
@@ -93,13 +93,11 @@ kotlin {
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
-import androidx.compose.web.css.padding
-import androidx.compose.web.css.px
-import androidx.compose.web.elements.Button
-import androidx.compose.web.elements.Div
-import androidx.compose.web.elements.Span
-import androidx.compose.web.elements.Text
-import androidx.compose.web.renderComposable
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
fun main() {
var count: Int by mutableStateOf(0)
diff --git a/tutorials/Web/Style_Dsl/README.md b/tutorials/Web/Style_Dsl/README.md
index 2b971b797c..d6366f572c 100644
--- a/tutorials/Web/Style_Dsl/README.md
+++ b/tutorials/Web/Style_Dsl/README.md
@@ -10,15 +10,15 @@ In this tutorial we have a look at how to style the components using the Style D
You can declare inline styles via the `style` block of a component
``` kotlin
-Div(
- style = {
+Div({
+ style {
display(DisplayStyle.Flex)
padding(20.px)
// custom property (or not supported out of a box)
property("font-family", value("Arial, Helvetica, sans-serif"))
}
-) { /* content goes here */ }
+}) { /* content goes here */ }
```
In HTML, it will look like this:
@@ -164,11 +164,10 @@ object MyStyleSheet: StyleSheet() {
### Runnable example
```kotlin
-import androidx.compose.runtime.*
-import androidx.compose.web.elements.*
-import androidx.compose.web.attributes.*
-import androidx.compose.web.css.*
-import androidx.compose.web.renderComposable
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposable
object AppStylesheet : StyleSheet() {
val container by style { // container is a class
@@ -191,15 +190,15 @@ fun Container(content: @Composable () -> Unit) {
fun main() {
renderComposable(rootElementId = "root") {
- Div(
- style = {
+ Div({
+ style {
display(DisplayStyle.Flex)
padding(20.px)
// custom property (or not supported out of a box)
property("font-family", value("Arial, Helvetica, sans-serif"))
}
- ) { /* content goes here */ }
+ }) { /* content goes here */ }
Style(AppStylesheet)