web: mark internal and experimental api in web-widgets (#1078)

* web: mark internal and experimental api in web-widgets

* web: mark internal and experimental api in web-widgets

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

web/integration-widgets/src/commonMain/kotlin/App.kt

@@ -2,16 +2,11 @@ package org.jetbrainsc.compose.common.demo
 
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.common.foundation.layout.Box
-import org.jetbrains.compose.common.ui.Modifier
-import org.jetbrains.compose.common.ui.size
-import org.jetbrains.compose.common.ui.background
-import org.jetbrains.compose.common.ui.padding
 import org.jetbrains.compose.common.ui.unit.dp
 import org.jetbrains.compose.common.core.graphics.Color
 import org.jetbrains.compose.common.foundation.layout.Row
 import org.jetbrains.compose.common.foundation.layout.Column
 import org.jetbrains.compose.common.foundation.layout.Arrangement
-import org.jetbrains.compose.common.ui.Alignment
 import org.jetbrains.compose.common.foundation.border
 import org.jetbrains.compose.common.material.Text
 import org.jetbrains.compose.common.ui.unit.em
@@ -23,7 +18,9 @@ import org.jetbrains.compose.common.foundation.layout.width
 import org.jetbrains.compose.common.foundation.clickable
 import org.jetbrains.compose.common.ui.draw.clip
 import jetbrains.compose.common.shapes.CircleShape
+import org.jetbrains.compose.common.ui.*
 
+@OptIn(ExperimentalComposeWebWidgetsApi::class)
 object LayoutSamples {
     @Composable
     fun TwoTexts() {

web/widgets/src/commonMain/kotlin/Alignment.kt

@@ -1,5 +1,6 @@
 package org.jetbrains.compose.common.ui
 
+@ExperimentalComposeWebWidgetsApi
 interface Alignment {
     interface Vertical : Alignment
     interface Horizontal : Alignment
@@ -11,9 +12,9 @@ interface Alignment {
         val CenterStart = object : Alignment {}
         val Center = object : Alignment {}
         val CenterEnd = object : Alignment {}
-        val BoottomStart = object : Alignment {}
-        val BoottomCenter = object : Alignment {}
-        val BoottomEnd = object : Alignment {}
+        val BottomStart = object : Alignment {}
+        val BottomCenter = object : Alignment {}
+        val BottomEnd = object : Alignment {}
 
         val Top = object : Alignment.Vertical {}
         val CenterVertically = object : Alignment.Vertical {}

web/widgets/src/commonMain/kotlin/Arrangement.kt

@@ -1,7 +1,13 @@
 package org.jetbrains.compose.common.foundation.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
+@ExperimentalComposeWebWidgetsApi
 object Arrangement {
+    @ExperimentalComposeWebWidgetsApi
     interface Horizontal
+
+    @ExperimentalComposeWebWidgetsApi
     interface Vertical
 
     val End = object : Horizontal {}

web/widgets/src/commonMain/kotlin/Color.kt

@@ -1,5 +1,8 @@
 package org.jetbrains.compose.common.core.graphics
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
+@ExperimentalComposeWebWidgetsApi
 public data class Color(val red: Int, val green: Int, val blue: Int) {
 
     companion object {

web/widgets/src/commonMain/kotlin/ExperimentalComposeWebWidgetsApi.kt

@@ -0,0 +1,4 @@
+package org.jetbrains.compose.common.ui
+
+@RequiresOptIn("This API is experimental and is likely to change in the future.")
+annotation class ExperimentalComposeWebWidgetsApi()

web/widgets/src/commonMain/kotlin/Modifier.kt

@@ -3,10 +3,14 @@ package org.jetbrains.compose.common.ui
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.core.graphics.Color
 
+@ExperimentalComposeWebWidgetsApi
 interface Modifier {
     open class Element : Modifier
     companion object : Element()
 }
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.background(color: Color): Modifier
+
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.padding(all: Dp): Modifier

web/widgets/src/commonMain/kotlin/layouts/box.kt

@@ -2,6 +2,8 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal expect fun BoxActual(modifier: Modifier, content: @Composable () -> Unit)

web/widgets/src/commonMain/kotlin/layouts/button.kt

@@ -2,9 +2,11 @@ package org.jetbrains.compose.common.material
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
-expect fun ButtonActual(
+@ExperimentalComposeWebWidgetsApi
+internal expect fun ButtonActual(
     modifier: Modifier,
     onClick: () -> Unit,
     content: @Composable () -> Unit

web/widgets/src/commonMain/kotlin/layouts/column.kt

@@ -2,6 +2,8 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal expect fun ColumnActual(modifier: Modifier, content: @Composable () -> Unit)

web/widgets/src/commonMain/kotlin/layouts/defaults/BoxDefault.kt

@@ -2,8 +2,10 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 fun Box(
     modifier: Modifier = Modifier.Companion,
     content: @Composable () -> Unit

web/widgets/src/commonMain/kotlin/layouts/defaults/ButtonDefault.kt

@@ -2,8 +2,10 @@ package org.jetbrains.compose.common.material
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 fun Button(
     modifier: Modifier = Modifier.Companion,
     onClick: () -> Unit,

web/widgets/src/commonMain/kotlin/layouts/defaults/ColumnDefault.kt

@@ -2,8 +2,10 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 fun Column(
     modifier: Modifier = Modifier.Companion,
     content: @Composable () -> Unit

web/widgets/src/commonMain/kotlin/layouts/defaults/ModifierDefault.kt

@@ -2,6 +2,7 @@ package org.jetbrains.compose.common.ui
 
 import org.jetbrains.compose.common.ui.unit.Dp
 
+@ExperimentalComposeWebWidgetsApi
 fun Modifier.size(size: Dp): Modifier {
     return size(size, size)
 }

web/widgets/src/commonMain/kotlin/layouts/defaults/RowDefault.kt

@@ -3,8 +3,10 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.common.ui.Alignment
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 fun Row(
     modifier: Modifier = Modifier.Companion,
     horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,

web/widgets/src/commonMain/kotlin/layouts/defaults/SliderDefault.kt

@@ -1,9 +1,11 @@
 package org.jetbrains.compose.common.material
 
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 fun Slider(
     value: Float,
     onValueChange: (Float) -> Unit = {},

web/widgets/src/commonMain/kotlin/layouts/defaults/TextDefault.kt

@@ -3,9 +3,11 @@ package org.jetbrains.compose.common.material
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.core.graphics.Color
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.TextUnit
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 fun Text(
     text: String,
     modifier: Modifier = Modifier.Companion,

web/widgets/src/commonMain/kotlin/layouts/row.kt

@@ -3,8 +3,10 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.common.ui.Alignment
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal expect fun RowActual(
     modifier: Modifier,
     horizontalArrangement: Arrangement.Horizontal,

web/widgets/src/commonMain/kotlin/layouts/shapes/shapes.kt

@@ -1,5 +1,9 @@
 package jetbrains.compose.common.shapes
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
+@ExperimentalComposeWebWidgetsApi
 interface Shape
 
+@ExperimentalComposeWebWidgetsApi
 object CircleShape : Shape

web/widgets/src/commonMain/kotlin/layouts/slider.kt

@@ -1,10 +1,12 @@
 package org.jetbrains.compose.common.material
 
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 
 @Composable
-expect fun SliderActual(
+@ExperimentalComposeWebWidgetsApi
+internal expect fun SliderActual(
     value: Float,
     onValueChange: (Float) -> Unit,
     valueRange: ClosedFloatingPointRange<Float>,

web/widgets/src/commonMain/kotlin/layouts/text.kt

@@ -3,10 +3,12 @@ package org.jetbrains.compose.common.material
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.core.graphics.Color
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.TextUnit
 
 @Composable
-expect fun TextActual(
+@ExperimentalComposeWebWidgetsApi
+internal expect fun TextActual(
     text: String,
     modifier: Modifier,
     color: Color,

web/widgets/src/commonMain/kotlin/modifiers/border.kt

@@ -2,6 +2,8 @@ package org.jetbrains.compose.common.foundation
 
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.core.graphics.Color
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.border(size: Dp, color: Color): Modifier

web/widgets/src/commonMain/kotlin/modifiers/clickable.kt

@@ -1,5 +1,7 @@
 package org.jetbrains.compose.common.foundation
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.clickable(onClick: () -> Unit): Modifier

web/widgets/src/commonMain/kotlin/modifiers/clip.kt

@@ -2,5 +2,7 @@ package org.jetbrains.compose.common.ui.draw
 
 import org.jetbrains.compose.common.ui.Modifier
 import jetbrains.compose.common.shapes.Shape
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.clip(shape: Shape): Modifier

web/widgets/src/commonMain/kotlin/modifiers/fillMaxHeight.kt

@@ -1,5 +1,7 @@
 package org.jetbrains.compose.common.foundation.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.fillMaxHeight(fraction: Float): Modifier

web/widgets/src/commonMain/kotlin/modifiers/fillMaxWidth.kt

@@ -1,5 +1,7 @@
 package org.jetbrains.compose.common.foundation.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.fillMaxWidth(): Modifier

web/widgets/src/commonMain/kotlin/modifiers/offset.kt

@@ -1,6 +1,8 @@
 package org.jetbrains.compose.common.foundation.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.Modifier
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.offset(x: Dp, y: Dp): Modifier

web/widgets/src/commonMain/kotlin/modifiers/onSizeChanged.kt

@@ -1,8 +1,10 @@
 package org.jetbrains.compose.common.ui.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.ui.unit.IntSize
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.onSizeChanged(
     onSizeChanged: (IntSize) -> Unit
 ): Modifier

web/widgets/src/commonMain/kotlin/modifiers/size.kt

@@ -2,4 +2,5 @@ package org.jetbrains.compose.common.ui
 
 import org.jetbrains.compose.common.ui.unit.Dp
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.size(width: Dp, height: Dp): Modifier

web/widgets/src/commonMain/kotlin/modifiers/width.kt

@@ -1,6 +1,8 @@
 package org.jetbrains.compose.common.foundation.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.Modifier
 
+@ExperimentalComposeWebWidgetsApi
 expect fun Modifier.width(size: Dp): Modifier

web/widgets/src/commonMain/kotlin/units/Dp.kt

@@ -1,3 +1,6 @@
 package org.jetbrains.compose.common.ui.unit
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
+@ExperimentalComposeWebWidgetsApi
 data class Dp(val value: Float)

web/widgets/src/commonMain/kotlin/units/IntSize.kt

@@ -1,3 +1,6 @@
 package org.jetbrains.compose.common.ui.unit
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
+@ExperimentalComposeWebWidgetsApi
 data class IntSize(val width: Int, val height: Int)

web/widgets/src/commonMain/kotlin/units/TextUnit.kt

@@ -1,11 +1,15 @@
 package org.jetbrains.compose.common.ui.unit
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
+@ExperimentalComposeWebWidgetsApi
 enum class TextUnitType {
     Unspecified,
     Em,
     Sp
 }
 
+@ExperimentalComposeWebWidgetsApi
 data class TextUnit(val value: Float, val unitType: TextUnitType) {
     companion object {
         val Unspecified = TextUnit(Float.NaN, TextUnitType.Unspecified)

web/widgets/src/commonMain/kotlin/units/unitConversion.kt

@@ -1,17 +1,24 @@
 package org.jetbrains.compose.common.ui.unit
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
+
 // TODO: this have to be in a separate package otherwise there's an error for in cross-module usage (for JVM target)
+@ExperimentalComposeWebWidgetsApi
 val Int.dp: Dp
     get() = Dp(this.toFloat())
 
+@ExperimentalComposeWebWidgetsApi
 val Int.em: TextUnit
     get() = TextUnit(toFloat(), TextUnitType.Em)
 
+@ExperimentalComposeWebWidgetsApi
 val Float.em: TextUnit
     get() = TextUnit(this, TextUnitType.Em)
 
+@ExperimentalComposeWebWidgetsApi
 val Int.sp: TextUnit
     get() = TextUnit(toFloat(), TextUnitType.Sp)
 
+@ExperimentalComposeWebWidgetsApi
 val Float.sp: TextUnit
     get() = TextUnit(this, TextUnitType.Sp)

web/widgets/src/jsMain/kotlin/Modifier.kt

@@ -9,12 +9,14 @@ import org.jetbrains.compose.web.css.Color.RGB
 import org.jetbrains.compose.common.internal.castOrCreate
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.background(color: Color): Modifier = castOrCreate().apply {
     add {
         backgroundColor(RGB(color.red, color.green, color.blue))
     }
 }
 
+@ExperimentalComposeWebWidgetsApi
 fun Modifier.asAttributeBuilderApplier(
     passThroughHandler: (AttrsBuilder<*>.() -> Unit)? = null
 ): AttrsBuilder<*>.() -> Unit =
@@ -32,6 +34,7 @@ fun Modifier.asAttributeBuilderApplier(
         st
     }
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.padding(all: Dp): Modifier = castOrCreate().apply {
     // yes, it's not a typo, what Modifier.padding does is actually adding margin
     add {

web/widgets/src/jsMain/kotlin/internal/ActualModifier.kt

@@ -1,9 +1,11 @@
 package org.jetbrains.compose.common.internal
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.web.css.StyleBuilder
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 
+@ExperimentalComposeWebWidgetsApi
 class ActualModifier : Modifier {
     val styleHandlers = mutableListOf<StyleBuilder.() -> Unit>()
     val attrHandlers = mutableListOf<AttrsBuilder<*>.() -> Unit>()
@@ -17,4 +19,5 @@ class ActualModifier : Modifier {
     }
 }
 
+@ExperimentalComposeWebWidgetsApi
 fun Modifier.castOrCreate(): ActualModifier = (this as? ActualModifier) ?: ActualModifier()

web/widgets/src/jsMain/kotlin/layouts/box.kt

@@ -2,10 +2,12 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.common.ui.asAttributeBuilderApplier
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal actual fun BoxActual(modifier: Modifier, content: @Composable () -> Unit) {
     Div(
         attrs = modifier.asAttributeBuilderApplier()

web/widgets/src/jsMain/kotlin/layouts/button.kt

@@ -2,9 +2,11 @@ package org.jetbrains.compose.common.material
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.dom.Button
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 actual fun ButtonActual(
     modifier: Modifier,
     onClick: () -> Unit,

web/widgets/src/jsMain/kotlin/layouts/column.kt

@@ -2,10 +2,12 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.ui.Styles
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal actual fun ColumnActual(modifier: Modifier, content: @Composable () -> Unit) {
     Div(
         attrs = {

web/widgets/src/jsMain/kotlin/layouts/row.kt

@@ -4,13 +4,16 @@ import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.common.ui.Alignment
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.ui.Styles
 
+@OptIn(ExperimentalComposeWebWidgetsApi::class)
 private fun Arrangement.Horizontal.asClassName() = when (this) {
     Arrangement.End -> Styles.composeWebArrangementHorizontalEnd
     else -> Styles.composeWebArrangementHorizontalStart
 }
 
+@OptIn(ExperimentalComposeWebWidgetsApi::class)
 private fun Alignment.Vertical.asClassName() = when (this) {
     Alignment.Top -> Styles.composeWebAlignmentVerticalTop
     Alignment.CenterVertically -> Styles.composeWebAlignmentVerticalCenter
@@ -18,6 +21,7 @@ private fun Alignment.Vertical.asClassName() = when (this) {
 }
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal actual fun RowActual(
     modifier: Modifier,
     horizontalArrangement: Arrangement.Horizontal,

web/widgets/src/jsMain/kotlin/layouts/slider.kt

@@ -1,12 +1,14 @@
 package org.jetbrains.compose.common.material
 
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.web.dom.Input
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.value
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 actual fun SliderActual(
     value: Float,
     onValueChange: (Float) -> Unit,

web/widgets/src/jsMain/kotlin/layouts/text.kt

@@ -7,6 +7,7 @@ import org.jetbrains.compose.web.ui.Styles
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.ui.asAttributeBuilderApplier
 import org.jetbrains.compose.common.core.graphics.Color
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.color
 import org.jetbrains.compose.web.css.fontSize
 import org.jetbrains.compose.web.css.Color.RGB
@@ -16,7 +17,8 @@ import org.jetbrains.compose.web.css.em
 import org.jetbrains.compose.web.css.px
 
 @Composable
-actual fun TextActual(
+@ExperimentalComposeWebWidgetsApi
+internal actual fun TextActual(
     text: String,
     modifier: Modifier,
     color: Color,

web/widgets/src/jsMain/kotlin/modifiers/border.kt

@@ -4,11 +4,13 @@ import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.core.graphics.Color
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.css.LineStyle
 import org.jetbrains.compose.web.css.border
 import org.jetbrains.compose.web.css.Color.RGB
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.border(size: Dp, color: Color): Modifier = castOrCreate().apply {
     add {
         border(size.value.px, LineStyle.Solid, RGB(color.red, color.green, color.blue))

web/widgets/src/jsMain/kotlin/modifiers/clickable.kt

@@ -2,7 +2,9 @@ package org.jetbrains.compose.common.foundation
 
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.clickable(onClick: () -> Unit): Modifier = castOrCreate().apply {
     addAttributeBuilder {
         onClick { onClick() }

web/widgets/src/jsMain/kotlin/modifiers/clip.kt

@@ -4,9 +4,11 @@ import org.jetbrains.compose.common.ui.Modifier
 import jetbrains.compose.common.shapes.Shape
 import jetbrains.compose.common.shapes.CircleShape
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.borderRadius
 import org.jetbrains.compose.web.css.percent
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.clip(shape: Shape): Modifier = castOrCreate().apply {
     when (shape) {
         CircleShape -> add {

web/widgets/src/jsMain/kotlin/modifiers/fillMaxHeight.kt

@@ -2,9 +2,11 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.height
 import org.jetbrains.compose.web.css.percent
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.fillMaxHeight(fraction: Float): Modifier = castOrCreate().apply {
     add {
         height((100 * fraction).percent)

web/widgets/src/jsMain/kotlin/modifiers/fillMaxWidth.kt

@@ -2,9 +2,11 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.width
 import org.jetbrains.compose.web.css.percent
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.fillMaxWidth(): Modifier = castOrCreate().apply {
     add {
         width(100.percent)

web/widgets/src/jsMain/kotlin/modifiers/offset.kt

@@ -3,10 +3,12 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.marginTop
 import org.jetbrains.compose.web.css.marginLeft
 import org.jetbrains.compose.web.css.px
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.offset(x: Dp, y: Dp): Modifier = castOrCreate().apply {
     add {
         marginLeft(x.value.px)

web/widgets/src/jsMain/kotlin/modifiers/onSizeChanged.kt

@@ -1,8 +1,10 @@
 package org.jetbrains.compose.common.ui.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.ui.unit.IntSize
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.onSizeChanged(
     onSizeChanged: (IntSize) -> Unit
 ): Modifier {

web/widgets/src/jsMain/kotlin/modifiers/size.kt

@@ -6,6 +6,7 @@ import org.jetbrains.compose.web.css.height
 import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.common.internal.castOrCreate
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.size(width: Dp, height: Dp): Modifier = castOrCreate().apply {
     add {
         width(width.value.px)

web/widgets/src/jsMain/kotlin/modifiers/width.kt

@@ -3,9 +3,11 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.css.width
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.width(size: Dp): Modifier = castOrCreate().apply {
     add {
         width(size.value.px)

web/widgets/src/jvmMain/kotlin/Alignment.kt

@@ -2,6 +2,7 @@ package org.jetbrains.compose.common.ui
 
 import androidx.compose.ui.Alignment as JAlignment
 
+@ExperimentalComposeWebWidgetsApi
 val Alignment.Vertical.implementation: JAlignment.Vertical
     get() = when (this) {
         Alignment.Top -> JAlignment.Top

web/widgets/src/jvmMain/kotlin/Arrangement.kt

@@ -1,7 +1,9 @@
 package org.jetbrains.compose.common.foundation.layout
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.foundation.layout.Arrangement as JArrangement
 
+@ExperimentalComposeWebWidgetsApi
 val Arrangement.Horizontal.implementation: JArrangement.Horizontal
     get() = when (this) {
         Arrangement.End -> JArrangement.End

web/widgets/src/jvmMain/kotlin/Color.kt

@@ -1,6 +1,8 @@
 package org.jetbrains.compose.common.core.graphics
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.ui.graphics.Color as JColor
 
+@ExperimentalComposeWebWidgetsApi
 val Color.implementation
     get() = JColor(red, green, blue)

web/widgets/src/jvmMain/kotlin/Modifier.kt

@@ -8,13 +8,16 @@ import org.jetbrains.compose.common.core.graphics.implementation
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.foundation.layout.padding
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.background(color: Color): Modifier = castOrCreate().apply {
     modifier = modifier.background(color.implementation)
 }
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.padding(all: Dp): Modifier = castOrCreate().apply {
     modifier = modifier.padding(all.implementation)
 }
 
+@ExperimentalComposeWebWidgetsApi
 val Modifier.implementation
     get() = castOrCreate().modifier

web/widgets/src/jvmMain/kotlin/internal/ActualModifier.kt

@@ -1,12 +1,15 @@
 package org.jetbrains.compose.common.internal
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.ui.Modifier as JModifier
 import org.jetbrains.compose.common.ui.Modifier
 
 private class ModifierElement : JModifier.Element
 
+@ExperimentalComposeWebWidgetsApi
 class ActualModifier : Modifier {
     var modifier: JModifier = ModifierElement()
 }
 
+@ExperimentalComposeWebWidgetsApi
 fun Modifier.castOrCreate(): ActualModifier = (this as? ActualModifier) ?: ActualModifier()

web/widgets/src/jvmMain/kotlin/layouts/box.kt

@@ -3,9 +3,11 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.ui.implementation
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.foundation.layout.Box as JBox
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal actual fun BoxActual(modifier: Modifier, content: @Composable () -> Unit) {
     JBox(modifier.implementation) {
         content.invoke()

web/widgets/src/jvmMain/kotlin/layouts/button.kt

@@ -2,11 +2,13 @@ package org.jetbrains.compose.common.material
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.implementation
 import androidx.compose.material.Button as JButton
 
 @Composable
-actual fun ButtonActual(
+@ExperimentalComposeWebWidgetsApi
+internal actual fun ButtonActual(
     modifier: Modifier,
     onClick: () -> Unit,
     content: @Composable () -> Unit

web/widgets/src/jvmMain/kotlin/layouts/column.kt

@@ -2,10 +2,12 @@ package org.jetbrains.compose.common.foundation.layout
 
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.foundation.layout.Column as JColumn
 import org.jetbrains.compose.common.ui.implementation
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal actual fun ColumnActual(modifier: Modifier, content: @Composable () -> Unit) {
     JColumn(modifier = modifier.implementation) {
         content.invoke()

web/widgets/src/jvmMain/kotlin/layouts/row.kt

@@ -1,13 +1,11 @@
 package org.jetbrains.compose.common.foundation.layout
 
-import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.*
 import androidx.compose.foundation.layout.Row as JRow
-import org.jetbrains.compose.common.ui.implementation
-import org.jetbrains.compose.common.ui.implementation
-import org.jetbrains.compose.common.ui.Alignment
 
 @Composable
+@ExperimentalComposeWebWidgetsApi
 internal actual fun RowActual(
     modifier: Modifier,
     horizontalArrangement: Arrangement.Horizontal,

web/widgets/src/jvmMain/kotlin/layouts/shapes/shapes.kt

@@ -1,8 +1,10 @@
 package jetbrains.compose.common.shapes
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.ui.graphics.Shape as JShape
 import androidx.compose.foundation.shape.CircleShape as JCircleShape
 
+@ExperimentalComposeWebWidgetsApi
 val Shape.implementation: JShape
     get() = when (this) {
         CircleShape -> JCircleShape

web/widgets/src/jvmMain/kotlin/layouts/slider.kt

@@ -1,12 +1,14 @@
 package org.jetbrains.compose.common.material
 
 import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.Modifier
 import androidx.compose.material.Slider as JSlider
 import org.jetbrains.compose.common.ui.implementation
 
 @Composable
-actual fun SliderActual(
+@ExperimentalComposeWebWidgetsApi
+internal actual fun SliderActual(
     value: Float,
     onValueChange: (Float) -> Unit,
     valueRange: ClosedFloatingPointRange<Float>,

web/widgets/src/jvmMain/kotlin/layouts/text.kt

@@ -6,11 +6,13 @@ import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.ui.implementation
 import org.jetbrains.compose.common.core.graphics.Color
 import org.jetbrains.compose.common.core.graphics.implementation
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.TextUnit
 import org.jetbrains.compose.common.ui.unit.implementation
 
 @Composable
-actual fun TextActual(
+@ExperimentalComposeWebWidgetsApi
+internal actual fun TextActual(
     text: String,
     modifier: Modifier,
     color: Color,

web/widgets/src/jvmMain/kotlin/modifiers/border.kt

@@ -7,7 +7,9 @@ import org.jetbrains.compose.common.internal.castOrCreate
 import org.jetbrains.compose.common.core.graphics.implementation
 import org.jetbrains.compose.common.ui.unit.implementation
 import androidx.compose.foundation.border
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.border(size: Dp, color: Color): Modifier = castOrCreate().apply {
     modifier = modifier.border(size.implementation, color.implementation)
 }

web/widgets/src/jvmMain/kotlin/modifiers/clickable.kt

@@ -3,7 +3,9 @@ package org.jetbrains.compose.common.foundation
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.foundation.clickable
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.clickable(onClick: () -> Unit): Modifier = castOrCreate().apply {
     modifier = modifier.clickable(onClick = onClick)
 }

web/widgets/src/jvmMain/kotlin/modifiers/clip.kt

@@ -5,7 +5,9 @@ import jetbrains.compose.common.shapes.Shape
 import jetbrains.compose.common.shapes.implementation
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.ui.draw.clip
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.clip(shape: Shape): Modifier = castOrCreate().apply {
     modifier = modifier.clip(shape.implementation)
 }

web/widgets/src/jvmMain/kotlin/modifiers/fillMaxHeight.kt

@@ -3,7 +3,9 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.foundation.layout.fillMaxHeight
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.fillMaxHeight(fraction: Float): Modifier = castOrCreate().apply {
     modifier = modifier.fillMaxHeight(fraction)
 }

web/widgets/src/jvmMain/kotlin/modifiers/fillMaxWidth.kt

@@ -3,7 +3,9 @@ package org.jetbrains.compose.common.foundation.layout
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.foundation.layout.fillMaxWidth
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.fillMaxWidth(): Modifier = castOrCreate().apply {
     modifier = modifier.fillMaxWidth()
 }

web/widgets/src/jvmMain/kotlin/modifiers/offset.kt

@@ -4,8 +4,10 @@ import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.foundation.layout.offset
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.implementation
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.offset(x: Dp, y: Dp): Modifier = castOrCreate().apply {
     modifier = modifier.offset(x.implementation, y.implementation)
 }

web/widgets/src/jvmMain/kotlin/modifiers/onSizeChanged.kt

@@ -4,7 +4,9 @@ import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.ui.unit.IntSize
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.ui.layout.onSizeChanged
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.onSizeChanged(
     onSizeChanged: (IntSize) -> Unit
 ): Modifier = castOrCreate().apply {

web/widgets/src/jvmMain/kotlin/modifiers/size.kt

@@ -3,9 +3,9 @@ package org.jetbrains.compose.common.ui
 import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.unit.implementation
 import androidx.compose.foundation.layout.size
-import org.jetbrains.compose.common.core.graphics.implementation
 import org.jetbrains.compose.common.internal.castOrCreate
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.size(width: Dp, height: Dp): Modifier = castOrCreate().apply {
     modifier = modifier.size(width.implementation, height.implementation)
 }

web/widgets/src/jvmMain/kotlin/modifiers/width.kt

@@ -4,8 +4,10 @@ import org.jetbrains.compose.common.ui.unit.Dp
 import org.jetbrains.compose.common.ui.Modifier
 import org.jetbrains.compose.common.internal.castOrCreate
 import androidx.compose.foundation.layout.width
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.common.ui.unit.implementation
 
+@ExperimentalComposeWebWidgetsApi
 actual fun Modifier.width(size: Dp): Modifier = castOrCreate().apply {
     modifier = modifier.width(size.implementation)
 }

web/widgets/src/jvmMain/kotlin/units/Dp.kt

@@ -1,6 +1,8 @@
 package org.jetbrains.compose.common.ui.unit
 
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import androidx.compose.ui.unit.Dp as JDp
 
+@ExperimentalComposeWebWidgetsApi
 val Dp.implementation: JDp
     get() = JDp(value)

web/widgets/src/jvmMain/kotlin/units/TextUnit.kt

@@ -3,7 +3,9 @@ package org.jetbrains.compose.common.ui.unit
 import androidx.compose.ui.unit.TextUnit as JTextUnit
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 
+@ExperimentalComposeWebWidgetsApi
 val TextUnit.implementation: JTextUnit
     get() = when (unitType) {
         TextUnitType.Em -> (value).em