CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

Compose Multiplatform foundation library for building web UIs with type-safe HTML DSL, CSS-in-Kotlin, and event handling, compiled for WebAssembly/JavaScript target

—

Pending
Overview
Eval results
Files

html-attributes.mddocs/

HTML Attributes

Comprehensive attribute system supporting global HTML attributes and element-specific attributes with type safety, proper scoping, and integration with Compose's reactive system.

Core Imports

import androidx.compose.runtime.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.css.*

Capabilities

Core Attribute System

Base interfaces and types for attribute management with type-safe scoping per element type.

/**
 * Main interface for element attributes with type safety per element
 */
interface AttrsScope<TElement> {
    // Core attribute functions defined below
}

/**
 * Implementation of attributes scope
 */
class AttrsScopeBuilder<TElement> : AttrsScope<TElement>

/**
 * Type alias for attribute builder context
 */
typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit

Global HTML Attributes

Attributes available on all HTML elements providing common functionality.

/**
 * Set element ID attribute
 */
fun AttrsScope<*>.id(value: String)

/**
 * Set CSS classes using vararg strings
 */
fun AttrsScope<*>.classes(vararg classes: String)

/**
 * Set CSS classes from a collection
 */
fun AttrsScope<*>.classes(classes: Collection<String>)

/**
 * Set hidden attribute to hide element
 */
fun AttrsScope<*>.hidden()

/**
 * Set title attribute for tooltips
 */
fun AttrsScope<*>.title(value: String)

/**
 * Set text direction attribute
 */
fun AttrsScope<*>.dir(value: DirType)

/**
 * Set draggable behavior
 */
fun AttrsScope<*>.draggable(value: Draggable)

/**
 * Set content editable state
 */
fun AttrsScope<*>.contentEditable(value: Boolean)

/**
 * Set language attribute
 */
fun AttrsScope<*>.lang(value: String)

/**
 * Set tab index for keyboard navigation
 */
fun AttrsScope<*>.tabIndex(value: Int)

/**
 * Set spell check behavior
 */
fun AttrsScope<*>.spellCheck(value: Boolean)

/**
 * Set input mode hint for virtual keyboards
 */
fun AttrsScope<*>.inputMode(value: String)
fun AttrsScope<*>.inputMode(value: InputMode)

Global Attribute Types:

enum class DirType {
    ltr, rtl, auto
}

enum class Draggable {
    True, False, Auto
}

enum class InputMode(val value: String) {
    None("none"),
    Text("text"),
    Decimal("decimal"),
    Numeric("numeric"),
    Tel("tel"),
    Search("search"),
    Email("email"),
    Url("url")
}

Usage Examples:

Div({
    id("main-container")
    classes("container", "full-width")
    title("Main content area")
    lang("en")
    dir(DirType.ltr)
}) {
    // Content
}

Button({
    tabIndex(1)
    draggable(Draggable.False)
    contentEditable(false)
}) {
    Text("Interactive Button")
}

Element References and Properties

Access to DOM elements and property manipulation with proper lifecycle management.

/**
 * Get reference to the DOM element with disposal effect
 */
fun <TElement> AttrsScope<TElement>.ref(
    effect: DisposableEffectScope.(TElement) -> DisposableEffectResult
)

/**
 * Set generic HTML attribute
 */
fun AttrsScope<*>.attr(attr: String, value: String)

/**
 * Set element property directly on DOM element
 */
fun <TElement, V> AttrsScope<TElement>.prop(
    update: (TElement, V) -> Unit, 
    value: V
)

Usage Examples:

Canvas({
    ref { canvas ->
        val context = canvas.getContext("2d") as CanvasRenderingContext2D
        context.fillStyle = "red"
        context.fillRect(0.0, 0.0, 100.0, 100.0)
        
        onDispose { 
            // Cleanup if needed
        }
    }
    
    // Custom attribute
    attr("data-canvas-id", "main-canvas")
    
    // Direct property access
    prop({ element, value -> element.width = value }, 800)
})

Form Attributes

Comprehensive form-related attributes supporting both controlled and uncontrolled patterns.

/**
 * Set input type
 */
fun AttrsScope<HTMLInputElement>.type(value: InputType<*>)

/**
 * Set controlled input value (triggers recomposition on change)
 */
fun AttrsScope<HTMLInputElement>.value(value: String)
fun AttrsScope<HTMLInputElement>.value(value: Number)
fun AttrsScope<HTMLInputElement>.value(value: Boolean)

/**
 * Set default value for uncontrolled inputs
 */
fun AttrsScope<HTMLInputElement>.defaultValue(value: String)

/**
 * Set checked state for checkboxes and radio buttons
 */
fun AttrsScope<HTMLInputElement>.checked(value: Boolean)

/**
 * Set default checked state for uncontrolled inputs
 */
fun AttrsScope<HTMLInputElement>.defaultChecked(value: Boolean)

/**
 * Set placeholder text
 */
fun AttrsScope<HTMLInputElement>.placeholder(value: String)

/**
 * Mark field as required
 */
fun AttrsScope<HTMLInputElement>.required()

/**
 * Set disabled state
 */
fun AttrsScope<HTMLInputElement>.disabled()

/**
 * Set read-only state
 */
fun AttrsScope<HTMLInputElement>.readOnly()

/**
 * Set auto-focus on page load
 */
fun AttrsScope<HTMLInputElement>.autoFocus()

/**
 * Set form field name
 */
fun AttrsScope<HTMLInputElement>.name(value: String)

/**
 * Set validation pattern (regex)
 */
fun AttrsScope<HTMLInputElement>.pattern(value: String)

/**
 * Set minimum value for numeric inputs
 */
fun AttrsScope<HTMLInputElement>.min(value: String)

/**
 * Set maximum value for numeric inputs
 */
fun AttrsScope<HTMLInputElement>.max(value: String)

/**
 * Set minimum text length
 */
fun AttrsScope<HTMLInputElement>.minLength(value: Int)

/**
 * Set maximum text length
 */
fun AttrsScope<HTMLInputElement>.maxLength(value: Int)

/**
 * Set numeric step for number inputs
 */
fun AttrsScope<HTMLInputElement>.step(value: Number)

/**
 * Set accepted file types for file inputs
 */
fun AttrsScope<HTMLInputElement>.accept(value: String)

/**
 * Allow multiple selection/files
 */
fun AttrsScope<HTMLInputElement>.multiple()

/**
 * Set input size (character width)
 */
fun AttrsScope<HTMLInputElement>.size(value: Int)

Input Types:

sealed class InputType<T>(val value: String)

object InputType {
    object Text : InputType<String>("text")
    object Password : InputType<String>("password")
    object Email : InputType<String>("email")
    object Url : InputType<String>("url")
    object Tel : InputType<String>("tel")
    object Search : InputType<String>("search")
    object Number : InputType<kotlin.Number>("number")
    object Range : InputType<kotlin.Number>("range")
    object Date : InputType<String>("date")
    object Time : InputType<String>("time")
    object Week : InputType<String>("week")
    object Month : InputType<String>("month")
    object DateTimeLocal : InputType<String>("datetime-local")
    object Checkbox : InputType<Boolean>("checkbox")
    object Radio : InputType<Boolean>("radio")
    object File : InputType<String>("file")
    object Hidden : InputType<String>("hidden")
    object Submit : InputType<Unit>("submit")
    object Reset : InputType<Unit>("reset")
    object Button : InputType<Unit>("button")
    object Image : InputType<Unit>("image")
    object Color : InputType<String>("color")
}

Usage Examples:

// Controlled text input
TextInput(
    value = inputValue,
    attrs = {
        placeholder("Enter your name")
        required()
        maxLength(50)
        onInput { event ->
            inputValue = event.value
        }
    }
)

// Number input with constraints
NumberInput(
    value = numberValue,
    attrs = {
        min("0")
        max("100")
        step(5)
        onInput { event ->
            numberValue = event.value.toIntOrNull() ?: 0
        }
    }
)

// File input
FileInput(
    attrs = {
        accept("image/*")
        multiple()
        onChange { event ->
            handleFileSelection(event.target.files)
        }
    }
)

Form Element Attributes

Attributes specific to form containers and form controls.

/**
 * Set form action URL
 */
fun AttrsScope<HTMLFormElement>.action(value: String)

/**
 * Set HTTP method for form submission
 */
fun AttrsScope<HTMLFormElement>.method(value: FormMethod)

/**
 * Set form encoding type
 */
fun AttrsScope<HTMLFormElement>.encType(value: FormEncType)

/**
 * Set form target
 */
fun AttrsScope<HTMLFormElement>.target(value: FormTarget)

/**
 * Disable form validation
 */
fun AttrsScope<HTMLFormElement>.noValidate()

/**
 * Set autocomplete behavior
 */
fun AttrsScope<HTMLInputElement>.autoComplete(value: Boolean)
fun AttrsScope<HTMLInputElement>.autoComplete(value: AutoComplete)

/**
 * Set button type
 */
fun AttrsScope<HTMLButtonElement>.type(value: ButtonType)

/**
 * Override form action for button
 */
fun AttrsScope<HTMLButtonElement>.formAction(value: String)

/**
 * Override form method for button
 */
fun AttrsScope<HTMLButtonElement>.formMethod(value: FormMethod)

/**
 * Override form target for button
 */
fun AttrsScope<HTMLButtonElement>.formTarget(value: FormTarget)

/**
 * Set label target element
 */
fun AttrsScope<HTMLLabelElement>.forId(value: String)

Form Attribute Types:

enum class FormMethod(val value: String) {
    Get("get"),
    Post("post")
}

enum class FormEncType(val value: String) {
    ApplicationXWwwFormUrlencoded("application/x-www-form-urlencoded"),
    MultipartFormData("multipart/form-data"),
    TextPlain("text/plain")
}

enum class FormTarget(val value: String) {
    Self("_self"),
    Blank("_blank"),
    Parent("_parent"),
    Top("_top")
}

enum class ButtonType(val value: String) {
    Submit("submit"),
    Reset("reset"),
    Button("button")
}

enum class AutoComplete(val value: String) {
    On("on"),
    Off("off"),
    Name("name"),
    Email("email"),
    Username("username"),
    CurrentPassword("current-password"),
    NewPassword("new-password")
    // ... many more autocomplete values
}

Link and Navigation Attributes

Attributes for links, navigation, and document relationships.

/**
 * Set link URL
 */
fun AttrsScope<HTMLAnchorElement>.href(value: String)

/**
 * Set link target
 */
fun AttrsScope<HTMLAnchorElement>.target(value: ATarget)

/**
 * Set download filename
 */
fun AttrsScope<HTMLAnchorElement>.download(value: String)

/**
 * Set link language
 */
fun AttrsScope<HTMLAnchorElement>.hreflang(value: String)

/**
 * Set link relationship
 */
fun AttrsScope<HTMLAnchorElement>.rel(value: String)

/**
 * Set link type
 */
fun AttrsScope<HTMLAnchorElement>.type(value: String)

Link Target Types:

enum class ATarget(val value: String) {
    Self("_self"),
    Blank("_blank"),
    Parent("_parent"),
    Top("_top")
}

Usage Examples:

A(
    href = "https://example.com",
    attrs = {
        target(ATarget.Blank)
        rel("noopener noreferrer")
        download("example-file.pdf")
    }
) {
    Text("Download Example")
}

Media Attributes

Attributes for media elements including images, audio, and video.

/**
 * Set media source URL
 */
fun AttrsScope<HTMLImageElement>.src(value: String)
fun AttrsScope<HTMLAudioElement>.src(value: String)
fun AttrsScope<HTMLVideoElement>.src(value: String)

/**
 * Set alternative text for images
 */
fun AttrsScope<HTMLImageElement>.alt(value: String)

/**
 * Set media dimensions
 */
fun AttrsScope<HTMLImageElement>.width(value: Int)
fun AttrsScope<HTMLImageElement>.height(value: Int)
fun AttrsScope<HTMLVideoElement>.width(value: Int)
fun AttrsScope<HTMLVideoElement>.height(value: Int)

/**
 * Set loading behavior
 */
fun AttrsScope<HTMLImageElement>.loading(value: Loading)

/**
 * Set media controls
 */
fun AttrsScope<HTMLAudioElement>.controls()
fun AttrsScope<HTMLVideoElement>.controls()

/**
 * Set autoplay behavior
 */
fun AttrsScope<HTMLAudioElement>.autoplay()
fun AttrsScope<HTMLVideoElement>.autoplay()

/**
 * Set loop behavior
 */
fun AttrsScope<HTMLAudioElement>.loop()
fun AttrsScope<HTMLVideoElement>.loop()

/**
 * Set muted state
 */
fun AttrsScope<HTMLAudioElement>.muted()
fun AttrsScope<HTMLVideoElement>.muted()

/**
 * Set poster image for video
 */
fun AttrsScope<HTMLVideoElement>.poster(value: String)

Media Attribute Types:

enum class Loading(val value: String) {
    Eager("eager"),
    Lazy("lazy")
}

Table Attributes

Attributes specific to table elements for data organization and accessibility.

/**
 * Set cell column span
 */
fun AttrsScope<HTMLTableCellElement>.colspan(value: Int)

/**
 * Set cell row span
 */
fun AttrsScope<HTMLTableCellElement>.rowspan(value: Int)

/**
 * Set header scope for accessibility
 */
fun AttrsScope<HTMLTableCellElement>.scope(value: Scope)

/**
 * Set column span for colgroup
 */
fun AttrsScope<HTMLTableColElement>.span(value: Int)

Table Attribute Types:

enum class Scope(val value: String) {
    Row("row"),
    Col("col"),
    Rowgroup("rowgroup"),
    Colgroup("colgroup")
}

Usage Examples:

Table {
    Thead {
        Tr {
            Th({ scope(Scope.Col) }) { Text("Name") }
            Th({ scope(Scope.Col) }) { Text("Age") }
            Th({ 
                scope(Scope.Col)
                colspan(2) 
            }) { Text("Contact") }
        }
    }
    Tbody {
        Tr {
            Td { Text("John") }
            Td { Text("25") }
            Td { Text("john@example.com") }
            Td { Text("555-1234") }
        }
    }
}

Style Integration

Integration between attributes and CSS styling systems.

/**
 * Set inline styles using CSS-in-Kotlin
 */
fun AttrsScope<*>.style(builder: StyleScope.() -> Unit)

/**
 * Set CSS classes from stylesheet
 */
fun AttrsScope<*>.classes(vararg classNames: String)

/**
 * Set raw style attribute
 */
fun AttrsScope<*>.style(value: String)

Usage Examples:

Div({
    // Type-safe inline styles
    style {
        backgroundColor(Color.lightblue)
        padding(16.px)
        borderRadius(8.px)
        hover {
            backgroundColor(Color.blue)
        }
    }
    
    // CSS classes
    classes("container", "elevated")
    
    // Raw CSS (not recommended)
    style("margin: 10px; color: red;")
}) {
    Text("Styled content")
}

Types

typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit

interface AttrsScope<TElement>
class AttrsScopeBuilder<TElement> : AttrsScope<TElement>

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

docs

css-styling.md

event-handling.md

form-controls.md

html-attributes.md

html-elements.md

index.md

tile.json