### Install Komponent Plugin with Gradle Kotlin DSL

Source: https://komponent.sparky983.me/docs

This snippet shows how to apply the Komponent plugin in a Gradle build file using Kotlin DSL. Ensure you have a Kotlin/JS project set up before applying this plugin.

```gradle.kts
plugins {
    id("me.sparky983.komponent") version "0.2.0"
}
```

--------------------------------

### Implement Fallback Route in Komponent Router

Source: https://komponent.sparky983.me/docs/routing

This example shows how to implement a fallback route using the `Fallback` component in Komponent. This is useful for displaying a 'Page not found' message when no other routes match the current URL.

```kotlin
fun Html.MyApp() {
    Router {
        Fallback {
            text("Page not found")
        }
    }
}
```

--------------------------------

### Define Basic Client-Side Routes with Komponent Router

Source: https://komponent.sparky983.me/docs/routing

This example demonstrates how to define basic client-side routes using the `Router` and `Route` components in Komponent. Each `Route` component nested within `Router` corresponds to a distinct client-side page.

```kotlin
fun Html.MyApp() {
    Router {
        Route("/") {
            // render page at "/"
        }
    }
}
```

--------------------------------

### Install Komponent Router Dependency

Source: https://komponent.sparky983.me/docs/routing

This snippet shows how to add the Komponent router dependency to your project's build.gradle.kts file. It ensures that the necessary routing functionalities are available for your client-side application.

```kotlin
repositories {
    mavenCentral()
}

kotlin {
    sourceSets {
        jsMain.dependencies {
            implementation("me.sparky983.komponent:router:0.2.0")
        }
    }
}
```

--------------------------------

### Komponent Component with Button Props

Source: https://komponent.sparky983.me/docs/component

Illustrates how Komponent components can accept regular arguments, referred to as 'props', to customize their behavior and UI. This example uses an enum `ButtonKind` to define different button styles.

```kotlin
enum class ButtonKind {
    PRIMARY,
    SECONDARY
}

fun Html.Button(kind: ButtonKind) {
    when (kind) {
        PRIMARY -> button(className = "primary") {
            text("Primary")
        }
        SECONDARY -> button(className = "secondary") {
            text("Secondary")
        }
    }
}
```

--------------------------------

### Reference Element During Construction using Kotlin

Source: https://komponent.sparky983.me/docs/dom-manipulation

This example shows how to reference an HTML element within the function that creates it using Kotlin's `lateinit` keyword. It's useful for scenarios where an element needs to be accessed before its creation is fully complete, such as updating a signal based on input.

```kotlin
fun Html.NameInput() {
    val name = signal("")

    p {
        text(name { "Your name is $it" })
    }

    lateinit var input: HTMLInputElement
    input = input(
        placeholder = "Enter your name",
        onInput = {
            name.value = input.value
        }
    )
}
```

--------------------------------

### Create Ordered List (HTML)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

Generates an HTML <ol> element. It accepts various attributes and event handlers, including 'reversed' and 'start' for list customization. The function returns an HTMLOListElement.

```kotlin
fun Html.ol(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, reversed: Signal<Boolean>? = null, start: Signal<Int>? = null, type: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null, children: Children): HTMLOListElement
```

--------------------------------

### Mount a Komponent Component to the DOM

Source: https://komponent.sparky983.me/docs/component

Explains how to make a Komponent component visible on a page by mounting it to a DOM element, typically using `document.body!!`. The `main` function serves as the entry point.

```kotlin
fun main() {
    mount(document.body!!) {
        // Render the body here
        MyApp()
    }
}

fun MyApp() {
    // ...
}
```

--------------------------------

### Get Sublist from ListSignal (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-list-signal

Creates a new mutable list containing a portion of the original ListSignal, defined by start and end indices. Changes to the sublist affect the original list.

```Kotlin
open override fun subList( fromIndex: Int,  toIndex: Int): MutableList<E>
```

--------------------------------

### Get Subscription Canceled Status

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-subscription/canceled

Retrieves the canceled status of a subscription. This indicates whether the subscription is currently active or has been canceled.

```APIDOC
## GET /websites/komponent_sparky983_me/canceled

### Description
Retrieves the canceled status of a subscription. This indicates whether the subscription is currently active or has been canceled.

### Method
GET

### Endpoint
/websites/komponent_sparky983_me/canceled

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **canceled** (Boolean) - Indicates if the subscription is canceled. True if canceled, false otherwise.

#### Response Example
{
  "canceled": true
}
```

--------------------------------

### Access Elements in ListSignal (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-list-signal

Provides methods to get an element at a specific index. Also includes functions to find the index of an element, including the last occurrence.

```Kotlin
open operator override fun get(index: Int): E
open override fun indexOf(element: E): Int
open override fun lastIndexOf(element: E): Int
```

--------------------------------

### Create Text Node

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Provides two overloaded functions to create text nodes. One accepts a static String content, while the other accepts a Signal<String> for dynamic content that can be updated. Both functions are essential for rendering text within the HTML structure.

```kotlin
fun Html.text(content: String)
A text element with the given content.
```

```kotlin
fun Html.text(content: Signal<String>)
A dynamic text component that updates with the given content.
```

--------------------------------

### Get Context Value (context)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Retrieves a context value associated with a specific type T within the current scope. If the context is not found, it fails with a provided message.

```kotlin
inline fun <T : Any> context(message: String = "Context "): T
```

--------------------------------

### Render Dynamic Lists with For Component (Kotlin)

Source: https://komponent.sparky983.me/docs/reactivity

Shows how to use the `For` component with a `ListSignal` to render a dynamic list of elements. Each item in the list is rendered based on the provided lambda.

```kotlin
For(each = list) { user ->
    text("Name: ${user.name} Age: ${user.age}") 
}
```

--------------------------------

### HTML Anchor Element (a)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Creates an HTML anchor element (<a>). This element is used to link to other web pages or resources.

```APIDOC
## Html.a

### Description
Creates an HTML anchor element (<a>) with specified attributes and event handlers.

### Method
Not applicable (this is a function call, not an HTTP request).

### Endpoint
Not applicable.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```kotlin
// Example of creating an anchor element
val anchorElement = Html.a(
    href = Signal("https://example.com"),
    title = Signal("Visit Example.com")
) { Text("Click here") }
```

### Response
#### Success Response
- **HTMLAnchorElement**: The created anchor element.

#### Response Example
```html
<a href="https://example.com" title="Visit Example.com">Click here</a>
```
```

--------------------------------

### MutableSignal 'value' Property (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-mutable-signal

Demonstrates the 'value' property of the MutableSignal interface. This abstract, overridden property allows getting and setting the current value of the signal. It's a core feature for mutable signals.

```kotlin
abstract override val value: T
// To set the value:
// mutableSignal.value = newValue
```

--------------------------------

### onMount Event Handler

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Attaches a callback function to be executed when the element is mounted to the DOM.

```APIDOC
## onMount Event

### Description
Registers a function to be executed immediately after the element is added to the document's DOM.

### Method
`onMount(handler: () -> Unit)`

### Endpoint
N/A (This is an event handler attachment method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```kotlin
myElement.onMount { 
    println("Element has been mounted!") 
}
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Get Context Value (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/context

Retrieves the context value associated with the type `T` within the current scope. If no context value exists for the given type, it fails with a provided message. This function is generic and requires the type `T` to be non-nullable.

```kotlin
inline fun <T : Any> context(message: String = "Context "): T(source)
Gets context value associated with the type T in this scope, or fails with the given message.
#### Return
the context value
#### Since
0.1.0
#### Parameters
 _message_
the messages given that no context value exists for the given type
 _T_
the type of the context value
```

--------------------------------

### HTML Article Element (article)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html

Creates an article element (<article>) with various attributes and event handlers.

```APIDOC
## Html.article

### Description
Creates an article element (<article>) which represents a self-contained piece of content that is independently distributable or reusable.

### Method
POST (or equivalent function call in the framework)

### Endpoint
N/A (This is a function call within a framework)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **className** (Signal<String>?): Optional CSS class name for the element.
- **draggable** (Signal<String>?): Optional attribute to make the element draggable.
- **id** (Signal<String>?): Optional unique identifier for the element.
- **style** (Signal<String>?): Optional inline style for the element.
- **tabIndex** (Signal<Int>?): Optional tab order index for the element.
- **title** (Signal<String>?): Optional tooltip text for the element.
- **onBlur** (EventHandler<FocusEvent>?): Event handler for when the element loses focus.
- **onClick** (EventHandler<PointerEvent>?): Event handler for when the element is clicked.
- **onFocus** (EventHandler<FocusEvent>?): Event handler for when the element gains focus.
- **onFocusIn** (EventHandler<FocusEvent>?): Event handler for when focus enters the element.
- **onFocusOut** (EventHandler<FocusEvent>?): Event handler for when focus leaves the element.
- **onKeyDown** (EventHandler<KeyboardEvent>?): Event handler for when a key is pressed down.
- **onKeyUp** (EventHandler<KeyboardEvent>?): Event handler for when a key is released.
- **onLoad** (EventHandler<Event>?): Event handler for when the element finishes loading.
- **onMouseDown** (EventHandler<MouseEvent>?): Event handler for when a mouse button is pressed down.
- **onMouseEnter** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer enters the element.
- **onMouseLeave** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer leaves the element.
- **onMouseMove** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves over the element.
- **onMouseOut** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves out of the element.
- **onMouseover** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer is over the element.
- **onMouseUp** (EventHandler<MouseEvent>?): Event handler for when a mouse button is released.
- **onUnload** (EventHandler<Event>?): Event handler for when the element is unloaded.
- **onWheel** (EventHandler<WheelEvent>?): Event handler for when the mouse wheel is scrolled.
- **data** (Attributes?): Optional custom data attributes.
- **children** (Children): Content of the article element.

### Request Example
```kotlin
Html.article { Text("This is an independent piece of content.") }
```

### Response
#### Success Response (200)
Returns an `HTMLElement` representing the created article tag.

#### Response Example
```html
<article>This is an independent piece of content.</article>
```
```

--------------------------------

### Create and Use Reactive List Signals (Kotlin)

Source: https://komponent.sparky983.me/docs/reactivity

Explains how to create and use `ListSignal` for reactive lists, which can track mutations. This is necessary because standard `Signal<T>` cannot track list modifications.

```kotlin
data class User(val name: String, val age: Int)

val users = flowListOf(User(name = "Foo", age = 17))

button(onClick = { users.add(User(name = "Bar", age = 17)) }) {
    text("Add new user")
}
```

--------------------------------

### HTML Progress (progress)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Represents the progress of a task. Supports value and max attributes.

```APIDOC
## HTML Progress Element

### Description
Creates a progress bar (`<progress>`) element to indicate the progress of a task. Supports `value` and `max` attributes.

### Method
`Html.progress(...)`

### Endpoint
N/A (This is a client-side HTML element creation function)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```kotlin
progress(value = 75, max = 100)
```

### Response
#### Success Response (200)
Returns an `HTMLProgressElement` representing the progress bar.

#### Response Example
N/A (This function generates an HTML element, not a typical API response)
```

--------------------------------

### Create Input Element in HTML

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Generates an input element in HTML. This function is a placeholder and likely requires further implementation to define specific input types and behaviors. It returns an HTMLInputElement.

```kotlin
fun Html.input(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null): HTMLInputElement
```

--------------------------------

### Create HTML Anchor Element (a)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

Defines a function to create an HTML anchor element (`<a>`). It accepts numerous optional parameters for attributes like `className`, `id`, `style`, `draggable`, `tabIndex`, `title`, and `download`. It also supports various event handlers for mouse, keyboard, focus, and load events. The `href` attribute is mandatory. The function returns an `HTMLAnchorElement`.

```kotlin
fun Html.a(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, href: Signal<String>, download: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null, children: Children): HTMLAnchorElement
```

--------------------------------

### Handle Click Events in Komponent

Source: https://komponent.sparky983.me/docs/component

Demonstrates how to attach event listeners, such as `onClick`, to HTML tags within a Komponent component. This allows for interactive elements that respond to user actions.

```kotlin
fun Html.Button() {
    button(onClick = { println("You clicked!") }) {
        text("Click me")
    }
}
```

--------------------------------

### Focus Input on Mount using Kotlin

Source: https://komponent.sparky983.me/docs/dom-manipulation

This snippet demonstrates how to focus an input element when it is attached to the DOM using Komponent's `onMount` lifecycle event. It returns the underlying DOM element for imperative manipulation.

```kotlin
fun Html.NameInput() {
    val input = input(placeholder = "Enter your name")
    
    onMount {
        input.focus()
    }
}
```

--------------------------------

### Optional Reactivity for Component Props (Kotlin)

Source: https://komponent.sparky983.me/docs/reactivity

Shows how to define a component prop that accepts a `Signal<String>`, allowing it to be either a static string or a reactive signal. This provides flexibility in how component data is managed.

```kotlin
fun Html.Title(title: Signal<String>) {
    h1 {
        text(title)
    }
}

fun Html.MyBlog() {
    Title("My Blog")
    
    val title = signal("My Blog")
    
    Title(title)
}
```

--------------------------------

### HTML Paragraph (p)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Represents a paragraph of text. Supports standard HTML attributes and event handlers.

```APIDOC
## HTML Paragraph (P) Element

### Description
Creates a paragraph (`<p>`) element for text content. Supports common HTML attributes and event handlers.

### Method
`Html.p(...)`

### Endpoint
N/A (This is a client-side HTML element creation function)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```kotlin
p { 
    text("This is a paragraph of text.") 
}
```

### Response
#### Success Response (200)
Returns an `HTMLParagraphElement` representing the paragraph.

#### Response Example
N/A (This function generates an HTML element, not a typical API response)
```

--------------------------------

### Handle Lifecycle Events in Komponent

Source: https://komponent.sparky983.me/docs/component

Illustrates how to listen for component lifecycle events, specifically `onMount` and `onUnmount`, within Komponent. This is useful for managing resources associated with a component's presence in the DOM.

```kotlin
/*
All elements have two life cycle stages that can occur an indefinite amount of times:
  * Mounting
  * Unmounting

You can listen for them with `onMount` and `onUnmount` respectively. This is useful for managing resources.
*/
```

--------------------------------

### Compiler Integration for Signals in Kotlin

Source: https://komponent.sparky983.me/docs/reactivity

Explains how the Komponent Compiler allows functions accepting `Signal<T>` to be called with regular values. The compiler handles the necessary signal creation and subscription.

```kotlin
fun log(signal: Signal<String>) {
    signal.subscribe { println(it) }
}

log("Hello, world!") // "Hello, world!"
```

--------------------------------

### HTML Anchor Element (a)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html

Creates an anchor element (<a>) with various attributes and event handlers.

```APIDOC
## Html.a

### Description
Creates an anchor element (<a>) which is used to link documents together.

### Method
POST (or equivalent function call in the framework)

### Endpoint
N/A (This is a function call within a framework)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **className** (Signal<String>?): Optional CSS class name for the element.
- **draggable** (Signal<String>?): Optional attribute to make the element draggable.
- **id** (Signal<String>?): Optional unique identifier for the element.
- **style** (Signal<String>?): Optional inline style for the element.
- **tabIndex** (Signal<Int>?): Optional tab order index for the element.
- **title** (Signal<String>?): Optional tooltip text for the element.
- **href** (Signal<String>): Required URL to link to.
- **download** (Signal<String>?): Optional attribute to suggest a filename for downloaded content.
- **onBlur** (EventHandler<FocusEvent>?): Event handler for when the element loses focus.
- **onClick** (EventHandler<PointerEvent>?): Event handler for when the element is clicked.
- **onFocus** (EventHandler<FocusEvent>?): Event handler for when the element gains focus.
- **onFocusIn** (EventHandler<FocusEvent>?): Event handler for when focus enters the element.
- **onFocusOut** (EventHandler<FocusEvent>?): Event handler for when focus leaves the element.
- **onKeyDown** (EventHandler<KeyboardEvent>?): Event handler for when a key is pressed down.
- **onKeyUp** (EventHandler<KeyboardEvent>?): Event handler for when a key is released.
- **onLoad** (EventHandler<Event>?): Event handler for when the element finishes loading.
- **onMouseDown** (EventHandler<MouseEvent>?): Event handler for when a mouse button is pressed down.
- **onMouseEnter** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer enters the element.
- **onMouseLeave** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer leaves the element.
- **onMouseMove** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves over the element.
- **onMouseOut** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves out of the element.
- **onMouseover** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer is over the element.
- **onMouseUp** (EventHandler<MouseEvent>?): Event handler for when a mouse button is released.
- **onUnload** (EventHandler<Event>?): Event handler for when the element is unloaded.
- **onWheel** (EventHandler<WheelEvent>?): Event handler for when the mouse wheel is scrolled.
- **data** (Attributes?): Optional custom data attributes.
- **children** (Children): Content of the anchor element.

### Request Example
```kotlin
Html.a(
    href = Signal("https://example.com"),
    className = Signal("my-link")
) { Text("Click me") }
```

### Response
#### Success Response (200)
Returns an `HTMLAnchorElement` representing the created anchor tag.

#### Response Example
```html
<a class="my-link" href="https://example.com">Click me</a>
```
```

--------------------------------

### HTML Article Element (article)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Creates an HTML article element (<article>). This element represents a self-contained piece of content that is independently distributable or reusable.

```APIDOC
## Html.article

### Description
Creates an HTML article element (<article>) with specified attributes and event handlers.

### Method
Not applicable (this is a function call, not an HTTP request).

### Endpoint
Not applicable.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```kotlin
// Example of creating an article element
val articleElement = Html.article { Text("This is a blog post.") }
```

### Response
#### Success Response
- **HTMLElement**: The created article element.

#### Response Example
```html
<article>This is a blog post.</article>
```
```

--------------------------------

### Provide

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

Provides a context value to all children elements. This is useful for dependency injection or state management.

```APIDOC
## Provide

### Description
Provides the given context value for the context type to all children.

### Method
`Html.Provide<T : Any>(value: T, noinline children: Children)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```kotlin
// Example usage (assuming 'Html' is available in scope)
Html.Provide(value = "some context data") {
    // Children elements that can access the provided value
    span { text("Content within context") }
}
```

### Response
#### Success Response (200)
This function does not return a value directly but establishes a context for its children.

#### Response Example
N/A
```

--------------------------------

### Komponent Component with Children Prop

Source: https://komponent.sparky983.me/docs/component

Shows how to handle nested components or content within a Komponent component using the `Children` type as the last parameter. `Children` is a shorthand for `Html.() -> Unit`.

```kotlin
enum class ButtonKind {
    PRIMARY,
    SECONDARY
}

fun Html.Button(kind: ButtonKind, children: Children) {
    when (kind) {
        PRIMARY -> button(className = "primary") {
            children() 
        }
        SECONDARY -> button(className = "secondary") {
            children() 
        }
    }
}
```

--------------------------------

### Dynamic Component Rendering with Dynamic Component (Kotlin)

Source: https://komponent.sparky983.me/docs/reactivity

Demonstrates the `Dynamic` component, which rerenders its children whenever a provided `Signal` is updated. This is useful for scenarios where an entire component needs to be refreshed based on state changes.

```kotlin
fun Html.Tabs(tab: MutableSignal<Tab>) {
    button(onClick = { tab.value = Tab.FIRST }) { text("first") }
    button(onClick = { tab.value = Tab.SECOND }) { text("Second") } 

    Dynamic(tab) {
        when (it) {
            FIRST -> {}
            SECOND -> {}
        }
    }
}
```

--------------------------------

### Create HTML BRElement with Kotlin

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/br

This function generates an HTMLBRElement, which represents a line break in HTML. It accepts numerous optional parameters for attributes like 'className', 'id', 'style', and event handlers for various user interactions and lifecycle events. The 'source' parameter is an internal detail of the Komponent library.

```kotlin
fun Html.br( className: Signal<String>? = null,  draggable: Signal<String>? = null,  id: Signal<String>? = null,  style: Signal<String>? = null,  tabIndex: Signal<Int>? = null,  title: Signal<String>? = null,  onBlur: EventHandler<FocusEvent>? = null,  onClick: EventHandler<PointerEvent>? = null,  onFocus: EventHandler<FocusEvent>? = null,  onFocusIn: EventHandler<FocusEvent>? = null,  onFocusOut: EventHandler<FocusEvent>? = null,  onKeyDown: EventHandler<KeyboardEvent>? = null,  onKeyUp: EventHandler<KeyboardEvent>? = null,  onLoad: EventHandler<Event>? = null,  onMouseDown: EventHandler<MouseEvent>? = null,  onMouseEnter: EventHandler<MouseEvent>? = null,  onMouseLeave: EventHandler<MouseEvent>? = null,  onMouseMove: EventHandler<MouseEvent>? = null,  onMouseOut: EventHandler<MouseEvent>? = null,  onMouseover: EventHandler<MouseEvent>? = null,  onMouseUp: EventHandler<MouseEvent>? = null,  onUnload: EventHandler<Event>? = null,  onWheel: EventHandler<WheelEvent>? = null,  data: Attributes? = null): HTMLBRElement(source)
```

--------------------------------

### Create HTML Article Element (article)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

Facilitates the creation of an HTML article element (`<article>`). This function includes support for a wide range of optional attributes and event handlers, providing flexibility in defining article content and behavior. It returns an `HTMLElement`.

```kotlin
fun Html.article(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null, children: Children): HTMLElement
```

--------------------------------

### HTML Address Element (address)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html

Creates an address element (<address>) with various attributes and event handlers.

```APIDOC
## Html.address

### Description
Creates an address element (<address>) which typically contains contact information for the author/owner of a document or article.

### Method
POST (or equivalent function call in the framework)

### Endpoint
N/A (This is a function call within a framework)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **className** (Signal<String>?): Optional CSS class name for the element.
- **draggable** (Signal<String>?): Optional attribute to make the element draggable.
- **id** (Signal<String>?): Optional unique identifier for the element.
- **style** (Signal<String>?): Optional inline style for the element.
- **tabIndex** (Signal<Int>?): Optional tab order index for the element.
- **title** (Signal<String>?): Optional tooltip text for the element.
- **onBlur** (EventHandler<FocusEvent>?): Event handler for when the element loses focus.
- **onClick** (EventHandler<PointerEvent>?): Event handler for when the element is clicked.
- **onFocus** (EventHandler<FocusEvent>?): Event handler for when the element gains focus.
- **onFocusIn** (EventHandler<FocusEvent>?): Event handler for when focus enters the element.
- **onFocusOut** (EventHandler<FocusEvent>?): Event handler for when focus leaves the element.
- **onKeyDown** (EventHandler<KeyboardEvent>?): Event handler for when a key is pressed down.
- **onKeyUp** (EventHandler<KeyboardEvent>?): Event handler for when a key is released.
- **onLoad** (EventHandler<Event>?): Event handler for when the element finishes loading.
- **onMouseDown** (EventHandler<MouseEvent>?): Event handler for when a mouse button is pressed down.
- **onMouseEnter** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer enters the element.
- **onMouseLeave** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer leaves the element.
- **onMouseMove** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves over the element.
- **onMouseOut** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves out of the element.
- **onMouseover** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer is over the element.
- **onMouseUp** (EventHandler<MouseEvent>?): Event handler for when a mouse button is released.
- **onUnload** (EventHandler<Event>?): Event handler for when the element is unloaded.
- **onWheel** (EventHandler<WheelEvent>?): Event handler for when the mouse wheel is scrolled.
- **data** (Attributes?): Optional custom data attributes.
- **children** (Children): Content of the address element.

### Request Example
```kotlin
Html.address { Text("123 Main St, Anytown, USA") }
```

### Response
#### Success Response (200)
Returns an `HTMLElement` representing the created address tag.

#### Response Example
```html
<address>123 Main St, Anytown, USA</address>
```
```

--------------------------------

### HTML Bold Element (b)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html

Creates a bold element (<b>) with various attributes and event handlers.

```APIDOC
## Html.b

### Description
Creates a bold element (<b>) which is used to draw attention to a piece of text without conveying any extra importance.

### Method
POST (or equivalent function call in the framework)

### Endpoint
N/A (This is a function call within a framework)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **className** (Signal<String>?): Optional CSS class name for the element.
- **draggable** (Signal<String>?): Optional attribute to make the element draggable.
- **id** (Signal<String>?): Optional unique identifier for the element.
- **style** (Signal<String>?): Optional inline style for the element.
- **tabIndex** (Signal<Int>?): Optional tab order index for the element.
- **title** (Signal<String>?): Optional tooltip text for the element.
- **onBlur** (EventHandler<FocusEvent>?): Event handler for when the element loses focus.
- **onClick** (EventHandler<PointerEvent>?): Event handler for when the element is clicked.
- **onFocus** (EventHandler<FocusEvent>?): Event handler for when the element gains focus.
- **onFocusIn** (EventHandler<FocusEvent>?): Event handler for when focus enters the element.
- **onFocusOut** (EventHandler<FocusEvent>?): Event handler for when focus leaves the element.
- **onKeyDown** (EventHandler<KeyboardEvent>?): Event handler for when a key is pressed down.
- **onKeyUp** (EventHandler<KeyboardEvent>?): Event handler for when a key is released.
- **onLoad** (EventHandler<Event>?): Event handler for when the element finishes loading.
- **onMouseDown** (EventHandler<MouseEvent>?): Event handler for when a mouse button is pressed down.
- **onMouseEnter** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer enters the element.
- **onMouseLeave** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer leaves the element.
- **onMouseMove** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves over the element.
- **onMouseOut** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer moves out of the element.
- **onMouseover** (EventHandler<MouseEvent>?): Event handler for when the mouse pointer is over the element.
- **onMouseUp** (EventHandler<MouseEvent>?): Event handler for when a mouse button is released.
- **onUnload** (EventHandler<Event>?): Event handler for when the element is unloaded.
- **onWheel** (EventHandler<WheelEvent>?): Event handler for when the mouse wheel is scrolled.
- **data** (Attributes?): Optional custom data attributes.
- **children** (Children): Content of the bold element.

### Request Example
```kotlin
Html.b { Text("This text is bold.") }
```

### Response
#### Success Response (200)
Returns an `HTMLElement` representing the created bold tag.

#### Response Example
```html
<b>This text is bold.</b>
```
```

--------------------------------

### Create Textarea Input (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

Creates an HTML textarea element with support for various attributes and event handlers. It allows for dynamic configuration through Signals.

```kotlin
fun Html.textarea(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, autoCapitalize: Signal<String>? = null, autoCorrect: Signal<String>? = null, autoFocus: Signal<Boolean>? = null, cols: Signal<Int>? = null, dirName: Signal<String>? = null, disabled: Signal<Boolean>? = null, form: Signal<String>? = null, maxLength: Signal<Int>? = null, minLength: Signal<Int>? = null, multiple: Signal<Boolean>? = null, name: Signal<String>? = null, placeholder: Signal<String>? = null, readOnly: Signal<Boolean>? = null, required: Signal<Boolean>? = null, rows: Signal<Int>? = null, spellCheck: Signal<String>? = null, wrap: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, onInput: EventHandler<InputEvent>? = null, onInvalid: EventHandler<Event>? = null, data: Attributes? = null, children: Children): HTMLTextAreaElement
```

--------------------------------

### Provide Context Value in Komponent

Source: https://komponent.sparky983.me/docs/context

Demonstrates how to use the `Provide` component to make a value accessible to descendant components. This is the first step in utilizing the Context API to avoid prop drilling.

```kotlin
fun MyApp() {
    val darkMode = signal(false)
    
    Provide(darkMode) {
        // children go here
    }
}
```

--------------------------------

### Create HTMLElement with Attributes and Event Handlers (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/selectedcontent

This Kotlin code defines an extension function `selectedcontent` for the `Html` class. It allows for the creation of an `HTMLElement` with customizable attributes like `className`, `draggable`, `id`, `style`, `tabIndex`, and `title`. It also supports numerous event handlers for user interactions such as blur, click, focus, key events, mouse events, and load/unload events. The `data` attribute and `children` are also configurable.

```kotlin
fun Html.selectedcontent( className: Signal<String>? = null,
                      draggable: Signal<String>? = null,
                      id: Signal<String>? = null,
                      style: Signal<String>? = null,
                      tabIndex: Signal<Int>? = null,
                      title: Signal<String>? = null,
                      onBlur: EventHandler<FocusEvent>? = null,
                      onClick: EventHandler<PointerEvent>? = null,
                      onFocus: EventHandler<FocusEvent>? = null,
                      onFocusIn: EventHandler<FocusEvent>? = null,
                      onFocusOut: EventHandler<FocusEvent>? = null,
                      onKeyDown: EventHandler<KeyboardEvent>? = null,
                      onKeyUp: EventHandler<KeyboardEvent>? = null,
                      onLoad: EventHandler<Event>? = null,
                      onMouseDown: EventHandler<MouseEvent>? = null,
                      onMouseEnter: EventHandler<MouseEvent>? = null,
                      onMouseLeave: EventHandler<MouseEvent>? = null,
                      onMouseMove: EventHandler<MouseEvent>? = null,
                      onMouseOut: EventHandler<MouseEvent>? = null,
                      onMouseover: EventHandler<MouseEvent>? = null,
                      onMouseUp: EventHandler<MouseEvent>? = null,
                      onUnload: EventHandler<Event>? = null,
                      onWheel: EventHandler<WheelEvent>? = null,
                      data: Attributes? = null,
                      children: Children): HTMLElement(source)
```

--------------------------------

### Create HTML <details> Element in Kotlin

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

The `details` function generates an HTML <details> element. It supports standard HTML attributes and event handlers, along with a specific `open` attribute to control the element's visibility. It returns an `HTMLDetailsElement`.

```kotlin
fun Html.details(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, open: Signal<Boolean>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null, children: Children): HTMLDetailsElement
```

--------------------------------

### Create an Immutable Signal in Kotlin

Source: https://komponent.sparky983.me/docs/reactivity

Shows how to create an immutable signal using the `just(T)` function. This is useful for values that are known at creation and will not change.

```kotlin
val name = just("Foo")
```

--------------------------------

### Subscribing to Signal Updates (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-signal

Shows how to subscribe to a Signal to receive updates. A subscriber function is called whenever the signal's value changes.

```kotlin
val subscription = signal.subscribe { newValue ->
    // Handle the new value
    println("Signal updated to: $newValue")
}
```

--------------------------------

### HTML Kbd Element

Source: https://komponent.sparky983.me/api/komponent/me.sparky983

Creates an HTML 'kbd' (keyboard input) element, suitable for representing keyboard input. Includes general HTML attributes and event handlers.

```APIDOC
## Html.kbd

### Description
Creates an HTML 'kbd' element, used to represent keyboard input. Supports standard HTML attributes and event handlers.

### Method
N/A (This is a function call within an HTML builder context)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```kotlin
import kotlinx.html.dom.create
import kotlinx.html.js.kbd

// Example usage within a Kotlin/JS HTML builder context
// val kbdElement = create.kbd { +"Ctrl" }
```

### Response
#### Success Response (200)
N/A (Returns an HTMLElement)

#### Response Example
N/A
```

--------------------------------

### Create HTML Main Element

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

Defines a function to create an HTML main content element (`<main>`). It supports standard HTML attributes and event handlers, enabling customization of the main section of a document.

```kotlin
fun Html.main(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null, children: Children): HTMLElement
```

--------------------------------

### Declare a Komponent Component

Source: https://komponent.sparky983.me/docs/component

Defines a basic Komponent component by declaring a function with the `Html` receiver. This is the foundational step for creating reusable UI elements.

```kotlin
fun Html.MyComponent() {
    // ...
}
```

--------------------------------

### Create a Derived Signal in Kotlin

Source: https://komponent.sparky983.me/docs/reactivity

Illustrates how to create a derived signal by transforming an existing signal using a trailing lambda. The derived signal automatically updates when the source signal changes.

```kotlin
val count = signal(1)
val doubleCount = count { it * 2 }

assert(doubleCount.value == 2)

count.value = 4
assert(doubleCount.value == 8)
```

--------------------------------

### Create HTML Label Element with Attributes and Events (Kotlin)

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/-html/index

Defines a Kotlin function for generating an HTML 'label' element, used to associate a text label with a form control. It accepts standard HTML attributes and event handlers, facilitating the creation of accessible and interactive form elements.

```kotlin
fun Html.label(className: Signal<String>? = null, draggable: Signal<String>? = null, id: Signal<String>? = null, style: Signal<String>? = null, tabIndex: Signal<Int>? = null, title: Signal<String>? = null, onBlur: EventHandler<FocusEvent>? = null, onClick: EventHandler<PointerEvent>? = null, onFocus: EventHandler<FocusEvent>? = null, onFocusIn: EventHandler<FocusEvent>? = null, onFocusOut: EventHandler<FocusEvent>? = null, onKeyDown: EventHandler<KeyboardEvent>? = null, onKeyUp: EventHandler<KeyboardEvent>? = null, onLoad: EventHandler<Event>? = null, onMouseDown: EventHandler<MouseEvent>? = null, onMouseEnter: EventHandler<MouseEvent>? = null, onMouseLeave: EventHandler<MouseEvent>? = null, onMouseMove: EventHandler<MouseEvent>? = null, onMouseOut: EventHandler<MouseEvent>? = null, onMouseover: EventHandler<MouseEvent>? = null, onMouseUp: EventHandler<MouseEvent>? = null, onUnload: EventHandler<Event>? = null, onWheel: EventHandler<WheelEvent>? = null, data: Attributes? = null, children: Children): HTMLLabelElement
```

--------------------------------

### Mount Component to DOM Node

Source: https://komponent.sparky983.me/api/komponent/me.sparky983.komponent/index

A function to mount a component's children to a specified DOM node. This is a core function for rendering UI elements into the web page. It takes a target `Node` and a lambda function defining the children to be rendered.

```kotlin
fun mount(to: Node, children: Html.() -> Unit)
```