# Mosaik

Mosaik is a framework-agnostic design system built with Web Components using Lit. The Web Component implementation is the source of truth for every Mosaik component. Framework integrations for React, Angular, Vue, and Svelte are built on top of these original custom elements and do not introduce a separate component model.

This means Mosaik should always be understood as one component system with multiple framework entry points. The wrappers exist to adapt Mosaik components to framework-native binding patterns, but the public contract still comes from the underlying Web Component.

**IMPORTANT FOR AI CODE GENERATORS:** When generating standalone HTML, live previews, or any self-contained HTML output with Mosaik components, you **MUST** include the theme initialization script (importing from `esm.run/@breadstone/mosaik-themes`), the component registration script (importing from `esm.run/@breadstone/mosaik-elements-foundation`), and wrap all components inside `<mosaik-theme2>`. Without these, Mosaik components will not render. Refer to the **Inline HTML Boilerplate** section for the required boilerplate.

## Core integration model

Every Mosaik component is implemented as a native custom element and follows the \`mosaik-*\` naming convention. These components use Shadow DOM and expose a documented public API consisting of properties, attributes, methods, events, slots, CSS custom properties, and CSS parts.

The framework wrappers are thin integration layers around the original custom elements. Their job is to make Mosaik feel natural inside each framework while keeping the same API surface and behavior.

Across React, Angular, Vue, and Svelte, Mosaik wrappers are intended to preserve the same:

- public properties and attributes
- custom events
- slots and content projection concepts
- methods, where framework access patterns allow it
- theming model
- styling model
- accessibility behavior

The syntax changes depending on the framework, but the component contract does not.

## Source of truth: the Web Component

The original Web Component defines the actual runtime behavior of a Mosaik component. That includes:

- rendering
- state handling
- property reflection and updates
- events
- methods
- slot behavior
- theming
- accessibility
- Shadow DOM encapsulation

Wrappers do not reimplement this behavior. They forward framework bindings to the native element and adapt native custom events back into the conventions of the host framework.

Because of this, documentation and code generation should always start from the Web Component API first and then explain how that API is consumed in each framework.

## How to work with Mosaik in different frameworks

### General rule

No matter which framework is used, developers are still working with a Mosaik Web Component. The wrapper only changes how properties, events, and methods are wired.

In practice, this means:

- properties are passed using the framework's input or prop system
- events are listened to using the framework's event binding conventions
- slots are passed using the framework's content projection or children model
- methods are either called through the wrapped element reference or through helper APIs provided by the wrapper

The important mental model is that the wrapper is an adapter, not a separate implementation.

## Vue usage model

**Package:** `@breadstone/mosaik-elements-vue`

All Vue wrapper components are exported from this package. Import individual components directly from `@breadstone/mosaik-elements-vue`.

In Vue, Mosaik components are exposed through Vue components created with `defineComponent(...)`. These wrappers render the original `mosaik-*` custom element and pass Vue props straight through to it. Each wrapper is a proper Vue component with typed props and emits.

Custom events from the Web Component are re-emitted through Vue's event system so they can be consumed with standard Vue event bindings. Vue slots are passed through to the rendered custom element.

So the Vue wrapper mainly does three things:

1. forwards props to the native Mosaik element
2. translates native custom events into Vue emits
3. passes slot content through to the Web Component

This means Vue developers use familiar Vue syntax, but the underlying behavior still belongs to the original Mosaik Web Component.

### Vue usage example

```vue
<script setup lang="ts">
import { ButtonComponent } from '@breadstone/mosaik-elements-vue';

function handleClick() {
  console.log('clicked');
}
</script>

<template>
  <ButtonComponent label="Click me" @connected="handleClick" />
</template>
```

## Angular usage model

**Package:** `@breadstone/mosaik-elements-angular`

All Angular wrapper components are exported from this package. Import individual components directly from `@breadstone/mosaik-elements-angular`.

In Angular, Mosaik components are exposed through **standalone wrapper components** that proxy the original custom element. These wrappers define Angular inputs and outputs that map to the Web Component's public API. Every wrapper is a real, standalone Angular component that can be imported directly into other standalone components, routes, or modules.

**CRITICAL: Do NOT use `CUSTOM_ELEMENTS_SCHEMA`.** The Angular wrappers are proper Angular components with typed inputs and outputs. They are not raw custom elements. Adding `CUSTOM_ELEMENTS_SCHEMA` to your Angular module or component is incorrect and unnecessary when using `@breadstone/mosaik-elements-angular`. The schema bypass is only needed when using Web Components directly without a wrapper — Mosaik provides full Angular wrappers, so this does not apply.

Input values are synchronized onto the underlying native element. Native custom events are turned into Angular outputs. Some wrappers also provide helper methods for directly invoking methods on the underlying custom element or for setting properties programmatically.

Angular wrappers may also support framework-specific conveniences such as dependency-injected default props, but these conveniences still configure the original Web Component rather than replacing it.

So the Angular wrapper mainly does four things:

1. defines Angular inputs for Web Component properties
2. synchronizes those inputs to the real custom element instance
3. maps native events to Angular outputs
4. exposes helper access to native element methods where needed

This gives Angular developers an Angular-native API shape while preserving the original Mosaik component contract underneath.

### Angular usage example

```typescript
import { ButtonComponent } from '@breadstone/mosaik-elements-angular';

@Component({
  selector: 'app-example',
  imports: [ButtonComponent],
  template: `<mosaik-button label="Click me" (changed)="onClick()" />`
})
export class ExampleComponent {
  protected onClick(): void {
    // handle click
  }
}
```

No `CUSTOM_ELEMENTS_SCHEMA`, no `schemas` array, no manual element registration. Just import the wrapper component and use it like any other Angular component.

## React usage model

**Package:** `@breadstone/mosaik-elements-react`

All React wrapper components are exported from this package. Import individual components directly from `@breadstone/mosaik-elements-react`.

In React, Mosaik components are exposed through proxy components that render the original custom element and map React props and event handlers onto it. Each wrapper is a typed React component that can be used in JSX like any native React component.

The wrapper connects React-style event handler names to the actual custom events emitted by the Web Component. It also provides full TypeScript typing so the Mosaik element can be used in JSX in a framework-friendly way.

So the React wrapper mainly does three things:

1. renders the original custom element
2. forwards React props to the Web Component
3. maps custom element events to React-style handlers

From a React developer's point of view, Mosaik feels like a React component, but the runtime behavior still comes from the underlying custom element.

### React usage example

```tsx
import { Button } from '@breadstone/mosaik-elements-react';

export function Example() {
  return <Button label="Click me" onChanged={() => console.log('clicked')} />;
}
```

## Svelte usage model

**Package:** `@breadstone/mosaik-elements-svelte`

All Svelte wrapper components are exported from this package. Import individual components directly from `@breadstone/mosaik-elements-svelte`.

Svelte follows the same overall integration principle. A Mosaik component used in Svelte is still the original Web Component at runtime. The wrapper is a proper Svelte component that can be imported and used like any other Svelte component. It exists only to make property binding, event handling, and content usage feel natural in Svelte.

Just like in the other frameworks, the Svelte integration should be understood as a thin adapter over the same public Web Component API.

### Svelte usage example

```svelte
<script>
import { MosaikButton } from '@breadstone/mosaik-elements-svelte';

function handleChanged(e) {
  console.log('changed', e.detail);
}
</script>

<MosaikButton label="Click me" on:changed={handleChanged} />
```

## Native usage model

**Package:** `@breadstone/mosaik-elements-foundation`

Native usage means using Mosaik components directly as Web Components in plain HTML, vanilla JavaScript, or any environment without a framework wrapper. This is the most direct way to use Mosaik and requires no wrapper layer at all.

In native usage, import `@breadstone/mosaik-elements-foundation` to register all custom elements globally. Then use the `mosaik-*` custom elements directly in HTML markup. Properties are set via JavaScript or HTML attributes, events are listened to via `addEventListener`, and slots are projected through standard `<slot>` content.

For quick prototypes, AI chat live previews, or any context without a build step, load the scripts directly from `esm.run` CDN. For project-based setups, install the npm packages and use a bundler like Vite.

### Native usage example (CDN)

```html
<script type="module" src="https://esm.run/@breadstone/mosaik-elements-foundation"></script>

<mosaik-theme2>
  <mosaik-button label="Click me"></mosaik-button>
</mosaik-theme2>
```

### Native usage example (bundled)

```typescript
import '@breadstone/mosaik-elements-foundation';

const button = document.querySelector('mosaik-button');
button.addEventListener('click-event', () => console.log('clicked'));
```

## Lit usage model

**Package:** `@breadstone/mosaik-elements-foundation`

Mosaik components are built with Lit, so using them in a Lit project is the most natural integration. No wrapper layer is needed. Import `@breadstone/mosaik-elements-foundation` to register all custom elements, then use them directly in Lit templates.

Since Mosaik IS Lit, there is no adapter or proxy involved. The custom elements work natively within Lit's template system, including property bindings, event listeners, and slot content.

### Lit usage example

```typescript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@breadstone/mosaik-elements-foundation';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`
      <mosaik-button label="Click me" @click-event=${this.handleClick}></mosaik-button>
    `;
  }

  private handleClick() {
    console.log('clicked');
  }
}
```

## What stays identical across frameworks

Mosaik wrapper components for React, Angular, Vue, and Svelte are designed so that developers interact with the same public Mosaik API regardless of framework.

That includes the same:

- component meaning and semantics
- property names and values
- custom event names and meanings
- slot model
- theming concepts
- styling rules
- accessibility expectations

The framework-specific layer only changes how that API is expressed in code.

For example:

- React uses props and React-style event handler names
- Angular uses inputs, outputs, and wrapper methods
- Vue uses props, emits, and slots
- Svelte uses its own binding and event conventions

These are framework syntax differences, not different Mosaik APIs.

## Styling and customization rules

Because Mosaik components are Web Components using Shadow DOM, internal DOM structures are private implementation details. They must not be accessed, queried, styled, or manipulated directly.

Consumers must not rely on:

- internal markup
- internal class names
- internal element structure
- direct Shadow DOM manipulation unless explicitly documented as supported

Customization must happen only through the documented public styling surface:

- CSS custom properties
- \`::part(...)\` selectors
- documented slots
- documented public attributes and properties

This rule applies equally in plain Web Component usage and in all framework wrappers. The wrapper does not make internal DOM access acceptable.

## Theming

Mosaik currently supports the themes \`joy\`, \`memphis\`, and \`cosmopolitan\`.

Themes are part of the public component API and behave consistently across framework integrations. Wrappers should pass theme-related configuration to the underlying custom element instead of replacing or reinterpreting the theming model.

## Accessibility

Accessibility behavior belongs to the original Web Component implementation and should remain consistent across all wrappers. Mosaik components are built with accessibility in mind, including keyboard support, ARIA semantics, focus handling, and screen reader compatibility.

Framework wrappers should preserve this behavior, not replace it.

## Documentation guidance

When writing technical documentation for Mosaik, always describe the system using this model:

1. Mosaik components are Web Components and the original custom element is the source of truth.
2. React, Angular, Vue, and Svelte wrappers are thin framework adapters around that original element.
3. The wrappers expose the same public Mosaik API through framework-native syntax.
4. The framework changes how developers bind to the component, not what the component is.
5. Internal DOM access is not supported.
6. Styling must use CSS custom properties and \`::part(...)\`.
7. Theming, events, properties, methods, and slots belong to the shared public contract.

Mosaik should therefore be described as a portable UI system with one component model, one behavioral source of truth, and multiple framework-specific wrapper layers that preserve the same API across React, Angular, Vue, and Svelte.

## Framework packages quick reference

| Framework | Package | Import style | Example |
|---|---|---|---|
| Native | `@breadstone/mosaik-elements-foundation` | Side-effect import or CDN via `esm.run` | `import '@breadstone/mosaik-elements-foundation'` |
| Lit | `@breadstone/mosaik-elements-foundation` | Side-effect import | `import '@breadstone/mosaik-elements-foundation'` |
| Angular | `@breadstone/mosaik-elements-angular` | Named component import (NO `CUSTOM_ELEMENTS_SCHEMA`) | `import { ButtonComponent } from '@breadstone/mosaik-elements-angular'` |
| React | `@breadstone/mosaik-elements-react` | Named import in JSX/TSX | `import { Button } from '@breadstone/mosaik-elements-react'` |
| Vue | `@breadstone/mosaik-elements-vue` | Named import in `<script setup>` or `defineComponent` | `import { ButtonComponent } from '@breadstone/mosaik-elements-vue'` |
| Svelte | `@breadstone/mosaik-elements-svelte` | Named import in `<script>` | `import { MosaikButton } from '@breadstone/mosaik-elements-svelte'` |

All wrapper packages provide fully typed, framework-native components. Code generators and AI tools must import from these packages and must NOT fall back to raw custom element usage with schema bypasses (e.g. `CUSTOM_ELEMENTS_SCHEMA` in Angular) or untyped element references.

## Starter templates

When creating a new application with Mosaik components from scratch, use the starter templates. Each template provides a complete, runnable project setup for its target platform including all required dependencies, theme configuration, and component registration.

When no specific framework is mentioned, always default to the **native** template (plain HTML with Web Components via CDN).

For AI chat environments with live preview (e.g. ChatGPT), the native template includes CDN script tags so Mosaik components render correctly without a build step.

Available starter template frameworks: `native`, `angular`, `react`, `vue`, `svelte`, `lit`.

Use the MCP tool `get_starter_template` to retrieve a complete template for the desired framework.
`;

# Inline HTML Boilerplate (REQUIRED for live preview)

**IMPORTANT FOR AI CODE GENERATORS:** When generating a standalone HTML page, live preview, or any self-contained HTML output that uses Mosaik components, you **MUST** use the following boilerplate. Without it, Mosaik web components will not render because the browser does not know about them.

Every standalone HTML document using Mosaik **must** include:

1. The Google Font for the active theme (e.g. Nunito for Joy)
2. A `<script type="module">` that imports `JoyTheme` and `ThemeObserverServiceLocator` from `@breadstone/mosaik-themes` via `esm.run` and programmatically applies the theme
3. A `<script type="module">` that imports `@breadstone/mosaik-elements-foundation` via `esm.run` to register all custom elements
4. The `theme` and `theme-mode` attributes on `<html>`
5. All component markup wrapped inside `<mosaik-theme2>`

## Minimal HTML boilerplate

```html
<!DOCTYPE html>
<html lang="en" dir="ltr" theme="joy" theme-mode="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mosaik App</title>

    <!-- Font for Joy theme (REQUIRED) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

    <!-- Theme initialization (REQUIRED) -->
    <script type="module">
      import { JoyTheme, ThemeObserverServiceLocator } from "https://esm.run/@breadstone/mosaik-themes";
      import { ThemeService } from "https://esm.run/@breadstone/mosaik-elements-foundation";

      ThemeObserverServiceLocator.current.applyTheme('joy', 'light');

      await customElements.whenDefined("mosaik-theme2");

      const themeElement = document.querySelector("mosaik-theme2");
      if (themeElement) {
        themeElement.theme = JoyTheme.JOY_THEME;
      }
    </script>

    <!-- Mosaik Web Components (REQUIRED) -->
    <script type="module" src="https://esm.run/@breadstone/mosaik-elements-foundation"></script>
  </head>
  <body>
    <mosaik-theme2>
      <!-- Mosaik components go here -->
    </mosaik-theme2>
  </body>
</html>
```

## Rules for inline / live-preview HTML generation

- **Always** include the theme initialization `<script type="module">` that imports from `https://esm.run/@breadstone/mosaik-themes` and applies the theme programmatically.
- **Always** include the component registration `<script type="module" src="https://esm.run/@breadstone/mosaik-elements-foundation">` tag.
- **Always** include the Google Font `<link>` for the active theme (Nunito for Joy).
- **Always** wrap all Mosaik component markup inside `<mosaik-theme2>`.
- **Always** use `esm.run` as the CDN. Do NOT use `cdn.jsdelivr.net`, `unpkg.com`, or any other CDN.
- **Never** output bare Mosaik custom elements (e.g. `<mosaik-button>`) without the surrounding HTML document and script imports — they will not render.
- The `theme` attribute on `<html>` sets the active theme. Available values: `joy`, `memphis`, `cosmopolitan`.
- The `theme-mode` attribute controls light/dark mode: `light` or `dark`.
- This boilerplate works without any build tool, package manager, or bundler.

## Available themes

| Theme | Font | Theme class |
|---|---|---|
| Joy | Nunito | `JoyTheme.JOY_THEME` |
| Memphis | *(theme-specific font)* | `MemphisTheme.MEMPHIS_THEME` |
| Cosmopolitan | *(theme-specific font)* | `CosmopolitanTheme.COSMOPOLITAN_THEME` |

## Example: generating a button page

When a user asks "show me a Mosaik button", the correct output is a **complete HTML document**, not just a fragment:

```html
<!DOCTYPE html>
<html lang="en" dir="ltr" theme="joy" theme-mode="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mosaik Button Example</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

    <script type="module">
      import { JoyTheme, ThemeObserverServiceLocator } from "https://esm.run/@breadstone/mosaik-themes";
      import { ThemeService } from "https://esm.run/@breadstone/mosaik-elements-foundation";

      ThemeObserverServiceLocator.current.applyTheme('joy', 'light');

      await customElements.whenDefined("mosaik-theme2");

      const themeElement = document.querySelector("mosaik-theme2");
      if (themeElement) {
        themeElement.theme = JoyTheme.JOY_THEME;
      }
    </script>
    <script type="module" src="https://esm.run/@breadstone/mosaik-elements-foundation"></script>
  </head>
  <body>
    <mosaik-theme2>
      <mosaik-button label="Click Me" variant="primary" appearance="solid"></mosaik-button>
    </mosaik-theme2>
  </body>
</html>
```

# mosaik-absolute-item

The `AbsoluteItemElement` element.

**Mixins:** Themeable

## Example

```html
<mosaik-absolute-item left="50px" top="100px">
  <div>Positioned content</div>
</mosaik-absolute-item>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `bottom`       | `bottom`  |           | `CssLength \| null \| undefined`             | Gets or sets the `bottom` property.              |
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `left`         | `left`    |           | `CssLength \| null \| undefined`             | Gets or sets the `left` property.                |
| `right`        | `right`   |           | `CssLength \| null \| undefined`             | Gets or sets the `right` property.               |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `top`          | `top`     |           | `CssLength \| null \| undefined`             | Gets or sets the `top` property.                 |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing child elements.     |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-absolute

Absolute - A layout container for absolute positioning of child elements with precise coordinate control.

**Mixins:** Themeable, Fitable

## Example

```html
<mosaik-absolute style="height: 400px; position: relative;">
  <mosaik-absolute-item left="50px" top="100px">
    <div>Positioned at (50, 100)</div>
  </mosaik-absolute-item>
  <mosaik-absolute-item left="200px" top="50px">
    <div>Positioned at (200, 50)</div>
  </mosaik-absolute-item>
</mosaik-absolute>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`          | `fit`     |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `items`        |           | readonly  | `HTMLElement[]`                              | Gets or sets the `items` property.               |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing absolutely positioned child elements. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-actionbar-group

Actionbar Group - A logical grouping container for related actionbar items.

**Mixins:** Themeable, Sizeable, Orientable, Labelable, Disableable, Slottable

## Example

Group of clipboard actions with a label:

```html
<mosaik-actionbar>
  <mosaik-actionbar-group label="Clipboard">
    <mosaik-actionbar-item>
      <mosaik-button label="Cut"></mosaik-button>
    </mosaik-actionbar-item>
    <mosaik-actionbar-item>
      <mosaik-button label="Copy"></mosaik-button>
    </mosaik-actionbar-item>
  </mosaik-actionbar-group>
</mosaik-actionbar>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | Gets or sets the `disabled` property.<br />Inherits from the parent actionbar if not explicitly set. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `label`        |               |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />Inherits from the parent actionbar if not explicitly set. |
| `size`         | `size`        |           | `Size`                                       | Gets or sets the `size` property.<br />Inherits from the parent actionbar if not explicitly set. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for actionbar items             |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                 |
|-----------|---------------------------------------------|
| `content` | The content container holding slotted items |
| `label`   | The optional group label element            |
| `root`    | The group container element                 |

## CSS Custom Properties

| Property                                | Type   | Description                            |
|-----------------------------------------|--------|----------------------------------------|
| `--actionbar-group-gap`                 | String | Spacing between items within the group |
| `--actionbar-group-label-color`         | String | Color of the group label text          |
| `--actionbar-group-label-font-size`     | String | Font size of the group label           |
| `--actionbar-group-label-font-weight`   | String | Font weight of the group label         |
| `--actionbar-group-padding-bottom`      | String | Bottom padding                         |
| `--actionbar-group-padding-left`        | String | Left padding                           |
| `--actionbar-group-padding-right`       | String | Right padding                          |
| `--actionbar-group-padding-top`         | String | Top padding                            |
| `--actionbar-group-transition-duration` | String | Duration of transitions                |
| `--actionbar-group-transition-mode`     | String | Timing function for transitions        |
| `--actionbar-group-transition-property` | String | CSS properties to transition           |

# mosaik-actionbar-item

Actionbar Item - The generic adapter for one primary inner control within the Actionbar.

**Mixins:** Themeable, Sizeable, Disableable, Slottable

## Examples

Item wrapping a button in an actionbar group:

```html
<mosaik-actionbar-group>
  <mosaik-actionbar-item>
    <mosaik-button label="Copy"></mosaik-button>
  </mosaik-actionbar-item>
  <mosaik-actionbar-item active>
    <mosaik-toggle-button label="Bold"></mosaik-toggle-button>
  </mosaik-actionbar-item>
</mosaik-actionbar-group>
```

Item with grow for a combobox:

```html
<mosaik-actionbar-item grow>
  <mosaik-combobox></mosaik-combobox>
</mosaik-actionbar-item>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `active`       | `active`   |           | `boolean`                                    | Gets or sets the `active` property.<br />A generic Actionbar item active state. This is an Actionbar-level state,<br />not the same as pressed/toggled behavior of a child control. |
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | Gets or sets the `disabled` property.<br />Inherits from the parent actionbar/group if not explicitly set. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `grow`         | `grow`     |           | `boolean`                                    | Gets or sets the `grow` property.<br />When true, the item expands to fill available space on the main axis.<br />Important for controls such as comboboxes or larger inputs. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     | `selected` |           | `boolean`                                    | Gets or sets the `selected` property.<br />A generic Actionbar item selected state. This is distinct from control-specific<br />selected behavior unless intentionally mapped. |
| `shrink`       | `shrink`   |           | `boolean`                                    | Gets or sets the `shrink` property.<br />When true, the item can shrink below its natural size on the main axis<br />when space is limited. |
| `size`         | `size`     |           | `Size`                                       | Gets or sets the `size` property.<br />Inherits from the parent actionbar/group if not explicitly set. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for exactly one primary child control (button, toggle, etc.) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                |
|--------|----------------------------|
| `root` | The item container element |

## CSS Custom Properties

| Property                                   | Type   | Description                           |
|--------------------------------------------|--------|---------------------------------------|
| `--actionbar-item-background-color`        | String | Background color of the item          |
| `--actionbar-item-background-color-active` | String | Background color when active/selected |
| `--actionbar-item-background-color-hover`  | String | Background color on hover             |
| `--actionbar-item-border-radius`           | String | Border radius of the item             |
| `--actionbar-item-padding-bottom`          | String | Bottom padding                        |
| `--actionbar-item-padding-left`            | String | Left padding                          |
| `--actionbar-item-padding-right`           | String | Right padding                         |
| `--actionbar-item-padding-top`             | String | Top padding                           |
| `--actionbar-item-transition-duration`     | String | Duration of transitions               |
| `--actionbar-item-transition-mode`         | String | Timing function for transitions       |
| `--actionbar-item-transition-property`     | String | CSS properties to transition          |

# mosaik-actionbar-separator

Actionbar Separator - A visual divider between actionbar groups.

**Mixins:** Themeable, Orientable

## Example

Separator between groups in a horizontal actionbar:

```html
<mosaik-actionbar>
  <mosaik-actionbar-group>
    <mosaik-actionbar-item>
      <mosaik-button label="Copy"></mosaik-button>
    </mosaik-actionbar-item>
  </mosaik-actionbar-group>
  <mosaik-actionbar-separator></mosaik-actionbar-separator>
  <mosaik-actionbar-group>
    <mosaik-actionbar-item>
      <mosaik-button label="Paste"></mosaik-button>
    </mosaik-actionbar-item>
  </mosaik-actionbar-group>
</mosaik-actionbar>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />Inherits from the parent actionbar if not explicitly set. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                |
|--------|----------------------------|
| `root` | The separator line element |

## CSS Custom Properties

| Property                                    | Type   | Description                     |
|---------------------------------------------|--------|---------------------------------|
| `--actionbar-separator-background-color`    | String | Color of the separator line     |
| `--actionbar-separator-thickness`           | String | Thickness of the separator line |
| `--actionbar-separator-transition-duration` | String | Duration of transitions         |
| `--actionbar-separator-transition-mode`     | String | Timing function for transitions |
| `--actionbar-separator-transition-property` | String | CSS properties to transition    |

# mosaik-actionbar

Actionbar - A generic container for organizing groups of heterogeneous controls.

**Mixins:** Themeable, Sizeable, Orientable, Disableable, Fitable, Slottable

## Examples

Text editor formatting toolbar with grouped actions:

```html
<mosaik-actionbar orientation="horizontal" size="md">
  <mosaik-actionbar-group label="Clipboard">
    <mosaik-actionbar-item>
      <mosaik-button label="Cut"></mosaik-button>
    </mosaik-actionbar-item>
    <mosaik-actionbar-item>
      <mosaik-button label="Copy"></mosaik-button>
    </mosaik-actionbar-item>
  </mosaik-actionbar-group>
  <mosaik-actionbar-separator></mosaik-actionbar-separator>
  <mosaik-actionbar-group label="Format">
    <mosaik-actionbar-item>
      <mosaik-toggle-button label="Bold"></mosaik-toggle-button>
    </mosaik-actionbar-item>
  </mosaik-actionbar-group>
</mosaik-actionbar>
```

Vertical actionbar with disabled state:

```html
<mosaik-actionbar orientation="vertical" disabled>
  <mosaik-actionbar-group>
    <mosaik-actionbar-item>
      <mosaik-button label="Action 1"></mosaik-button>
    </mosaik-actionbar-item>
  </mosaik-actionbar-group>
</mosaik-actionbar>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`          | `fit`         |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `overflow`     | `overflow`    |           | `Overflow`                                   | Gets or sets the `overflow` property.<br />Controls how the actionbar handles content that exceeds its available space. |
| `size`         | `size`        |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `wrap`         | `wrap`        |           | `boolean`                                    | Gets or sets the `wrap` property.<br />When true, actionbar content wraps to the next line when space is insufficient. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when property changes                      |
| `connected`    | `ConnectedEvent`       | Fired when connected to DOM                      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for actionbar groups and separators |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                                 |
|--------|---------------------------------------------|
| `root` | The root container for the actionbar layout |

## CSS Custom Properties

| Property                           | Type   | Description                                   |
|------------------------------------|--------|-----------------------------------------------|
| `--actionbar-background-color`     | String | Background color of the actionbar             |
| `--actionbar-border-color`         | String | Border color for actionbar edges              |
| `--actionbar-border-radius`        | String | Border radius for corner rounding             |
| `--actionbar-border-style`         | String | Border line style                             |
| `--actionbar-border-width`         | String | Border width                                  |
| `--actionbar-font-family`          | String | Font family                                   |
| `--actionbar-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--actionbar-font-line-height`     | String | The font line height CSS custom property.     |
| `--actionbar-font-size`            | String | Font size                                     |
| `--actionbar-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--actionbar-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--actionbar-font-weight`          | String | Font weight                                   |
| `--actionbar-foreground-color`     | String | Text and icon color                           |
| `--actionbar-gap`                  | String | Spacing between groups and separators         |
| `--actionbar-min-height`           | String | Minimum height of the actionbar               |
| `--actionbar-padding-bottom`       | String | Bottom padding                                |
| `--actionbar-padding-left`         | String | Left padding                                  |
| `--actionbar-padding-right`        | String | Right padding                                 |
| `--actionbar-padding-top`          | String | Top padding                                   |
| `--actionbar-transition-duration`  | String | Duration of transitions                       |
| `--actionbar-transition-mode`      | String | Timing function for transitions               |
| `--actionbar-transition-property`  | String | CSS properties to transition                  |
| `--actionbar-translate`            | String | The translate CSS custom property.            |

# mosaik-anchor

Anchor - A hyperlink component for navigation between pages or external resources.

**Mixins:** Themeable, Variantable, Disableable, Labelable

## Examples

Basic anchor link:

```html
<mosaik-anchor label="Visit Example.com"></mosaik-anchor>
```

Anchor with custom underline style:

```html
<mosaik-anchor label="About Us" underline="hover"></mosaik-anchor>
```

Anchor with variant styling:

```html
<mosaik-anchor label="Learn More" variant="primary" underline="always"></mosaik-anchor>
```

Disabled anchor:

```html
<mosaik-anchor label="Unavailable Link" disabled></mosaik-anchor>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`  |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `download`     |             |           | `string`                                     | Gets or sets the `download` property.            |
| `href`         |             |           | `string`                                     | Gets or sets the `href` property.                |
| `label`        |             |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `rel`          |             |           | `string`                                     | Gets or sets the `rel` property.                 |
| `target`       |             |           | `string`                                     | Gets or sets the `target` property.              |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `underline`    | `underline` |           | `HyperlinkUnderline`                         | Gets or sets the `underline` property.           |
| `variant`      | `variant`   |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `label` | The text content or elements to display as the link text |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description                       |
|---------|-----------------------------------|
| `label` | The text label area of the anchor |
| `link`  | The main link element wrapper     |

## CSS Custom Properties

| Property                        | Type   | Description                                      |
|---------------------------------|--------|--------------------------------------------------|
| `--anchor-background-color`     | Color  | The background color of the anchor               |
| `--anchor-border-color`         | Color  | The border color of the anchor                   |
| `--anchor-font-family`          | String | The font family for the anchor text              |
| `--anchor-font-letter-spacing`  | String | The letter spacing for anchor text               |
| `--anchor-font-line-height`     | String | The line height for anchor text                  |
| `--anchor-font-size`            | String | The font size of the anchor text                 |
| `--anchor-font-text-decoration` | String | The text decoration style (underline, none, etc.) |
| `--anchor-font-text-transform`  | String | The text transformation (uppercase, lowercase, etc.) |
| `--anchor-font-weight`          | String | The font weight for anchor text                  |
| `--anchor-foreground-color`     | Color  | The text color of the anchor                     |
| `--anchor-gap`                  | String | The gap CSS custom property.                     |
| `--anchor-padding-bottom`       | String | The padding bottom CSS custom property.          |
| `--anchor-padding-left`         | String | The padding left CSS custom property.            |
| `--anchor-padding-right`        | String | The padding right CSS custom property.           |
| `--anchor-padding-top`          | String | The padding top CSS custom property.             |
| `--anchor-shadow`               | String | The shadow CSS custom property.                  |
| `--anchor-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--anchor-shadow-color`         | String | The shadow color CSS custom property.            |
| `--anchor-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--anchor-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--anchor-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--anchor-transition-duration`  | String | The duration of hover and focus transitions      |
| `--anchor-transition-mode`      | String | The transition mode CSS custom property.         |
| `--anchor-transition-property`  | String | The transition property CSS custom property.     |
| `--anchor-translate`            | String | The translate CSS custom property.               |

# mosaik-app-header

AppHeader - A component representing the header section of an application, often used to display application
            branding, navigation, and other important elements.

**Mixins:** Themeable, Slottable, Busyable

## Examples

```html
<mosaik-app-header>
  <div slot="menu">
  </div>
  <div slot="brand">
  </div>
  <div slot="actions">
  </div>
</mosaik-app-header>
```

App header with toggle state:

```html
<mosaik-app-header is-toggled>
  <span slot="brand">My Application</span>
</mosaik-app-header>
```

## Properties

| Property         | Attribute   | Modifiers | Type                                         | Description                                      |
|------------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isBusy`         | `is-busy`   |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isToggled`      | `isToggled` |           | `boolean`                                    | Gets or sets the `isToggled` property.           |
| `lang`           | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `scrollTargetFn` |             |           | `(() => Element \| null) \| null`            | Gets or sets the `scrollTargetFn` property.      |
| `themeName`      |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | The slot for action buttons or icons, typically used for user profile options or quick actions. |
| `brand`   | The slot for the application branding, such as a logo or title. |
| `menu`    | The slot for the menu button, which can be used to toggle navigation drawers or other menus. |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description                                      |
|---------------|--------------------------------------------------|
| `progressBar` | The progressBar part.                            |
| `root`        | The root part of the AppHeader component, used for applying styles and theming. |
| `toggle`      | The toggle button part of the AppHeader, which can be used to open or close navigation drawers. |
| `toolbar`     | The toolbar part of the AppHeader component, used for containing navigation or action items. |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--app-header-background-color`     | String | The header background color CSS custom property. |
| `--app-header-border-color`         | String | The header border color CSS custom property.     |
| `--app-header-border-radius`        | String | The header border radius CSS custom property.    |
| `--app-header-border-style`         | String | The header border style CSS custom property.     |
| `--app-header-border-width`         | String | The header border width CSS custom property.     |
| `--app-header-font-family`          | String | The header font family CSS custom property.      |
| `--app-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--app-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--app-header-font-size`            | String | The header font size CSS custom property.        |
| `--app-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--app-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--app-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--app-header-foreground-color`     | String | The header foreground color CSS custom property. |
| `--app-header-gap`                  | String | The header gap CSS custom property.              |
| `--app-header-line-thickness`       | String | The header line thickness CSS custom property.   |
| `--app-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--app-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--app-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--app-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--app-header-shadow`               | String | The header shadow CSS custom property.           |
| `--app-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--app-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--app-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--app-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--app-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--app-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--app-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--app-header-transition-property`  | String | The header transition property CSS custom property. |
| `--app-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-app

App - A comprehensive application shell component that provides the foundation layout structure for modern web applications.

**Mixins:** Themeable, Slottable

## Examples

Basic application shell:

```html
<mosaik-app>
  <nav slot="nav">
    <a href="/dashboard">Dashboard</a>
    <a href="/settings">Settings</a>
  </nav>
  <main slot="content">
    <p>Welcome to the application.</p>
  </main>
</mosaik-app>
```

App with navigation and header:

```html
<mosaik-app has-nav has-header>
  <mosaik-app-header></mosaik-app-header>
  <nav slot="nav">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <main slot="content">
    <p>Application content here.</p>
  </main>
  <footer slot="footer">
    <p>© 2024 My Company.</p>
  </footer>
</mosaik-app>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasHeader`    | `hasHeader` |           | `boolean`                                    | Gets or sets the `hasHeader` property.           |
| `hasNav`       | `hasNav`    |           | `boolean`                                    | Gets or sets the `hasNav` property.              |
| `isMobile`     | `isMobile`  |           | `boolean`                                    | Gets or sets the `isMobile` property.            |
| `isNavOpen`    | `isNavOpen` |           | `boolean`                                    | Gets or sets the `isNavOpen` property.           |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `theme`        |             |           | `ITheme \| null`                             | Gets or sets the `theme` property.               |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `closeNavigation`      | `(): void`                                       | Closes the navigation drawer.                    |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `openNavigation`       | `(): void`                                       | Opens the navigation drawer.                     |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggleNavigation`     | `(): void`                                       | Toggles the navigation drawer.                   |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name            | Description                                      |
|-----------------|--------------------------------------------------|
| `content`       | Main content area for primary application content and views |
| `footer`        | Footer area for secondary information, links, and application metadata |
| `header`        | The header slot.                                 |
| `headerActions` | The headerActions slot.                          |
| `headerLogo`    | The headerLogo slot.                             |
| `headerMenu`    | The headerMenu slot.                             |
| `nav`           | Navigation drawer content area for primary navigation links and menu items |
| `style`         | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `content` | Main content wrapper for application views and functionality |
| `drawer`  | Navigation drawer container for side navigation elements |
| `header`  | Application header section containing branding and navigation controls |
| `nav`     | Navigation area within the drawer for menu items and links |

## CSS Custom Properties

| Property                     | Type   | Description                                   |
|------------------------------|--------|-----------------------------------------------|
| `--app-background-color`     | Color  | Background color for the application shell    |
| `--app-border-radius`        | String | The border radius CSS custom property.        |
| `--app-content-offset-top`   | String | The content offset top CSS custom property.   |
| `--app-drawer-height`        | String | The drawer height CSS custom property.        |
| `--app-drawer-width`         | String | Width of the navigation drawer when expanded  |
| `--app-font-family`          | String | The font family CSS custom property.          |
| `--app-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--app-font-line-height`     | String | The font line height CSS custom property.     |
| `--app-font-size`            | String | The font size CSS custom property.            |
| `--app-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--app-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--app-font-weight`          | String | The font weight CSS custom property.          |
| `--app-foreground-color`     | String | The foreground color CSS custom property.     |
| `--app-gap`                  | String | The gap CSS custom property.                  |
| `--app-line-thickness`       | String | The line thickness CSS custom property.       |
| `--app-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--app-padding-left`         | String | The padding left CSS custom property.         |
| `--app-padding-right`        | String | The padding right CSS custom property.        |
| `--app-padding-top`          | String | The padding top CSS custom property.          |
| `--app-shadow`               | String | The shadow CSS custom property.               |
| `--app-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--app-shadow-color`         | String | The shadow color CSS custom property.         |
| `--app-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--app-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--app-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--app-transition-duration`  | String | The transition duration CSS custom property.  |
| `--app-transition-mode`      | String | The transition mode CSS custom property.      |
| `--app-transition-property`  | String | The transition property CSS custom property.  |
| `--app-translate`            | String | The translate CSS custom property.            |

# mosaik-attachment-chat-tool

The `AttachmentChatToolElement` element.

**Mixins:** Themeable, Disableable

## Examples

Basic attachment tool:

```html
<mosaik-attachment-chat-tool></mosaik-attachment-chat-tool>
```

Allow multiple files with a limit:

```html
<mosaik-attachment-chat-tool multiple max-files="5"></mosaik-attachment-chat-tool>
```

## Properties

| Property             | Attribute     | Modifiers | Type                                          | Description                                      |
|----------------------|---------------|-----------|-----------------------------------------------|--------------------------------------------------|
| `accept`             |               |           | `string[]`                                    | Gets or sets the `accept` property.              |
| `attachmentRejected` |               | readonly  | `IEventEmitter<IAttachmentRejectEventDetail>` | Called when an attachment is rejected.<br />Provides reference to `IAttachmentRejectEventDetail` as event detail. |
| `changed`            |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`  | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`          |               | readonly  | `IEventEmitter<void>`                         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`         |           | `FlowDirection`                               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `directory`          | `directory`   |           | `boolean`                                     | Gets or sets the `directory` property.           |
| `disabled`           | `disabled`    |           | `boolean`                                     | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`       |               | readonly  | `IEventEmitter<void>`                         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dock`               | `dock`        |           | `"left" \| "right"`                           | Gets or sets the `dock` property.                |
| `lang`               | `lang`        |           | `string`                                      | The lang property indicates the language of the element's content. |
| `maxFileSize`        | `maxFileSize` |           | `number`                                      | Gets or sets the `maxFileSize` property.         |
| `maxFiles`           | `maxFiles`    |           | `number`                                      | Gets or sets the `maxFiles` property.            |
| `multiple`           | `multiple`    |           | `boolean`                                     | Gets or sets the `multiple` property.            |
| `themeName`          |               |           | `string`                                      | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(chat: ChatElement): void`                      | Attaches the tool to the specified chat element.<br /><br />**chat**: The chat element to attach to. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `execute`       | `(args: File[] \| FileList): boolean`            | Executes the chat tool with the given arguments. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `attachmentReject` | `AttachmentRejectEvent` | Called when an attachment is rejected.           |
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `filesPicked`      | `FilesPickedEvent`      | Called when a file is picked.                    |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-audio

Audio - A media control for playing sound.

**Mixins:** Themeable, Disableable, Dimensionable

## Examples

Basic audio player with controls:

```html
<mosaik-audio show-controls></mosaik-audio>
```

Looping muted audio with a legend:

```html
<mosaik-audio loop muted legend="Background music" legend-position="bottom"></mosaik-audio>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                             | Description                                      |
|------------------|------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `autoPlay`       | `autoPlay`       |           | `boolean`                                        | Gets or sets the `autoPlay` property.            |
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`            |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasSrc`         |                  | readonly  | `boolean`                                        | Returns true when a source is set.               |
| `height`         | `height`         |           | `CssLength`                                      | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `lang`           | `lang`           |           | `string`                                         | The lang property indicates the language of the element's content. |
| `legend`         | `legend`         |           | `string`                                         | Gets or sets the `legend` property.              |
| `legendPosition` | `legendPosition` |           | `AudioLegendPosition`                            | Gets or sets the `legendPosition` property.      |
| `loop`           | `loop`           |           | `boolean`                                        | Returns the `loop` property.                     |
| `muted`          | `muted`          |           | `boolean`                                        | Returns the `muted` property.                    |
| `ratio`          | `ratio`          |           | `CssAspectRatio`                                 | Gets or sets the `ratio` property.               |
| `showControls`   | `showControls`   |           | `boolean`                                        | Gets or sets the `showControls` property.        |
| `src`            |                  |           | `string \| Blob \| MediaStream \| MediaSource \| null` | Gets or sets the `src` property.                 |
| `themeName`      |                  |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`          | `width`          |           | `CssLength`                                      | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `load`          | `(): void`                                       | Reloads the audio source.                        |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `pause`         | `(): void`                                       | Pauses the audio.                                |
| `play`          | `(): Promise<void>`                              | Plays the audio.                                 |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`        | `(): void`                                       | Toggles playback.                                |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default content slot.                        |
| `legend` | The legend slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                    |
|-----------|--------------------------------|
| `audio`   | The native audio element part. |
| `content` | The content overlay part.      |
| `legend`  | The legend part.               |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--audio-aspect-ratio`                | String | The aspect ratio CSS custom property.            |
| `--audio-background-color`            | String | The background color CSS custom property.        |
| `--audio-border-color`                | String | The border color CSS custom property.            |
| `--audio-border-radius`               | String | The border radius CSS custom property.           |
| `--audio-border-style`                | String | The border style CSS custom property.            |
| `--audio-border-width`                | String | The border width CSS custom property.            |
| `--audio-font-family`                 | String | The font family CSS custom property.             |
| `--audio-font-letter-spacing`         | String | The font letter spacing CSS custom property.     |
| `--audio-font-line-height`            | String | The font line height CSS custom property.        |
| `--audio-font-size`                   | String | The font size CSS custom property.               |
| `--audio-font-text-decoration`        | String | The font text decoration CSS custom property.    |
| `--audio-font-text-transform`         | String | The font text transform CSS custom property.     |
| `--audio-font-weight`                 | String | The font weight CSS custom property.             |
| `--audio-foreground-color`            | String | The foreground color CSS custom property.        |
| `--audio-gap`                         | String | The gap CSS custom property.                     |
| `--audio-legend-font-family`          | String | The legend font family CSS custom property.      |
| `--audio-legend-font-letter-spacing`  | String | The legend font letter spacing CSS custom property. |
| `--audio-legend-font-line-height`     | String | The legend font line height CSS custom property. |
| `--audio-legend-font-size`            | String | The legend font size CSS custom property.        |
| `--audio-legend-font-text-decoration` | String | The legend font text decoration CSS custom property. |
| `--audio-legend-font-text-transform`  | String | The legend font text transform CSS custom property. |
| `--audio-legend-font-weight`          | String | The legend font weight CSS custom property.      |
| `--audio-padding-bottom`              | String | The padding bottom CSS custom property.          |
| `--audio-padding-left`                | String | The padding left CSS custom property.            |
| `--audio-padding-right`               | String | The padding right CSS custom property.           |
| `--audio-padding-top`                 | String | The padding top CSS custom property.             |
| `--audio-shadow`                      | String | The shadow CSS custom property.                  |
| `--audio-shadow-blur`                 | String | The shadow blur CSS custom property.             |
| `--audio-shadow-color`                | String | The shadow color CSS custom property.            |
| `--audio-shadow-offset-x`             | String | The shadow offset x CSS custom property.         |
| `--audio-shadow-offset-y`             | String | The shadow offset y CSS custom property.         |
| `--audio-shadow-spread`               | String | The shadow spread CSS custom property.           |
| `--audio-transition-duration`         | String | The transition duration CSS custom property.     |
| `--audio-transition-mode`             | String | The transition mode CSS custom property.         |
| `--audio-transition-property`         | String | The transition property CSS custom property.     |
| `--audio-translate`                   | String | The translate CSS custom property.               |

# AutoCompleteBoxElement - Input with autocomplete suggestions

## Description
The AutoCompleteBox component provides an input field with intelligent autocomplete suggestions based on user input. Features include dynamic suggestion filtering, keyboard navigation through suggestions, customizable suggestion templates, debounced search, remote data source support, and highlight matching text in suggestions.

## Element
- **Tag**: `mosaik-autocompletebox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the input
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `prefix` - Prefix container
- `input` - The input field
- `suffix` - Suffix container
- `dropdown` - Suggestions dropdown
- `suggestion` - Individual suggestion item

## Examples

### Basic autocomplete
```html
<mosaik-autocompletebox 
    label="Country" 
    placeholder="Type to search...">
</mosaik-autocompletebox>
```

### With suggestions array
```html
<mosaik-autocompletebox 
    id="search" 
    label="Search"
    suggestions='["Apple", "Banana", "Cherry"]'>
</mosaik-autocompletebox>
```

### Remote data source
```html
<mosaik-autocompletebox 
    id="userSearch" 
    label="Search Users" 
    debounce="300">
</mosaik-autocompletebox>

<script>
    const input = document.getElementById('userSearch');
    input.addEventListener('input', async (e) => {
        const results = await fetch(`/api/users?q=${e.target.value}`);
        input.suggestions = await results.json();
    });
</script>
```

# mosaik-autocompletebox

Auto Complete Box - An input field with auto-completion functionality for enhanced user experience.

**Mixins:** Slottable, DropDownable, Appearanceable, Variantable, Labelable, Clearable, Valueable, Disableable, Invalidable, Themeable, AutoCompleteable, Focusable

## Examples

Basic usage with static items (set via JavaScript):

```html
<mosaik-autocompletebox
  id="country-picker"
  label="Country"
  placeholder="Search countries...">
</mosaik-autocompletebox>
<script>
  document.getElementById('country-picker').items = ['Germany', 'France', 'Italy', 'Spain'];
</script>
```

With async items provider (set via JavaScript):

```html
<mosaik-autocompletebox
  id="font-picker"
  label="Font Family"
  placeholder="Search fonts...">
</mosaik-autocompletebox>
<script>
  document.getElementById('font-picker').itemsProvider = async (request) => {
    const response = await fetch(`/api/fonts?q=${request.searchText}`, { signal: request.signal });
    return response.json();
  };
</script>
```

## Properties

| Property                     | Attribute                    | Modifiers | Type                                             | Default       | Description                                      |
|------------------------------|------------------------------|-----------|--------------------------------------------------|---------------|--------------------------------------------------|
| `activeDescendantId`         |                              | readonly  | `string \| null`                                 |               | Gets the active descendant identifier for accessibility. |
| `appearance`                 | `appearance`                 |           | `Appearance`                                     |               | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     |               | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`                    |                              |           | `IEventEmitter<IEventDetail>`                    |               | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`                  |                              | readonly  | `IEventEmitter<void>`                            |               | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                        |           | `FlowDirection`                                  |               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                   |           | `boolean`                                        |               | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                              | readonly  | `IEventEmitter<void>`                            |               | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayMemberPath`          | `display-member-path`        |           | `string`                                         |               | Gets or sets the `displayMemberPath` property.<br />The default value is an empty string, which means the item itself will be used for display. |
| `dropDownDistance`           | `drop-down-distance`         |           | `number`                                         | 8             | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`             | `drop-down-height`           |           | `CssLength \| undefined`                         |               | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight`          | `drop-down-max-height`       |           | `string`                                         | "280px"       | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`           | `drop-down-max-width`        |           | `CssLength \| undefined`                         |               | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement`          | `drop-down-placement`        |           | `string`                                         | "BottomStart" | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`           | `drop-down-skidding`         |           | `number`                                         | 0             | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen`          | `drop-down-stays-open`       |           | `boolean`                                        |               | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`           | `drop-down-strategy`         |           | `string`                                         | "Fixed"       | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownSync`               | `dropDownSync`               |           | `FloatingSync`                                   |               | Gets or sets the size synchronization mode for the dropdown popup. |
| `dropDownWidth`              | `drop-down-width`            |           | `CssLength \| undefined`                         |               | Gets or sets the `dropDownWidth` property.       |
| `filterInputId`              |                              | readonly  | `string`                                         |               | Gets the identifier of the filter input element. |
| `filterPlaceholder`          | `filterPlaceholder`          |           | `string`                                         |               | Gets or sets the `filterPlaceholder` property.   |
| `filterText`                 | `filterText`                 |           | `string`                                         |               | Gets or sets the `filterText` property.<br />This is the current text value in the filter input field inside the popup. |
| `filteredItems`              |                              |           | `unknown[]`                                      |               | Gets or sets the filtered items.                 |
| `formatter`                  |                              |           | `InputFormatterFn \| null`                       |               | Gets or sets the `formatter` property.           |
| `hasSuggestions`             |                              | readonly  | `boolean`                                        |               | Gets a value indicating whether suggestions are available. |
| `highlightedIndex`           |                              | readonly  | `number`                                         |               | Gets the index of the highlighted suggestion.    |
| `inputId`                    |                              | readonly  | `string`                                         |               | Gets the identifier of the input element.        |
| `intl`                       |                              | readonly  | `AutoCompleteBoxElementIntl`                     |               | Returns the `intl` property.                     |
| `invalid`                    | `invalid`                    |           | `boolean`                                        |               | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`                | `is-clearable`               |           | `boolean`                                        |               | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`             | `is-drop-down-open`          |           | `boolean`                                        |               | Gets or sets the `isDropDownOpen` property.      |
| `isFocused`                  | `is-focused`                 |           | `boolean`                                        |               | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isPopulating`               |                              |           | `boolean`                                        |               | Gets a value indicating whether the control is currently populating suggestions. |
| `isTextCompletionEnabled`    | `is-text-completion-enabled` |           | `boolean`                                        |               | Gets or sets the `isTextCompletionEnabled` property.<br />The default value is {@code false}, which means text completion is disabled. |
| `itemSelected`               |                              |           | `IEventEmitter<IAutoCompleteItemSelectedEventDetail>` |               | Called when an item has been selected.<br />Provides reference to `IAutoCompleteItemSelectedEventDetail` as event detail. |
| `items`                      |                              |           | `unknown[]`                                      |               | Gets or sets the `items` property.<br />The default value is an empty array, which means no items are available. |
| `itemsProvider`              |                              |           | `ItemsProviderFn \| null`                        |               | Gets or sets the items provider function.<br />When assigned, the provider will be invoked for every search request<br />instead of filtering the static `items` list. |
| `label`                      |                              |           | `string`                                         |               | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                       |           | `string`                                         |               | The lang property indicates the language of the element's content. |
| `listboxId`                  |                              | readonly  | `string`                                         |               | Gets the identifier of the suggestion list element. |
| `minimumPopulateDelay`       | `minimum-populate-delay`     |           | `number`                                         |               | Gets or sets the `minimumPopulateDelay` property.<br />The default value is {@code 500}, which means the search will be delayed by 500 milliseconds after the last keystroke. |
| `minimumPrefixLength`        | `minimum-prefix-length`      |           | `number`                                         |               | Gets or sets the `minimumPrefixLength` property.<br />The default value is {@code 1}, which means the search will start after typing one character. |
| `parser`                     |                              |           | `InputParserFn \| null`                          |               | Gets or sets the `parser` property.              |
| `placeholder`                | `placeholder`                |           | `string`                                         |               | Gets or sets the `placeholder` property.         |
| `populated`                  |                              |           | `IEventEmitter<IAutoCompletePopulatedEventDetail>` |               | Called when the items have been populated.<br />Provides reference to `IAutoCompletePopulatedEventDetail` as event detail. |
| `populating`                 |                              |           | `IEventEmitter<IAutoCompletePopulatingEventDetail>` |               | Called when the items are being populated.<br />Provides reference to `IAutoCompletePopulatingEventDetail` as event detail. |
| `readonly`                   | `readonly`                   |           | `boolean`                                        |               | Gets or sets the `readonly` property.            |
| `renderItem`                 |                              |           | `((item: unknown, index: number) => string \| TemplateResult) \| null` |               | Gets or sets the custom render function for suggestion items.<br />When provided, this function is used to render each item in the suggestion list. |
| `required`                   | `required`                   |           | `boolean`                                        |               | Gets or sets the `required` property.            |
| `searchMode`                 | `search-mode`                |           | `AutoCompleteTextSearchMode`                     |               | Gets or sets the `searchMode` property.<br />The default value is `AutoCompleteTextSearchMode.Contains`, which means the search will match any part of the text. |
| `shouldRenderSuggestions`    |                              | readonly  | `boolean`                                        |               | Gets a value indicating whether the suggestion list should be rendered. |
| `shouldShowLoadingState`     |                              | readonly  | `boolean`                                        |               | Gets a value indicating whether the loading state should be displayed. |
| `shouldShowNoResultsMessage` |                              | readonly  | `boolean`                                        |               | Gets a value indicating whether the no-results message should be displayed. |
| `state`                      | `state`                      |           | `InputState`                                     |               | Gets or sets the `state` property.               |
| `text`                       | `text`                       |           | `string`                                         |               | Gets or sets the `text` property.<br />This is the current text value displayed in the input field. |
| `textAlign`                  | `textAlign`                  |           | `TextAlignment`                                  |               | Gets or sets the `textAlign` property.           |
| `themeName`                  |                              |           | `string`                                         |               | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`                      | `value`                      |           | `TType`                                          |               | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `valueMemberPath`            | `value-member-path`          |           | `string`                                         |               | Gets or sets the `valueMemberPath` property.<br />The default value is an empty string, which means the item itself will be used as the value. |
| `variant`                    | `variant`                    |           | `Variant`                                        |               | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                    | Type                                             | Description                                      |
|---------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`              | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`            | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`           | `(): boolean`                                    | Checks the validity of the element.              |
| `clear`                   | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `close`                   | `(): void`                                       | Closes the drop down.                            |
| `emit`                    | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getDisplayValue`         | `(item: unknown): string`                        | Gets the display value of an item.               |
| `getItemValue`            | `(item: unknown): string`                        | Gets the value for an item.<br />If `valueMemberPath` is specified, returns the value of that path.<br />Otherwise, returns the display value.<br /><br />**item**: The item to get the value for. |
| `getOptionId`             | `(index: number): string`                        | Gets the identifier for the suggestion option at the specified index.<br /><br />**index**: The index of the option. |
| `getSlotAssignments`      | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`    | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`          | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`                 | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`          | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree`   | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                     | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                      | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onCaretClick`            | `(event: Event): void`                           |                                                  |
| `onFilterCallback`        | `(items: unknown[]): void`                       |                                                  |
| `onFilterInput`           | `(event: Event): void`                           |                                                  |
| `onFloatingActiveChanged` | `(isActive: boolean): void`                      |                                                  |
| `onKeyDown`               | `(event: KeyboardEvent): void`                   |                                                  |
| `onSelectCallback`        | `(item: unknown): void`                          |                                                  |
| `onSlotChanges`           | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `onSuggestionClick`       | `(index: number): void`                          |                                                  |
| `onSuggestionMouseDown`   | `(event: MouseEvent): void`                      |                                                  |
| `open`                    | `(): void`                                       | Opens the drop down.                             |
| `renderHighlightedItem`   | `(item: unknown): string \| TemplateResult`      |                                                  |
| `renderSuggestionItem`    | `(item: unknown, index: number): string \| TemplateResult` |                                                  |
| `requestUpdate`           | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                   | `(): void`                                       | Resets the value of the element.                 |
| `toggle`                  | `(): void`                                       | Toggles the drop down.                           |
| `updateSearchText`        | `(searchText: string): void`                     |                                                  |
| `updateSelectedItem`      | `(item: unknown): void`                          |                                                  |

## Events

| Event                    | Type                          | Description                                      |
|--------------------------|-------------------------------|--------------------------------------------------|
| `autoCompletePopulated`  | `AutoCompletePopulatedEvent`  | Fired when the suggestions have been loaded.     |
| `autoCompletePopulating` | `AutoCompletePopulatingEvent` | Fired when the component starts loading suggestions. |
| `changed`                | `PropertyChangedEvent`        | Emitted when any attribute changes before update |
| `cleared`                | `ClearedEvent`                | Fired when the value is cleared.                 |
| `connected`              | `ConnectedEvent`              | Emitted when the element is connected to the DOM |
| `disconnected`           | `DisconnectedEvent`           | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the input value.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input value.            |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `caret`    | The caret part.                                  |
| `empty`    | The empty/no results state.                      |
| `filter`   | The filter part.                                 |
| `input`    | The text input field.                            |
| `loading`  | The loading indicator.                           |
| `menu`     | The menu part.                                   |
| `menuItem` | The menuItem part.                               |
| `popup`    | The floating popup container for the suggestions. |
| `portal`   | The portal container for the dropdown.           |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--auto-complete-box-background-color`          | Color  | The background color.                            |
| `--auto-complete-box-border-color`              | Color  | The border color.                                |
| `--auto-complete-box-border-radius`             | String | The border radius.                               |
| `--auto-complete-box-border-style`              | String | The border style.                                |
| `--auto-complete-box-border-width`              | String | The border width.                                |
| `--auto-complete-box-focus-ring-active-width`   | String | The complete box focus ring active width CSS custom property. |
| `--auto-complete-box-focus-ring-color`          | String | The complete box focus ring color CSS custom property. |
| `--auto-complete-box-focus-ring-inward-offset`  | String | The complete box focus ring inward offset CSS custom property. |
| `--auto-complete-box-focus-ring-outward-offset` | String | The complete box focus ring outward offset CSS custom property. |
| `--auto-complete-box-font-family`               | String | The font family.                                 |
| `--auto-complete-box-font-letter-spacing`       | String | The complete box font letter spacing CSS custom property. |
| `--auto-complete-box-font-line-height`          | String | The complete box font line height CSS custom property. |
| `--auto-complete-box-font-size`                 | String | The font size.                                   |
| `--auto-complete-box-font-text-decoration`      | String | The complete box font text decoration CSS custom property. |
| `--auto-complete-box-font-text-transform`       | String | The complete box font text transform CSS custom property. |
| `--auto-complete-box-font-weight`               | String | The font weight.                                 |
| `--auto-complete-box-foreground-color`          | Color  | The foreground color.                            |
| `--auto-complete-box-gap`                       | String | The gap between elements.                        |
| `--auto-complete-box-padding-bottom`            | String | The padding bottom.                              |
| `--auto-complete-box-padding-left`              | String | The padding left.                                |
| `--auto-complete-box-padding-right`             | String | The padding right.                               |
| `--auto-complete-box-padding-top`               | String | The padding top.                                 |
| `--auto-complete-box-shadow`                    | String | The shadow.                                      |
| `--auto-complete-box-shadow-blur`               | String | The complete box shadow blur CSS custom property. |
| `--auto-complete-box-shadow-color`              | String | The complete box shadow color CSS custom property. |
| `--auto-complete-box-shadow-offset-x`           | String | The complete box shadow offset x CSS custom property. |
| `--auto-complete-box-shadow-offset-y`           | String | The complete box shadow offset y CSS custom property. |
| `--auto-complete-box-shadow-spread`             | String | The complete box shadow spread CSS custom property. |
| `--auto-complete-box-transition-duration`       | String | The transition duration.                         |
| `--auto-complete-box-transition-mode`           | String | The complete box transition mode CSS custom property. |
| `--auto-complete-box-transition-property`       | String | The complete box transition property CSS custom property. |
| `--auto-complete-box-translate`                 | String | The complete box translate CSS custom property.  |

# mosaik-avatar-group

Avatar Group - A grouping of avatar images typically representing multiple users or entities, often used for social or team displays.

**Mixins:** Themeable, Disableable, Sizeable, Variantable, Appearanceable

## Examples

Basic avatar group:

```html
<mosaik-avatar-group>
  <mosaik-avatar></mosaik-avatar>
  <mosaik-avatar></mosaik-avatar>
  <mosaik-avatar></mosaik-avatar>
</mosaik-avatar-group>
```

Avatar group with max visible count and shared appearance:

```html
<mosaik-avatar-group max-length="3" size="medium" appearance="soft" variant="primary">
  <mosaik-avatar></mosaik-avatar>
  <mosaik-avatar></mosaik-avatar>
  <mosaik-avatar></mosaik-avatar>
  <mosaik-avatar></mosaik-avatar>
  <mosaik-avatar></mosaik-avatar>
</mosaik-avatar-group>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxLength`    | `maxLength`  |           | `number`                                     | Gets or sets the `maxLength` property.           |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
|            | The default slot.                                |
| `overflow` | The overflow slot.                               |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description        |
|------------|--------------------|
| `overflow` | The overflow part. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--avatar-group-background-color`     | String | The group background color CSS custom property.  |
| `--avatar-group-border-color`         | String | The group border color CSS custom property.      |
| `--avatar-group-border-radius`        | String | The group border radius CSS custom property.     |
| `--avatar-group-border-style`         | String | The group border style CSS custom property.      |
| `--avatar-group-border-width`         | String | The group border width CSS custom property.      |
| `--avatar-group-font-family`          | String | The group font family CSS custom property.       |
| `--avatar-group-font-letter-spacing`  | String | The group font letter spacing CSS custom property. |
| `--avatar-group-font-line-height`     | String | The group font line height CSS custom property.  |
| `--avatar-group-font-size`            | String | The group font size CSS custom property.         |
| `--avatar-group-font-text-decoration` | String | The group font text decoration CSS custom property. |
| `--avatar-group-font-text-transform`  | String | The group font text transform CSS custom property. |
| `--avatar-group-font-weight`          | String | The group font weight CSS custom property.       |
| `--avatar-group-foreground-color`     | String | The group foreground color CSS custom property.  |
| `--avatar-group-gap`                  | String | The group gap CSS custom property.               |
| `--avatar-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--avatar-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--avatar-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--avatar-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--avatar-group-shadow`               | String | The group shadow CSS custom property.            |
| `--avatar-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--avatar-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--avatar-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--avatar-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--avatar-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--avatar-group-transition-duration`  | String | The group transition duration CSS custom property. |
| `--avatar-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--avatar-group-transition-property`  | String | The group transition property CSS custom property. |
| `--avatar-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-avatar

Avatar - A circular profile representation displaying user identity through images, initials, or icons.

Renders user avatars with multiple fallback options: image, text initials, or icon.
Automatically generates initials from names and provides consistent sizing across different contexts.
Supports status badges, various appearances, and accessibility features for user identification.

**Mixins:** Themeable, Sizeable, Appearanceable, Variantable, Disableable

## Example

```html
<!-- Default avatar (displays a placeholder icon; set src/text via JavaScript properties) -->
<mosaik-avatar></mosaik-avatar>

<!-- Avatar with size and appearance -->
<mosaik-avatar size="large" appearance="solid" variant="primary"></mosaik-avatar>

<!-- Disabled avatar with status badge -->
<mosaik-avatar disabled>
  <mosaik-badge slot="badge" appearance="solid" variant="error"></mosaik-badge>
</mosaik-avatar>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayMode`  | `displayMode` |           | `"text" \| "image" \| "icon" \| null`        | Returns the `displayMode` property.              |
| `hasBadge`     | `hasBadge`    | readonly  | `boolean`                                    | Returns the `hasBadge` property.                 |
| `icon`         |               |           | `string`                                     | Icon is used to display an icon.<br />By Default it will show nothing.<br /><br />The icon is only used if no image is provided. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`        |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `src`          |               |           | `string`                                     | Src is used to display an image.<br />By Default it will show nothing. |
| `text`         |               |           | `string`                                     | Text is used to display the initials.<br />By Default it will display the first letter of each word.<br /><br />The text is only used if no image or icon is provided. |
| `textAccessor` |               |           | `(value: string) => string`                  | Gets or sets the `textAccessor` property.        |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method               | Type                                             | Description                                      |
|----------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`         | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `changeTextAccessor` | `(accessor: (value: string): string) => void`    |                                                  |
| `emit`               | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`                | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                 | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`      | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content for avatar display (overrides automatic text/icon generation) |
| `badge` | Status indicator or notification badge positioned on the avatar |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `backplate` | The circular background container for all avatar content |
| `icon`      | The icon part.                                   |
| `text`      | The text/initials container for text-based avatars |

## CSS Custom Properties

| Property                          | Type   | Description                                     |
|-----------------------------------|--------|-------------------------------------------------|
| `--avatar-background-color`       | Color  | Background color for text/icon avatars          |
| `--avatar-badge-gap`              | String | The badge gap CSS custom property.              |
| `--avatar-badge-horizontal-align` | String | The badge horizontal align CSS custom property. |
| `--avatar-badge-radius`           | String | The badge radius CSS custom property.           |
| `--avatar-badge-vertical-align`   | String | The badge vertical align CSS custom property.   |
| `--avatar-border-color`           | String | The border color CSS custom property.           |
| `--avatar-border-radius`          | String | Border radius (typically 50% for circular)      |
| `--avatar-border-style`           | String | The border style CSS custom property.           |
| `--avatar-border-width`           | String | The border width CSS custom property.           |
| `--avatar-diameter`               | String | The diameter CSS custom property.               |
| `--avatar-font-family`            | String | The font family CSS custom property.            |
| `--avatar-font-letter-spacing`    | String | The font letter spacing CSS custom property.    |
| `--avatar-font-line-height`       | String | The font line height CSS custom property.       |
| `--avatar-font-size`              | String | Font size for initials text                     |
| `--avatar-font-text-decoration`   | String | The font text decoration CSS custom property.   |
| `--avatar-font-text-transform`    | String | The font text transform CSS custom property.    |
| `--avatar-font-weight`            | String | Font weight for initials text                   |
| `--avatar-foreground-color`       | Color  | Text and icon color                             |
| `--avatar-gap`                    | String | The gap CSS custom property.                    |
| `--avatar-offset`                 | String | The offset CSS custom property.                 |
| `--avatar-padding-bottom`         | String | The padding bottom CSS custom property.         |
| `--avatar-padding-left`           | String | The padding left CSS custom property.           |
| `--avatar-padding-right`          | String | The padding right CSS custom property.          |
| `--avatar-padding-top`            | String | The padding top CSS custom property.            |
| `--avatar-shadow`                 | String | The shadow CSS custom property.                 |
| `--avatar-shadow-blur`            | String | The shadow blur CSS custom property.            |
| `--avatar-shadow-color`           | String | The shadow color CSS custom property.           |
| `--avatar-shadow-offset-x`        | String | The shadow offset x CSS custom property.        |
| `--avatar-shadow-offset-y`        | String | The shadow offset y CSS custom property.        |
| `--avatar-shadow-spread`          | String | The shadow spread CSS custom property.          |
| `--avatar-transition-duration`    | String | The transition duration CSS custom property.    |
| `--avatar-transition-mode`        | String | The transition mode CSS custom property.        |
| `--avatar-transition-property`    | String | The transition property CSS custom property.    |
| `--avatar-translate`              | String | The translate CSS custom property.              |

# mosaik-back-top

BackTop - A scrollable page navigation element that provides quick access to return to the top or bottom.

**Mixins:** Themeable, Attachable

## Examples

Basic back-to-top button (default):

```html
<mosaik-back-top></mosaik-back-top>
```

Configured for scrolling to bottom with custom offset:

```html
<mosaik-back-top offset="200" to="bottom"></mosaik-back-top>
```

Attached to a specific scrollable container:

```html
<div id="scrollContainer" style="height: 400px; overflow-y: auto;">
  <!-- Long content -->
  <mosaik-back-top for="scrollContainer"></mosaik-back-top>
</div>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`      |           | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `for`          | `for`     |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `offset`       | `offset`  |           | `number`                                     | Gets or sets the `offset` property.<br />The scroll offset threshold (in pixels) after which the back-to-top button becomes visible.<br />The default value is 120 pixels. |
| `position`     |           | readonly  | `number`                                     | Returns the `position` property.<br />The current scroll position as a percentage (0-100) of the total scrollable height. |
| `restored`     |           |           | `IEventEmitter<IEventDetail>`                | Called when the scroll position has been restored to the target location.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `to`           | `to`      |           | `"top" \| "bottom"`                          | Gets or sets the `to` property.<br />Specifies the scroll destination: 'top' scrolls to the beginning, 'bottom' scrolls to the end.<br />The default value is 'top'. |

## Methods

| Method            | Type                                             | Description                                      |
|-------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`      | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`          | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `detach`          | `(): void`                                       | Detaches the element from its current control.   |
| `emit`            | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`             | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`              | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate` | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `onClick`         | `(): void`                                       |                                                  |
| `requestUpdate`   | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `restored`     | `RestoredEvent`        | Fired when scroll position has been restored to target (top or bottom) |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for custom content (overrides default floating action button) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                                      |
|----------|--------------------------------------------------|
| `button` | The floating action button element that triggers scroll navigation |
| `root`   | The root container element wrapping the component |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--back-top-bottom`                     | String | The distance from the bottom edge of the viewport |
| `--back-top-opacity`                    | String | The base opacity when visible                    |
| `--back-top-position`                   | String | The positioning context for the back-to-top button |
| `--back-top-right`                      | String | The distance from the right edge of the viewport |
| `--back-top-transition-duration`        | String | The duration of show/hide transitions            |
| `--back-top-transition-property`        | String | The CSS properties to animate during state changes |
| `--back-top-transition-timing-function` | String | The easing function for animations               |
| `--back-top-visibility`                 | String | The visibility state control                     |
| `--back-top-z-index`                    | String | The stacking order above other page content      |

# mosaik-backdrop

Backdrop - A semi-transparent overlay that creates visual focus by dimming background content.

**Mixins:** Themeable, Animatable

## Examples

Basic backdrop for modal overlay:

```html
<mosaik-backdrop></mosaik-backdrop>
```

Programmatic control with hidden state:

```html
<mosaik-backdrop id="dialogBackdrop" hidden></mosaik-backdrop>
<dialog id="myDialog">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  <button onclick="closeDialog()">Cancel</button>
  <button onclick="confirmAction()">Confirm</button>
</dialog>

<script>
  const backdrop = document.getElementById('dialogBackdrop');
  const dialog = document.getElementById('myDialog');

  function showDialog() {
    backdrop.hidden = false;
    dialog.showModal();
  }

  function closeDialog() {
    backdrop.hidden = true;
    dialog.close();
  }
</script>
```

## Properties

| Property          | Attribute | Modifiers | Type                                         | Description                                      |
|-------------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `animationTarget` |           | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`         |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`           | `enter`   |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`    |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `hidden`          |           |           | `boolean`                                    | Gets or sets the `hidden` property.              |
| `lang`            | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`       |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `(): Promise<boolean>`                           | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `(): Promise<boolean>`                           | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                          | Type   | Description                                      |
|-----------------------------------|--------|--------------------------------------------------|
| `--backdrop-background-color`     | String | The semi-transparent background color of the overlay |
| `--backdrop-blur`                 | String | The backdrop blur filter intensity (e.g., 6px)   |
| `--backdrop-font-family`          | String | The font family CSS custom property.             |
| `--backdrop-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--backdrop-font-line-height`     | String | The font line height CSS custom property.        |
| `--backdrop-font-size`            | String | The font size CSS custom property.               |
| `--backdrop-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--backdrop-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--backdrop-font-weight`          | String | The font weight CSS custom property.             |
| `--backdrop-gap`                  | String | The gap CSS custom property.                     |
| `--backdrop-padding-bottom`       | String | The padding bottom CSS custom property.          |
| `--backdrop-padding-left`         | String | The padding left CSS custom property.            |
| `--backdrop-padding-right`        | String | The padding right CSS custom property.           |
| `--backdrop-padding-top`          | String | The padding top CSS custom property.             |
| `--backdrop-shadow`               | String | The shadow CSS custom property.                  |
| `--backdrop-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--backdrop-shadow-color`         | String | The shadow color CSS custom property.            |
| `--backdrop-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--backdrop-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--backdrop-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--backdrop-transition-duration`  | String | The duration of fade-in/fade-out animations      |
| `--backdrop-transition-mode`      | String | The timing function for transition animations    |
| `--backdrop-transition-property`  | String | The CSS properties to animate during transitions |
| `--backdrop-translate`            | String | The translate CSS custom property.               |

# mosaik-badge

Badge - A compact visual indicator for displaying status, counts, labels, or notifications.

**Mixins:** Themeable, Appearanceable, Variantable, Sizeable, Disableable, Labelable

## Examples

Notification count badge positioned over a button (set the badge label via the `label` JavaScript property):

```html
<div style="position: relative; display: inline-block;">
  <mosaik-button></mosaik-button>
  <mosaik-badge appearance="solid" variant="error" overlap position="top-right"></mosaik-badge>
</div>
```

Standalone dot indicator badge:

```html
<mosaik-badge variant="success" attached></mosaik-badge>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Default | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `attached`     | `attached`   |           | `boolean`                                    | "false" | Gets or sets the `attached` property.            |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |              |           | `string`                                     |         | Gets or sets the `icon` property.                |
| `label`        |              |           | `string`                                     |         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`       |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `overlap`      | `overlap`    |           | `boolean`                                    |         | Gets or sets the `overlap` property.             |
| `position`     | `position`   |           | `BadgePosition`                              |         | Gets or sets the `position` property.            |
| `size`         | `size`       |           | `Size`                                       |         | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |              |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description     |
|---------|-----------------|
| `icon`  | The icon part.  |
| `label` | The label part. |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--badge-background-color`     | Color  | The background color of the badge             |
| `--badge-border-color`         | String | The border color CSS custom property.         |
| `--badge-border-radius`        | String | The border radius controlling badge shape     |
| `--badge-border-style`         | String | The border style CSS custom property.         |
| `--badge-border-width`         | String | The border width CSS custom property.         |
| `--badge-font-family`          | String | The font family CSS custom property.          |
| `--badge-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--badge-font-line-height`     | String | The font line height CSS custom property.     |
| `--badge-font-size`            | String | The font size for badge text content          |
| `--badge-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--badge-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--badge-font-weight`          | String | The font weight for badge text display        |
| `--badge-foreground-color`     | Color  | The text and icon color within the badge      |
| `--badge-gap`                  | String | The gap CSS custom property.                  |
| `--badge-height`               | String | The height CSS custom property.               |
| `--badge-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--badge-padding-left`         | String | The padding left CSS custom property.         |
| `--badge-padding-right`        | String | The padding right CSS custom property.        |
| `--badge-padding-top`          | String | The padding top CSS custom property.          |
| `--badge-shadow`               | String | The shadow CSS custom property.               |
| `--badge-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--badge-shadow-color`         | String | The shadow color CSS custom property.         |
| `--badge-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--badge-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--badge-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--badge-transition-duration`  | String | The transition duration CSS custom property.  |
| `--badge-transition-mode`      | String | The transition mode CSS custom property.      |
| `--badge-transition-property`  | String | The transition property CSS custom property.  |
| `--badge-translate`            | String | The translate CSS custom property.            |

# mosaik-banner-group

BannerGroup - A container component for managing and presenting multiple `Banner` instances.

**Mixins:** Themeable, Orientable, Disableable, Appearanceable, Variantable, Slottable

## Examples

Single-pager banner group with navigation:

```html
<mosaik-banner-group max-length="1" loop>
  <mosaik-banner is-open variant="info">
    <mosaik-banner-header text="Update 1"></mosaik-banner-header>
  </mosaik-banner>
  <mosaik-banner is-open variant="success">
    <mosaik-banner-header text="Update 2"></mosaik-banner-header>
  </mosaik-banner>
  <mosaik-banner is-open variant="warning">
    <mosaik-banner-header text="Update 3"></mosaik-banner-header>
  </mosaik-banner>
</mosaik-banner-group>
```

Stacked banner group showing multiple banners:

```html
<mosaik-banner-group max-length="3">
  <mosaik-banner is-open variant="error">
    <mosaik-banner-header text="Critical Error"></mosaik-banner-header>
  </mosaik-banner>
  <mosaik-banner is-open variant="warning">
    <mosaik-banner-header text="Warning Notice"></mosaik-banner-header>
  </mosaik-banner>
</mosaik-banner-group>
```

## Properties

| Property          | Attribute         | Modifiers | Type                                           | Description                                      |
|-------------------|-------------------|-----------|------------------------------------------------|--------------------------------------------------|
| `appearance`      | `appearance`      |           | `Appearance`                                   | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `canNext`         |                   | readonly  | `boolean`                                      | Returns whether next navigation is possible.     |
| `canPrev`         |                   | readonly  | `boolean`                                      | Returns whether previous navigation is possible. |
| `change`          |                   | readonly  | `IEventEmitter<IBannerGroupChangeEventDetail>` | Fired when the active index changes.             |
| `changed`         |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`   | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                   | readonly  | `IEventEmitter<void>`                          | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`             |           | `FlowDirection`                                | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`        |           | `boolean`                                      | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |                   | readonly  | `IEventEmitter<void>`                          | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dismissBehavior` | `dismissBehavior` |           | `BannerGroupDismissBehavior`                   | Gets or sets the `dismissBehavior` property defining how dismissed banners are handled.<br />(Future extension point.) |
| `index`           | `index`           |           | `number`                                       | Gets or sets the `index` property representing the current active (start) index. |
| `lang`            | `lang`            |           | `string`                                       | The lang property indicates the language of the element's content. |
| `length`          |                   | readonly  | `number`                                       | Returns the total number of banners.             |
| `loop`            | `loop`            |           | `boolean`                                      | Gets or sets the `loop` property enabling circular navigation. |
| `maxLength`       | `maxLength`       |           | `number`                                       | Gets or sets the `maxLength` property (1 = pager/carousel mode). |
| `orientation`     | `orientation`     |           | `Orientation`                                  | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`         | `reverse`         |           | `boolean`                                      | Gets or sets the `reverse` property displaying newest banners first when true. |
| `stacking`        | `stacking`        |           | `BannerGroupStacking`                          | Gets or sets the `stacking` property controlling vertical or depth stacking. |
| `themeName`       |                   |           | `string`                                       | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`         | `variant`         |           | `Variant`                                      | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `first`                | `(): void`                                       | Navigates to the first banner.                   |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `goTo`                 | `(i: number): void`                              | Navigates to a specific index.                   |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `last`                 | `(): void`                                       | Navigates to the last banner.                    |
| `next`                 | `(): void`                                       | Navigates to the next banner.                    |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `previous`             | `(): void`                                       | Navigates to the previous banner.                |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `change`       | `ActiveChangedEvent`   | Fired when the active index changes.             |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for banner items.               |
| `next`  | Slot for a custom next control.                  |
| `prev`  | Slot for a custom previous control.              |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                             |
|----------------|-----------------------------------------|
| `control-next` | The next control wrapper.               |
| `control-prev` | The previous control wrapper.           |
| `root`         | The root wrapper part.                  |
| `viewport`     | The viewport that contains the banners. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--banner-group-font-family`          | String | The group font family CSS custom property.       |
| `--banner-group-font-letter-spacing`  | String | The group font letter spacing CSS custom property. |
| `--banner-group-font-line-height`     | String | The group font line height CSS custom property.  |
| `--banner-group-font-size`            | String | The group font size CSS custom property.         |
| `--banner-group-font-text-decoration` | String | The group font text decoration CSS custom property. |
| `--banner-group-font-text-transform`  | String | The group font text transform CSS custom property. |
| `--banner-group-font-weight`          | String | The group font weight CSS custom property.       |
| `--banner-group-gap`                  | String | Gap between stacked banners.                     |
| `--banner-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--banner-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--banner-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--banner-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--banner-group-shadow`               | String | The group shadow CSS custom property.            |
| `--banner-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--banner-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--banner-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--banner-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--banner-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--banner-group-transition-duration`  | String | Transition duration for paging.                  |
| `--banner-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--banner-group-transition-property`  | String | The group transition property CSS custom property. |
| `--banner-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-banner-header

Banner Header - A component for displaying the header text of a banner.

**Mixins:** Themeable, Variantable, Disableable, TextFormattable

## Examples

Standalone usage:

```html
<mosaik-banner-header text="This is the banner header text"></mosaik-banner-header>
```

Used inside a banner (auto-assigned to header slot):

```html
<mosaik-banner is-open>
  <mosaik-banner-header text="System Maintenance"></mosaik-banner-header>
</mosaik-banner>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |            |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`     |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`  |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Slot for the banner header content.              |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                         |
|--------|-------------------------------------|
| `text` | The text part of the banner header. |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--banner-header-background-color`     | Color  | The background color for the banner header.      |
| `--banner-header-border-color`         | Color  | The border color for the banner header.          |
| `--banner-header-font-family`          | String | The font family for the banner header text.      |
| `--banner-header-font-letter-spacing`  | String | The letter spacing for the banner header text.   |
| `--banner-header-font-line-height`     | String | The line height for the banner header text.      |
| `--banner-header-font-size`            | String | The font size for the banner header text.        |
| `--banner-header-font-text-decoration` | String | The text decoration for the banner header text.  |
| `--banner-header-font-text-transform`  | String | The text transformation for the banner header text. |
| `--banner-header-font-weight`          | String | The font weight for the banner header text.      |
| `--banner-header-foreground-color`     | Color  | The foreground color for the banner header text. |
| `--banner-header-gap`                  | String | The header gap CSS custom property.              |
| `--banner-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--banner-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--banner-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--banner-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--banner-header-shadow`               | String | The header shadow CSS custom property.           |
| `--banner-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--banner-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--banner-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--banner-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--banner-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--banner-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--banner-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--banner-header-transition-property`  | String | The header transition property CSS custom property. |
| `--banner-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-banner-sub-header

Banner Sub Header - A component for displaying the sub-header text of a banner.

**Mixins:** Themeable, Disableable, Variantable, TextFormattable

## Examples

Standalone usage:

```html
<mosaik-banner-sub-header text="This is the banner sub-header text"></mosaik-banner-sub-header>
```

Used inside a banner (auto-assigned to subHeader slot):

```html
<mosaik-banner is-open>
  <mosaik-banner-header text="System Maintenance"></mosaik-banner-header>
  <mosaik-banner-sub-header text="Scheduled downtime from 2am to 4am."></mosaik-banner-sub-header>
</mosaik-banner>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |            |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`     |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`  |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Slot for the banner sub-header content.          |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                             |
|--------|-----------------------------------------|
| `text` | The text part of the banner sub-header. |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--banner-sub-header-background-color`     | Color  | The background color for the banner sub-header.  |
| `--banner-sub-header-border-color`         | Color  | The border color for the banner sub-header.      |
| `--banner-sub-header-font-family`          | String | The font family for the banner sub-header text.  |
| `--banner-sub-header-font-letter-spacing`  | String | The letter spacing for the banner sub-header text. |
| `--banner-sub-header-font-line-height`     | String | The line height for the banner sub-header text.  |
| `--banner-sub-header-font-size`            | String | The font size for the banner sub-header text.    |
| `--banner-sub-header-font-text-decoration` | String | The text decoration for the banner sub-header text. |
| `--banner-sub-header-font-text-transform`  | String | The text transformation for the banner sub-header text. |
| `--banner-sub-header-font-weight`          | String | The font weight for the banner sub-header text.  |
| `--banner-sub-header-foreground-color`     | Color  | The foreground color for the banner sub-header text. |
| `--banner-sub-header-gap`                  | String | The sub header gap CSS custom property.          |
| `--banner-sub-header-padding-bottom`       | String | The sub header padding bottom CSS custom property. |
| `--banner-sub-header-padding-left`         | String | The sub header padding left CSS custom property. |
| `--banner-sub-header-padding-right`        | String | The sub header padding right CSS custom property. |
| `--banner-sub-header-padding-top`          | String | The sub header padding top CSS custom property.  |
| `--banner-sub-header-shadow`               | String | The sub header shadow CSS custom property.       |
| `--banner-sub-header-shadow-blur`          | String | The sub header shadow blur CSS custom property.  |
| `--banner-sub-header-shadow-color`         | String | The sub header shadow color CSS custom property. |
| `--banner-sub-header-shadow-offset-x`      | String | The sub header shadow offset x CSS custom property. |
| `--banner-sub-header-shadow-offset-y`      | String | The sub header shadow offset y CSS custom property. |
| `--banner-sub-header-shadow-spread`        | String | The sub header shadow spread CSS custom property. |
| `--banner-sub-header-transition-duration`  | String | The sub header transition duration CSS custom property. |
| `--banner-sub-header-transition-mode`      | String | The sub header transition mode CSS custom property. |
| `--banner-sub-header-transition-property`  | String | The sub header transition property CSS custom property. |
| `--banner-sub-header-translate`            | String | The sub header translate CSS custom property.    |

# mosaik-banner

Banner - A flexible and customizable component for displaying prominent messages or actions.

**Mixins:** Themeable, Openable, Closeable, Disableable, Variantable, Appearanceable, Fitable, Elevatable, Orientable, ContentAlignable, TextFormattable, Slottable

## Examples

Basic banner with header and sub-header:

```html
<mosaik-banner is-open variant="info">
  <mosaik-banner-header text="Important Update"></mosaik-banner-header>
  <mosaik-banner-sub-header text="Details about the update go here."></mosaik-banner-sub-header>
  <mosaik-button slot="actions" label="Learn More" variant="primary"></mosaik-button>
</mosaik-banner>
```

Warning banner with close action:

```html
<mosaik-banner is-open variant="warning" appearance="soft">
  <mosaik-banner-header text="Session Expiring"></mosaik-banner-header>
  <mosaik-banner-sub-header text="Your session will expire in 5 minutes."></mosaik-banner-sub-header>
  <mosaik-button slot="actions" label="Extend Session"></mosaik-button>
  <mosaik-button slot="close" label="Dismiss" appearance="plain"></mosaik-button>
</mosaik-banner>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `closeable`                  | `closeable`                    |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`                     |                                |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `elevation`                  | `elevation`                    |           | `ElevationWeight`                            | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `formatter`                  |                                |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`                     |                                |           | `string`                                     | Gets or sets the `header` property.              |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.                |
| `iconSize`                   | `iconSize`                     |           | `Size \| null`                               | Gets or sets the `iconSize` property.            |
| `isOpen`                     | `isOpen`                       |           | `boolean`                                    | Gets or sets the `isOpen` property that allows you to show or hide the `BannerComponent`. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`                     |                                |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `subHeader`                  |                                |           | `string`                                     | Gets or sets the `subHeader` property.           |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the `BannerElement`.                      |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the `BannerElement`.                       |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): Promise<void>`                              | Toggles the `BannerElement`.<br />If the `BannerElement` is open, it will close it. If it is closed, it will open it. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Fired when the banner is closed.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Fired when the element is opened.                |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `actions`   | Slot for additional actions inside the banner.   |
| `close`     | The close slot.                                  |
| `header`    | Slot for the banner header content.              |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | Slot for the banner subheader content.           |

## CSS Shadow Parts

| Part        | Description                                  |
|-------------|----------------------------------------------|
| `actions`   | The actions container part of the banner.    |
| `close`     | The close button or icon part of the banner. |
| `elevation` | The elevation part of the banner.            |
| `header`    | The header container part of the banner.     |
| `heading`   | The heading part of the banner.              |
| `icon`      | The icon part of the banner.                 |
| `root`      | The root part of the banner.                 |
| `subHeader` | The subheader container part of the banner.  |
| `text`      | The text part of the banner.                 |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--banner-background-color`     | Color  | The background color for the banner.          |
| `--banner-border-color`         | Color  | The border color for the banner.              |
| `--banner-border-radius`        | String | The border radius for the banner.             |
| `--banner-border-style`         | String | The border style for the banner.              |
| `--banner-border-width`         | String | The border width for the banner.              |
| `--banner-font-family`          | String | The font family for the banner.               |
| `--banner-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--banner-font-line-height`     | String | The font line height CSS custom property.     |
| `--banner-font-size`            | String | The font size for the banner.                 |
| `--banner-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--banner-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--banner-font-weight`          | String | The font weight for the banner.               |
| `--banner-foreground-color`     | Color  | The foreground color for the banner.          |
| `--banner-gap`                  | String | The gap between elements within the banner.   |
| `--banner-padding-bottom`       | String | The bottom padding for the banner.            |
| `--banner-padding-left`         | String | The left padding for the banner.              |
| `--banner-padding-right`        | String | The right padding for the banner.             |
| `--banner-padding-top`          | String | The top padding for the banner.               |
| `--banner-shadow`               | String | The shadow effect for the banner.             |
| `--banner-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--banner-shadow-color`         | String | The shadow color CSS custom property.         |
| `--banner-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--banner-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--banner-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--banner-transition-duration`  | String | The transition duration for the banner.       |
| `--banner-transition-mode`      | String | The transition mode for the banner.           |
| `--banner-transition-property`  | String | The transition property for the banner.       |
| `--banner-translate`            | String | The translate CSS custom property.            |

# mosaik-box

Box - A rectangular container used to group or layout other elements.

**Mixins:** Themeable, Fitable, Dimensionable, Insetable

## Examples

Basic box container:

```html
<mosaik-box>
  <p>Content goes here</p>
</mosaik-box>
```

Highlighted cornered box:

```html
<mosaik-box highlighted cornered>
  <p>Highlighted panel</p>
</mosaik-box>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `cornered`     | `cornered`    |           | `boolean`                                    | Gets or sets the `cornered` property.            |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`          | `fit`         |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `height`       | `height`      |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `highlighted`  | `highlighted` |           | `boolean`                                    | Gets or sets the `highlighted` property.         |
| `inset`        | `inset`       |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`        | `width`       |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default slot for child elements.                 |
| `dismiss` | Slot for dismiss button.                         |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `dismiss` | The dismiss part. |

## CSS Custom Properties

| Property                     | Type   | Description                                   |
|------------------------------|--------|-----------------------------------------------|
| `--box-background-color`     | String | The background color CSS custom property.     |
| `--box-border-color`         | String | The border color CSS custom property.         |
| `--box-border-radius`        | String | The border radius CSS custom property.        |
| `--box-border-style`         | String | The border style CSS custom property.         |
| `--box-border-width`         | String | The border width CSS custom property.         |
| `--box-font-family`          | String | The font family CSS custom property.          |
| `--box-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--box-font-line-height`     | String | The font line height CSS custom property.     |
| `--box-font-size`            | String | The font size CSS custom property.            |
| `--box-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--box-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--box-font-weight`          | String | The font weight CSS custom property.          |
| `--box-foreground-color`     | String | The foreground color CSS custom property.     |
| `--box-gap`                  | String | The gap CSS custom property.                  |
| `--box-height`               | String | The height CSS custom property.               |
| `--box-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--box-padding-left`         | String | The padding left CSS custom property.         |
| `--box-padding-right`        | String | The padding right CSS custom property.        |
| `--box-padding-top`          | String | The padding top CSS custom property.          |
| `--box-shadow`               | String | The shadow CSS custom property.               |
| `--box-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--box-shadow-color`         | String | The shadow color CSS custom property.         |
| `--box-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--box-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--box-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--box-transition-duration`  | String | The transition duration CSS custom property.  |
| `--box-transition-mode`      | String | The transition mode CSS custom property.      |
| `--box-transition-property`  | String | The transition property CSS custom property.  |
| `--box-translate`            | String | The translate CSS custom property.            |
| `--box-width`                | String | The width CSS custom property.                |

# mosaik-breadcrumb-item

Breadcrumb Item - A component representing an individual link or label within a breadcrumb navigation trail.

**Mixins:** Themeable

## Example

Used inside a breadcrumb navigation trail:

```html
<mosaik-breadcrumb>
  <mosaik-breadcrumb-item>Home</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item>Category</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item>Subcategory</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item is-active>Current Page</mosaik-breadcrumb-item>
</mosaik-breadcrumb>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isActive`     | `isActive` |           | `boolean`                                    | Gets or sets the `isActive` property.            |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `firstItem`     | `(): boolean`                                    |                                                  |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The content of the breadcrumb item, typically text or an icon. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--breadcrumb-item-border-style`         | String | The item border style CSS custom property.       |
| `--breadcrumb-item-font-family`          | String | The item font family CSS custom property.        |
| `--breadcrumb-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--breadcrumb-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--breadcrumb-item-font-size`            | String | The item font size CSS custom property.          |
| `--breadcrumb-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--breadcrumb-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--breadcrumb-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--breadcrumb-item-gap`                  | String | The item gap CSS custom property.                |
| `--breadcrumb-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--breadcrumb-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--breadcrumb-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--breadcrumb-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--breadcrumb-item-shadow`               | String | The item shadow CSS custom property.             |
| `--breadcrumb-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--breadcrumb-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--breadcrumb-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--breadcrumb-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--breadcrumb-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--breadcrumb-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--breadcrumb-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--breadcrumb-item-transition-property`  | String | The item transition property CSS custom property. |
| `--breadcrumb-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-breadcrumb

Breadcrumb - A component for displaying a navigational trail to indicate the user's current location within a hierarchy.

**Mixins:** Themeable

## Examples

Basic breadcrumb navigation trail:

```html
<mosaik-breadcrumb>
  <mosaik-breadcrumb-item>Home</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item>Category</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item>Subcategory</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item is-active>Current Page</mosaik-breadcrumb-item>
</mosaik-breadcrumb>
```

Breadcrumb with wrapping enabled:

```html
<mosaik-breadcrumb wrap>
  <mosaik-breadcrumb-item>Home</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item>Products</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item>Electronics</mosaik-breadcrumb-item>
  <mosaik-breadcrumb-item is-active>Headphones</mosaik-breadcrumb-item>
</mosaik-breadcrumb>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `wrap`         | `wrap`    |           | `boolean`                                    | Gets or sets the `wrap` property.                |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`  | `(event: Event): void`                           |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                            | Type   | Description                                   |
|-------------------------------------|--------|-----------------------------------------------|
| `--breadcrumb-font-family`          | String | The font family CSS custom property.          |
| `--breadcrumb-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--breadcrumb-font-line-height`     | String | The font line height CSS custom property.     |
| `--breadcrumb-font-size`            | String | The font size CSS custom property.            |
| `--breadcrumb-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--breadcrumb-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--breadcrumb-font-weight`          | String | The font weight CSS custom property.          |
| `--breadcrumb-gap`                  | String | The gap CSS custom property.                  |
| `--breadcrumb-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--breadcrumb-padding-left`         | String | The padding left CSS custom property.         |
| `--breadcrumb-padding-right`        | String | The padding right CSS custom property.        |
| `--breadcrumb-padding-top`          | String | The padding top CSS custom property.          |
| `--breadcrumb-shadow`               | String | The shadow CSS custom property.               |
| `--breadcrumb-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--breadcrumb-shadow-color`         | String | The shadow color CSS custom property.         |
| `--breadcrumb-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--breadcrumb-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--breadcrumb-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--breadcrumb-transition-duration`  | String | The transition duration CSS custom property.  |
| `--breadcrumb-transition-mode`      | String | The transition mode CSS custom property.      |
| `--breadcrumb-transition-property`  | String | The transition property CSS custom property.  |
| `--breadcrumb-translate`            | String | The translate CSS custom property.            |

# mosaik-busy-state

BusyState - A loading state component that indicates ongoing processes or data retrieval operations.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Simple loading state:

```html
<mosaik-busy-state header="Loading..."></mosaik-busy-state>
```

Loading state with cancel action:

```html
<mosaik-busy-state header="Uploading files...">
  <mosaik-button slot="actions" appearance="soft" onclick="cancelUpload()">Cancel</mosaik-button>
</mosaik-busy-state>
```

Loading state with detail text set via JavaScript:

```html
<mosaik-busy-state id="busyState" header="Loading your dashboard"></mosaik-busy-state>
<script>
  document.getElementById('busyState').content = 'This may take a few moments';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |           |           | `string`                                     | Gets or sets the `content` property of the state. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`       | `header`  |           | `string`                                     | Gets or sets the `header` property.<br />The primary loading status message displayed to users.<br />The default value is an empty string, which means no header is displayed. |
| `icon`         |           |           | `string`                                     | Gets or sets the `icon` property.<br />The icon SVG path data for the loading indicator.<br />The default value is an empty string. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content area for additional loading state information or custom elements |
| `actions` | Action buttons or controls available during loading (e.g., cancel operation, dismiss) |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `content`    | The content text container for detailed loading information |
| `header`     | The header text container for primary loading status messaging |
| `innerStack` | The internal stack container for action slot elements |
| `symbol`     | The loading indicator container for progress ring or spinner |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--busy-state-font-family`                 | String | The state font family CSS custom property.       |
| `--busy-state-font-letter-spacing`         | String | The state font letter spacing CSS custom property. |
| `--busy-state-font-line-height`            | String | The state font line height CSS custom property.  |
| `--busy-state-font-size`                   | String | The state font size CSS custom property.         |
| `--busy-state-font-text-decoration`        | String | The state font text decoration CSS custom property. |
| `--busy-state-font-text-transform`         | String | The state font text transform CSS custom property. |
| `--busy-state-font-weight`                 | String | The state font weight CSS custom property.       |
| `--busy-state-foreground-color`            | String | The text color for busy state content            |
| `--busy-state-gap`                         | String | The spacing between symbol, text, and action elements |
| `--busy-state-header-font-family`          | String | The font family for header text                  |
| `--busy-state-header-font-letter-spacing`  | String | The letter spacing for header text               |
| `--busy-state-header-font-line-height`     | String | The line height for header text                  |
| `--busy-state-header-font-size`            | String | The font size for header text                    |
| `--busy-state-header-font-text-decoration` | String | The text decoration style for header text        |
| `--busy-state-header-font-text-transform`  | String | The text transformation style for header text    |
| `--busy-state-header-font-weight`          | String | The font weight for header text                  |
| `--busy-state-padding-bottom`              | String | The bottom padding inside the busy state container |
| `--busy-state-padding-left`                | String | The left padding inside the busy state container |
| `--busy-state-padding-right`               | String | The right padding inside the busy state container |
| `--busy-state-padding-top`                 | String | The top padding inside the busy state container  |
| `--busy-state-shadow`                      | String | The state shadow CSS custom property.            |
| `--busy-state-shadow-blur`                 | String | The state shadow blur CSS custom property.       |
| `--busy-state-shadow-color`                | String | The state shadow color CSS custom property.      |
| `--busy-state-shadow-offset-x`             | String | The state shadow offset x CSS custom property.   |
| `--busy-state-shadow-offset-y`             | String | The state shadow offset y CSS custom property.   |
| `--busy-state-shadow-spread`               | String | The state shadow spread CSS custom property.     |
| `--busy-state-transition-duration`         | String | The state transition duration CSS custom property. |
| `--busy-state-transition-mode`             | String | The state transition mode CSS custom property.   |
| `--busy-state-transition-property`         | String | The state transition property CSS custom property. |
| `--busy-state-translate`                   | String | The state translate CSS custom property.         |

# mosaik-button-group

Button Group - A user interface component for grouping multiple buttons together.

**Mixins:** Themeable, Orientable, Disableable, Appearanceable, Variantable, Slottable

## Examples

Basic button group:

```html
<mosaik-button-group>
  <mosaik-button></mosaik-button>
  <mosaik-button></mosaik-button>
  <mosaik-button></mosaik-button>
</mosaik-button-group>
```

Vertical group with shared appearance and variant:

```html
<mosaik-button-group orientation="vertical" appearance="solid" variant="primary">
  <mosaik-button></mosaik-button>
  <mosaik-button></mosaik-button>
</mosaik-button-group>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                              | Type   | Description                                    |
|---------------------------------------|--------|------------------------------------------------|
| `--button-group-background-color`     | Color  |                                                |
| `--button-group-border-color`         | Color  |                                                |
| `--button-group-border-radius`        | String |                                                |
| `--button-group-border-style`         | String |                                                |
| `--button-group-border-width`         | String |                                                |
| `--button-group-font-family`          | String |                                                |
| `--button-group-font-letter-spacing`  | String |                                                |
| `--button-group-font-line-height`     | String |                                                |
| `--button-group-font-size`            | String |                                                |
| `--button-group-font-text-decoration` | String |                                                |
| `--button-group-font-text-transform`  | String |                                                |
| `--button-group-font-weight`          | String |                                                |
| `--button-group-foreground-color`     | Color  |                                                |
| `--button-group-gap`                  | String |                                                |
| `--button-group-padding-bottom`       | String |                                                |
| `--button-group-padding-left`         | String |                                                |
| `--button-group-padding-right`        | String |                                                |
| `--button-group-padding-top`          | String |                                                |
| `--button-group-shadow`               | String |                                                |
| `--button-group-shadow-blur`          | String | The group shadow blur CSS custom property.     |
| `--button-group-shadow-color`         | String | The group shadow color CSS custom property.    |
| `--button-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property. |
| `--button-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property. |
| `--button-group-shadow-spread`        | String | The group shadow spread CSS custom property.   |
| `--button-group-transition-duration`  | String |                                                |
| `--button-group-transition-mode`      | String |                                                |
| `--button-group-transition-property`  | String |                                                |
| `--button-group-translate`            | String | The group translate CSS custom property.       |

# mosaik-button

Button - A versatile interactive element for triggering actions and user interactions.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic button with label:

```html
<mosaik-button label="Click Me"></mosaik-button>
```

Button with variant and appearance:

```html
<mosaik-button label="Save" variant="primary" appearance="solid"></mosaik-button>
```

Disabled button:

```html
<mosaik-button label="Unavailable" disabled></mosaik-button>
```

Busy/loading button:

```html
<mosaik-button label="Processing..." is-busy disabled></mosaik-button>
```

Vertical button layout:

```html
<mosaik-button label="Upload" orientation="vertical"></mosaik-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `download`                   |                                |           | `string`                                     | Gets or sets the `download` property.            |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `href`                       |                                |           | `string`                                     | Gets or sets the `href` property.                |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `rel`                        |                                |           | `string`                                     | Gets or sets the `rel` property.                 |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `target`                     |                                |           | `string`                                     | Gets or sets the `target` property.              |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `icon`    | The icon displayed alongside or instead of the label |
| `label`   | The text content or label displayed on the button |
| `overlay` | Additional overlay content such as badges or indicators |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `button`       | The main button element container                |
| `focusRing`    | The focus indicator ring for keyboard navigation |
| `icon`         | The icon display area within the button          |
| `innerStack`   | The innerStack part.                             |
| `label`        | The text label display area within the button    |
| `progressRing` | The busy state progress indicator                |
| `ripple`       | The touch feedback ripple effect container       |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--button-background-color`          | Color  | The background fill color                        |
| `--button-border-color`              | Color  | The border outline color                         |
| `--button-border-radius`             | String | The corner rounding radius                       |
| `--button-border-style`              | String | The border line style                            |
| `--button-border-width`              | String | The border thickness                             |
| `--button-focus-ring-active-width`   | String | The focus ring active width CSS custom property. |
| `--button-focus-ring-color`          | String | The focus ring color                             |
| `--button-focus-ring-inward-offset`  | String | The focus ring inward offset CSS custom property. |
| `--button-focus-ring-outward-offset` | String | The focus ring outward offset CSS custom property. |
| `--button-font-family`               | String | The font family for button text                  |
| `--button-font-letter-spacing`       | String | The letter spacing for button text               |
| `--button-font-line-height`          | String | The line height for button text                  |
| `--button-font-size`                 | String | The font size for button text                    |
| `--button-font-text-decoration`      | String | The text decoration style                        |
| `--button-font-text-transform`       | String | The text transformation style                    |
| `--button-font-weight`               | String | The font weight for button text                  |
| `--button-foreground-color`          | Color  | The text and icon color                          |
| `--button-gap`                       | String | The spacing between icon and label elements      |
| `--button-height`                    | String | The button height                                |
| `--button-icon-min-height`           | String | The icon min height CSS custom property.         |
| `--button-icon-min-width`            | String | The icon min width CSS custom property.          |
| `--button-min-height`                | String | The min height CSS custom property.              |
| `--button-min-width`                 | String | The min width CSS custom property.               |
| `--button-padding-bottom`            | String | The bottom padding inside the button             |
| `--button-padding-left`              | String | The left padding inside the button               |
| `--button-padding-right`             | String | The right padding inside the button              |
| `--button-padding-top`               | String | The top padding inside the button                |
| `--button-progress-ring-width`       | String | The progress ring width CSS custom property.     |
| `--button-ripple-color`              | Color  | The ripple color CSS custom property.            |
| `--button-ripple-duration`           | String | The ripple duration CSS custom property.         |
| `--button-shadow`                    | String | The drop shadow or elevation effect              |
| `--button-shadow-blur`               | String | The shadow blur CSS custom property.             |
| `--button-shadow-color`              | String | The shadow color CSS custom property.            |
| `--button-shadow-offset-x`           | String | The shadow offset x CSS custom property.         |
| `--button-shadow-offset-y`           | String | The shadow offset y CSS custom property.         |
| `--button-shadow-spread`             | String | The shadow spread CSS custom property.           |
| `--button-transition-duration`       | String | The duration of hover/focus transitions          |
| `--button-transition-mode`           | String | The timing function for transitions              |
| `--button-transition-property`       | String | The CSS properties to transition                 |
| `--button-translate`                 | String | The translate CSS custom property.               |
| `--button-width`                     | String | The button width (when not using fit behavior)   |

# mosaik-calendar-days-view

Calendar Days View - A component that displays a view of days within a month, allowing users to select a specific day.

**Mixins:** Themeable, Appearanceable, Variantable, Disableable, Localeable

## Examples

Basic calendar days view:

```html
<mosaik-calendar-days-view></mosaik-calendar-days-view>
```

Calendar days view with today and weekend highlighting:

```html
<mosaik-calendar-days-view
  is-today-highlighted
  is-weekend-highlighted
  show-week-numbers>
</mosaik-calendar-days-view>
```

## Properties

| Property               | Attribute              | Modifiers | Type                                             | Default | Description                                      |
|------------------------|------------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
| `appearance`           | `appearance`           |           | `Appearance`                                     |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`        |                        |           | `Date[]`                                         |         | Gets or sets the `blackoutDates` property.       |
| `changed`              |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |                        | readonly  | `IEventEmitter<void>`                            |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                  | `dir`                  |           | `FlowDirection`                                  |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`             |           | `boolean`                                        |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |                        | readonly  | `IEventEmitter<void>`                            |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayChanged`       |                        | readonly  | `IEventEmitter<ICalendarDisplayChangedEventDetail>` |         | Called when the view is changed between years, months, and days.<br />Provides reference to `ICalendarDisplayChangedEventDetail` as event detail. |
| `displayDate`          | `displayDate`          |           | `Date \| null`                                   |         | Gets or sets the `displayDate` property.         |
| `displayDateEnd`       | `displayDateEnd`       |           | `Date \| null`                                   |         | Gets or sets the `displayDateEnd` property.      |
| `displayDateStart`     | `displayDateStart`     |           | `Date \| null`                                   |         | Gets or sets the `displayDateStart` property.    |
| `firstDayOfWeek`       | `firstDayOfWeek`       |           | `DayOfWeek`                                      |         | Gets or sets the `firstDayOfWeek` property.      |
| `intl`                 |                        |           | `CalendarElementIntl \| null`                    |         | Gets or sets the `intl` property.                |
| `isTodayHighlighted`   | `isTodayHighlighted`   |           | `boolean`                                        |         | Gets or sets the `isTodayHighlighted` property.  |
| `isWeekendHighlighted` | `isWeekendHighlighted` |           | `boolean`                                        |         | Gets or sets the `isWeekendHighlighted` property. |
| `lang`                 | `lang`                 |           | `string`                                         |         | The lang property indicates the language of the element's content. |
| `locale`               |                        |           | `string`                                         | "en"    | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`        |                        |           | `CalendarMarkerHandler`                          |         | Gets or sets the `markerHandler` property.       |
| `previewDateChange`    |                        | readonly  | `IEventEmitter<IEventDetail>`                    |         | Called when the rage preview date is changed.<br />Provides reference to `IEventDetail` as event detail. |
| `rangePreviewDate`     |                        |           | `Date \| null`                                   |         | Gets or sets the `rangePreviewDate` property.    |
| `selection`            | `selection`            |           | `RangeSelectionMode`                             |         | Gets or sets the `selection` property.           |
| `showAdjacent`         | `showAdjacent`         |           | `boolean`                                        |         | Gets or sets the `showAdjacent` property.        |
| `showWeekNumbers`      | `showWeekNumbers`      |           | `boolean`                                        |         | Gets or sets the `showWeekNumbers` property.     |
| `specialDates`         |                        |           | `Date[]`                                         |         | Gets or sets the `specialDates` property.        |
| `themeName`            |                        |           | `string`                                         |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`                | `value`                |           | `Date \| undefined`                              |         | Gets or sets the `value` property.               |
| `valueChanged`         |                        | readonly  | `IEventEmitter<IDateChangedEventDetail>`         |         | Called when the value is changed.<br />Provides reference to `IDateChangedEventDetail` as event detail. |
| `values`               | `values`               |           | `Date[] \| undefined`                            |         | Gets or sets the `values` property.              |
| `variant`              | `variant`              |           | `Variant`                                        |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `viewChanged`          |                        | readonly  | `IEventEmitter<ICalendarViewChangedEventDetail>` |         | Called when the view is changed between years, months, and days.<br />Provides reference to `ICalendarViewChangedEventDetail` as event detail. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `isSelected`    | `(day: Date): boolean`                           |                                                  |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                          | Description                                      |
|------------------|-------------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent`        | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`              | Emitted when the element is connected to the DOM |
| `disconnected`   | `DisconnectedEvent`           | Emitted when the element is disconnected from the DOM |
| `displayChanged` | `CalendarDisplayChangedEvent` | Fired when the display date is changed.          |
| `valueChanged`   | `DateChangedEvent`            | Fired when the value is changed.<br />               In the years view, the `value` property is the selected year.<br />               In the months view, the `value` property is the selected month.<br />               In the days view, the `value` property is the selected date. |
| `viewChanged`    | `CalendarViewChangedEvent`    | Fired when the view is changed between years, months, and days. |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The header slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part              | Description                 |
|-------------------|-----------------------------|
| `dayLabel`        | The day label part.         |
| `dayView`         | The day view part.          |
| `heading`         | The heading part.           |
| `item`            | The item part.              |
| `labels`          | The labels part.            |
| `month`           | The month part.             |
| `navigation`      | The navigation part.        |
| `weekNumber`      | The week number part.       |
| `weekNumberLabel` | The week number label part. |
| `year`            | The year part.              |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--calendar-days-view-font-family`          | String | The days view font family CSS custom property.   |
| `--calendar-days-view-font-letter-spacing`  | String | The days view font letter spacing CSS custom property. |
| `--calendar-days-view-font-line-height`     | String | The days view font line height CSS custom property. |
| `--calendar-days-view-font-size`            | String | The days view font size CSS custom property.     |
| `--calendar-days-view-font-text-decoration` | String | The days view font text decoration CSS custom property. |
| `--calendar-days-view-font-text-transform`  | String | The days view font text transform CSS custom property. |
| `--calendar-days-view-font-weight`          | String | The days view font weight CSS custom property.   |
| `--calendar-days-view-gap`                  | String |                                                  |
| `--calendar-days-view-padding-bottom`       | String |                                                  |
| `--calendar-days-view-padding-left`         | String |                                                  |
| `--calendar-days-view-padding-right`        | String |                                                  |
| `--calendar-days-view-padding-top`          | String |                                                  |
| `--calendar-days-view-shadow`               | String | The days view shadow CSS custom property.        |
| `--calendar-days-view-shadow-blur`          | String | The days view shadow blur CSS custom property.   |
| `--calendar-days-view-shadow-color`         | String | The days view shadow color CSS custom property.  |
| `--calendar-days-view-shadow-offset-x`      | String | The days view shadow offset x CSS custom property. |
| `--calendar-days-view-shadow-offset-y`      | String | The days view shadow offset y CSS custom property. |
| `--calendar-days-view-shadow-spread`        | String | The days view shadow spread CSS custom property. |
| `--calendar-days-view-transition-duration`  | String | The days view transition duration CSS custom property. |
| `--calendar-days-view-transition-mode`      | String | The days view transition mode CSS custom property. |
| `--calendar-days-view-transition-property`  | String | The days view transition property CSS custom property. |
| `--calendar-days-view-translate`            | String | The days view translate CSS custom property.     |

# mosaik-calendar-header

Calendar Header - The primary heading or title text displayed within calendar components.

**Mixins:** Themeable, Disableable

## Examples

Basic calendar header:

```html
<mosaik-calendar-header text="January 2024"></mosaik-calendar-header>
```

Custom header content via slot:

```html
<mosaik-calendar-header>
  <mosaik-text slot="header" text="Q1 2024"></mosaik-text>
</mosaik-calendar-header>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`     |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The default slot for custom header content       |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--calendar-header-background-color`     | String | The background color of the header               |
| `--calendar-header-border-color`         | String | The border color                                 |
| `--calendar-header-border-radius`        | String | The corner rounding radius                       |
| `--calendar-header-border-style`         | String | The border line style                            |
| `--calendar-header-border-width`         | String | The border thickness                             |
| `--calendar-header-font-family`          | String | The header font family CSS custom property.      |
| `--calendar-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--calendar-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--calendar-header-font-size`            | String | The header font size CSS custom property.        |
| `--calendar-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--calendar-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--calendar-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--calendar-header-foreground-color`     | String | The text color of the header                     |
| `--calendar-header-gap`                  | String | The header gap CSS custom property.              |
| `--calendar-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--calendar-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--calendar-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--calendar-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--calendar-header-shadow`               | String | The header shadow CSS custom property.           |
| `--calendar-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--calendar-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--calendar-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--calendar-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--calendar-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--calendar-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--calendar-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--calendar-header-transition-property`  | String | The header transition property CSS custom property. |
| `--calendar-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-calendar-item

Calendar Item - An individual day, month, or year cell within a calendar date picker.

**Mixins:** Themeable, Rippleable, Appearanceable, Variantable, Disableable, Valueable, Focusable

## Examples

Basic calendar day item:

```html
<mosaik-calendar-item text="15" value="2024-01-15"></mosaik-calendar-item>
```

Selected item with today marker:

```html
<mosaik-calendar-item text="15"
                      value="2024-01-15"
                      is-selected
                      is-today
                      variant="primary"></mosaik-calendar-item>
```

Weekend item with event markers (set via JavaScript):

```html
<mosaik-calendar-item id="item20" text="20" value="2024-01-20" is-weekend></mosaik-calendar-item>
<script>
  document.getElementById('item20').markers = [
    { variant: 'primary', size: 'tiny' },
    { variant: 'success', size: 'tiny' }
  ];
</script>
```

Blackout date (disabled):

```html
<mosaik-calendar-item text="25"
                      value="2024-01-25"
                      is-blackout
                      disabled></mosaik-calendar-item>
```

Range selection:

```html
<mosaik-calendar-item text="10" value="2024-01-10" is-range-start></mosaik-calendar-item>
<mosaik-calendar-item text="11" value="2024-01-11" is-range-middle></mosaik-calendar-item>
<mosaik-calendar-item text="12" value="2024-01-12" is-range-end></mosaik-calendar-item>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                         | Description                                      |
|------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`     | `appearance`     |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isAdjacent`     | `isAdjacent`     |           | `boolean`                                    | Gets or sets the `isAdjacent` property.          |
| `isBlackout`     | `isBlackout`     |           | `boolean`                                    | Gets or sets the `isBlackout` property.          |
| `isFocused`      | `is-focused`     |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isRangeEnd`     | `isRangeEnd`     |           | `boolean`                                    | Gets or sets the `isRangeEnd` property.          |
| `isRangeMiddle`  | `isRangeMiddle`  |           | `boolean`                                    | Gets or sets the `isRangeMiddle` property.       |
| `isRangePreview` | `isRangePreview` |           | `boolean`                                    | Gets or sets the `isRangePreview` property.      |
| `isRangeStart`   | `isRangeStart`   |           | `boolean`                                    | Gets or sets the `isRangeStart` property.        |
| `isSelected`     | `isSelected`     |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `isSpecial`      | `isSpecial`      |           | `boolean`                                    | Gets or sets the `isSpecial` property.           |
| `isToday`        | `isToday`        |           | `boolean`                                    | Gets or sets the `isToday` property.             |
| `isWeekend`      | `isWeekend`      |           | `boolean`                                    | Gets or sets the `isWeekend` property.           |
| `lang`           | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `markers`        |                  |           | `Partial<IDotElementProps>[]`                | Gets or sets the `markers` property.             |
| `ripple`         | `ripple`         |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `text`           | `text`           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`      |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`          | `value`          |           | `Date \| null`                               | Gets or sets the `value` property.               |
| `variant`        | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `click`        | `MouseEvent`           | Fired when the calendar item is clicked (prevented when disabled or blackout) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `focusRing` | The keyboard focus indicator ring                |
| `marker`    | Individual event or date marker dots             |
| `ripple`    | The ripple part.                                 |
| `text`      | The text display area showing the day/month/year number or label |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--calendar-item-background-color`          | String | The background color of the calendar cell        |
| `--calendar-item-border-color`              | String | The border color                                 |
| `--calendar-item-border-radius`             | String | The corner rounding radius                       |
| `--calendar-item-border-style`              | String | The border line style                            |
| `--calendar-item-border-width`              | String | The border thickness                             |
| `--calendar-item-focus-ring-active-width`   | String | The focus ring width when active (from focusRing mixin) |
| `--calendar-item-focus-ring-color`          | String | The focus ring color (from focusRing mixin)      |
| `--calendar-item-focus-ring-inward-offset`  | String | The focus ring inward offset (from focusRing mixin) |
| `--calendar-item-focus-ring-outward-offset` | String | The focus ring outward offset (from focusRing mixin) |
| `--calendar-item-font-family`               | String | The font family for date text                    |
| `--calendar-item-font-letter-spacing`       | String | The letter spacing for date text                 |
| `--calendar-item-font-line-height`          | String | The line height for date text                    |
| `--calendar-item-font-size`                 | String | The font size for date text                      |
| `--calendar-item-font-text-decoration`      | String | The text decoration style                        |
| `--calendar-item-font-text-transform`       | String | The text transformation style                    |
| `--calendar-item-font-weight`               | String | The font weight for date text                    |
| `--calendar-item-foreground-color`          | String | The text color                                   |
| `--calendar-item-gap`                       | String | The spacing between text and markers             |
| `--calendar-item-padding-bottom`            | String | The bottom padding inside the cell               |
| `--calendar-item-padding-left`              | String | The left padding inside the cell                 |
| `--calendar-item-padding-right`             | String | The right padding inside the cell                |
| `--calendar-item-padding-top`               | String | The top padding inside the cell                  |
| `--calendar-item-ripple-color`              | String | The ripple effect color (from ripple mixin)      |
| `--calendar-item-ripple-duration`           | String | The ripple animation duration (from ripple mixin) |
| `--calendar-item-shadow`                    | String | The item shadow CSS custom property.             |
| `--calendar-item-shadow-blur`               | String | The item shadow blur CSS custom property.        |
| `--calendar-item-shadow-color`              | String | The item shadow color CSS custom property.       |
| `--calendar-item-shadow-offset-x`           | String | The item shadow offset x CSS custom property.    |
| `--calendar-item-shadow-offset-y`           | String | The item shadow offset y CSS custom property.    |
| `--calendar-item-shadow-spread`             | String | The item shadow spread CSS custom property.      |
| `--calendar-item-transition-duration`       | String | The duration of state transitions                |
| `--calendar-item-transition-mode`           | String | The timing function for transitions              |
| `--calendar-item-transition-property`       | String | The CSS properties to transition                 |
| `--calendar-item-translate`                 | String | The item translate CSS custom property.          |

# mosaik-calendar-months-view

Calendar Months View - A component that displays a view of months in a calendar, allowing users to select a month.

**Mixins:** Themeable, Appearanceable, Variantable, Disableable, Localeable

## Examples

Basic calendar months view:

```html
<mosaik-calendar-months-view></mosaik-calendar-months-view>
```

Calendar months view with short format:

```html
<mosaik-calendar-months-view format="short"></mosaik-calendar-months-view>
```

## Properties

| Property           | Attribute          | Modifiers | Type                                             | Default | Description                                      |
|--------------------|--------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
| `appearance`       | `appearance`       |           | `Appearance`                                     |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`    |                    |           | `Date[]`                                         |         | Gets or sets the `blackoutDates` property.       |
| `changed`          |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                    | readonly  | `IEventEmitter<void>`                            |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`              |           | `FlowDirection`                                  |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`         |           | `boolean`                                        |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                    | readonly  | `IEventEmitter<void>`                            |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayChanged`   |                    | readonly  | `IEventEmitter<ICalendarDisplayChangedEventDetail>` |         | Called when the view is changed between years, months, and days.<br />Provides reference to `ICalendarDisplayChangedEventDetail` as event detail. |
| `displayDate`      | `displayDate`      |           | `Date \| null`                                   |         | Gets or sets the `displayDate` property.         |
| `displayDateEnd`   | `displayDateEnd`   |           | `Date \| null`                                   |         | Gets or sets the `displayDateEnd` property.      |
| `displayDateStart` | `displayDateStart` |           | `Date \| null`                                   |         | Gets or sets the `displayDateStart` property.    |
| `format`           | `format`           |           | `"numeric" \| "2-digit" \| "long" \| "short" \| "narrow" \| undefined` |         | Gets or sets the `format` property.              |
| `intl`             |                    |           | `CalendarElementIntl \| null`                    |         | Gets or sets the `intl` property.                |
| `lang`             | `lang`             |           | `string`                                         |         | The lang property indicates the language of the element's content. |
| `locale`           |                    |           | `string`                                         | "en"    | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`    |                    |           | `CalendarMarkerHandler`                          |         | Gets or sets the `markerHandler` property.       |
| `selection`        | `selection`        |           | `RangeSelectionMode`                             |         | Gets or sets the `selection` property.           |
| `specialDates`     |                    |           | `Date[]`                                         |         | Gets or sets the `specialDates` property.        |
| `themeName`        |                    |           | `string`                                         |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`            | `value`            |           | `Date \| undefined`                              |         | Gets or sets the `value` property.               |
| `valueChanged`     |                    | readonly  | `IEventEmitter<IDateChangedEventDetail>`         |         | Called when the value is changed.<br />Provides reference to `IDateChangedEventDetail` as event detail. |
| `values`           | `values`           |           | `Date[] \| undefined`                            |         | Gets or sets the `values` property.              |
| `variant`          | `variant`          |           | `Variant`                                        |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `viewChanged`      |                    | readonly  | `IEventEmitter<ICalendarViewChangedEventDetail>` |         | Called when the view is changed between years, months, and days.<br />Provides reference to `ICalendarViewChangedEventDetail` as event detail. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                          | Description                                      |
|------------------|-------------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent`        | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`              | Emitted when the element is connected to the DOM |
| `disconnected`   | `DisconnectedEvent`           | Emitted when the element is disconnected from the DOM |
| `displayChanged` | `CalendarDisplayChangedEvent` | Fired when the display date is changed.          |
| `valueChanged`   | `DateChangedEvent`            | Fired when the value is changed.<br />               In the years view, the `value` property is the selected year.<br />               In the months view, the `value` property is the selected month.<br />               In the days view, the `value` property is the selected date. |
| `viewChanged`    | `CalendarViewChangedEvent`    | Fired when the view is changed between years, months, and days. |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The header slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `heading`    | The heading part.    |
| `item`       | The item part.       |
| `month`      | The month part.      |
| `monthView`  | The month view part. |
| `navigation` | The navigation part. |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--calendar-months-view-font-family`          | String | The months view font family CSS custom property. |
| `--calendar-months-view-font-letter-spacing`  | String | The months view font letter spacing CSS custom property. |
| `--calendar-months-view-font-line-height`     | String | The months view font line height CSS custom property. |
| `--calendar-months-view-font-size`            | String | The months view font size CSS custom property.   |
| `--calendar-months-view-font-text-decoration` | String | The months view font text decoration CSS custom property. |
| `--calendar-months-view-font-text-transform`  | String | The months view font text transform CSS custom property. |
| `--calendar-months-view-font-weight`          | String | The months view font weight CSS custom property. |
| `--calendar-months-view-gap`                  | String |                                                  |
| `--calendar-months-view-padding-bottom`       | String |                                                  |
| `--calendar-months-view-padding-left`         | String |                                                  |
| `--calendar-months-view-padding-right`        | String |                                                  |
| `--calendar-months-view-padding-top`          | String |                                                  |
| `--calendar-months-view-shadow`               | String | The months view shadow CSS custom property.      |
| `--calendar-months-view-shadow-blur`          | String | The months view shadow blur CSS custom property. |
| `--calendar-months-view-shadow-color`         | String | The months view shadow color CSS custom property. |
| `--calendar-months-view-shadow-offset-x`      | String | The months view shadow offset x CSS custom property. |
| `--calendar-months-view-shadow-offset-y`      | String | The months view shadow offset y CSS custom property. |
| `--calendar-months-view-shadow-spread`        | String | The months view shadow spread CSS custom property. |
| `--calendar-months-view-transition-duration`  | String | The months view transition duration CSS custom property. |
| `--calendar-months-view-transition-mode`      | String | The months view transition mode CSS custom property. |
| `--calendar-months-view-transition-property`  | String | The months view transition property CSS custom property. |
| `--calendar-months-view-translate`            | String | The months view translate CSS custom property.   |

# mosaik-calendar-sub-header

Calendar Sub Header - A secondary heading or descriptive text displayed below calendar headers.

**Mixins:** Themeable, Disableable

## Examples

Basic calendar sub-header:

```html
<mosaik-calendar-sub-header text="Select a date"></mosaik-calendar-sub-header>
```

Day-of-week labels as sub-header:

```html
<mosaik-calendar-sub-header text="Mon Tue Wed Thu Fri Sat Sun"></mosaik-calendar-sub-header>
```

Custom content via slot:

```html
<mosaik-calendar-sub-header>
  <mosaik-text slot="subHeader" text="Weekends highlighted"></mosaik-text>
</mosaik-calendar-sub-header>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`     |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | The default slot for custom sub-header content   |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--calendar-sub-header-background-color`     | String | The background color of the sub-header           |
| `--calendar-sub-header-border-color`         | String | The border color                                 |
| `--calendar-sub-header-border-radius`        | String | The corner rounding radius                       |
| `--calendar-sub-header-border-style`         | String | The border line style                            |
| `--calendar-sub-header-border-width`         | String | The border thickness                             |
| `--calendar-sub-header-font`                 | String | The shorthand font property                      |
| `--calendar-sub-header-font-family`          | String | The sub header font family CSS custom property.  |
| `--calendar-sub-header-font-letter-spacing`  | String | The sub header font letter spacing CSS custom property. |
| `--calendar-sub-header-font-line-height`     | String | The sub header font line height CSS custom property. |
| `--calendar-sub-header-font-size`            | String | The font size for sub-header text                |
| `--calendar-sub-header-font-text-decoration` | String | The sub header font text decoration CSS custom property. |
| `--calendar-sub-header-font-text-transform`  | String | The sub header font text transform CSS custom property. |
| `--calendar-sub-header-font-weight`          | String | The font weight for sub-header text              |
| `--calendar-sub-header-foreground-color`     | String | The text color of the sub-header                 |
| `--calendar-sub-header-gap`                  | String | The sub header gap CSS custom property.          |
| `--calendar-sub-header-line-height`          | String | The line height for sub-header text              |
| `--calendar-sub-header-padding-bottom`       | String | The sub header padding bottom CSS custom property. |
| `--calendar-sub-header-padding-left`         | String | The sub header padding left CSS custom property. |
| `--calendar-sub-header-padding-right`        | String | The sub header padding right CSS custom property. |
| `--calendar-sub-header-padding-top`          | String | The sub header padding top CSS custom property.  |
| `--calendar-sub-header-shadow`               | String | The sub header shadow CSS custom property.       |
| `--calendar-sub-header-shadow-blur`          | String | The sub header shadow blur CSS custom property.  |
| `--calendar-sub-header-shadow-color`         | String | The sub header shadow color CSS custom property. |
| `--calendar-sub-header-shadow-offset-x`      | String | The sub header shadow offset x CSS custom property. |
| `--calendar-sub-header-shadow-offset-y`      | String | The sub header shadow offset y CSS custom property. |
| `--calendar-sub-header-shadow-spread`        | String | The sub header shadow spread CSS custom property. |
| `--calendar-sub-header-transition-duration`  | String | The sub header transition duration CSS custom property. |
| `--calendar-sub-header-transition-mode`      | String | The sub header transition mode CSS custom property. |
| `--calendar-sub-header-transition-property`  | String | The sub header transition property CSS custom property. |
| `--calendar-sub-header-translate`            | String | The sub header translate CSS custom property.    |

# mosaik-calendar-years-view

Calendar Years View - A component that displays a view of years in a calendar, allowing users to select a year.

**Mixins:** Themeable, Appearanceable, Variantable, Disableable, Localeable

## Examples

Basic calendar years view:

```html
<mosaik-calendar-years-view></mosaik-calendar-years-view>
```

Calendar years view with primary variant:

```html
<mosaik-calendar-years-view variant="primary"></mosaik-calendar-years-view>
```

## Properties

| Property           | Attribute          | Modifiers | Type                                             | Default | Description                                      |
|--------------------|--------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
| `appearance`       | `appearance`       |           | `Appearance`                                     |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`    |                    |           | `Date[]`                                         |         | Gets or sets the `blackoutDates` property.       |
| `changed`          |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                    | readonly  | `IEventEmitter<void>`                            |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`              |           | `FlowDirection`                                  |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`         |           | `boolean`                                        |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                    | readonly  | `IEventEmitter<void>`                            |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayChanged`   |                    | readonly  | `IEventEmitter<ICalendarDisplayChangedEventDetail>` |         | Called when the view is changed between years, months, and days.<br />Provides reference to `ICalendarDisplayChangedEventDetail` as event detail. |
| `displayDate`      | `displayDate`      |           | `Date \| null`                                   |         | Gets or sets the `displayDate` property.         |
| `displayDateEnd`   | `displayDateEnd`   |           | `Date \| null`                                   |         | Gets or sets the `displayDateEnd` property.      |
| `displayDateStart` | `displayDateStart` |           | `Date \| null`                                   |         | Gets or sets the `displayDateStart` property.    |
| `intl`             |                    |           | `CalendarElementIntl \| null`                    |         | Gets or sets the `intl` property.                |
| `lang`             | `lang`             |           | `string`                                         |         | The lang property indicates the language of the element's content. |
| `locale`           |                    |           | `string`                                         | "en"    | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`    |                    |           | `CalendarMarkerHandler`                          |         | Gets or sets the `markerHandler` property.       |
| `selection`        | `selection`        |           | `RangeSelectionMode`                             |         | Gets or sets the `selection` property.           |
| `specialDates`     |                    |           | `Date[]`                                         |         | Gets or sets the `specialDates` property.        |
| `themeName`        |                    |           | `string`                                         |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`            | `value`            |           | `Date \| undefined`                              |         | Gets or sets the `value` property.               |
| `valueChanged`     |                    | readonly  | `IEventEmitter<IDateChangedEventDetail>`         |         | Called when the value is changed.<br />Provides reference to `IDateChangedEventDetail` as event detail. |
| `values`           | `values`           |           | `Date[] \| undefined`                            |         | Gets or sets the `values` property.              |
| `variant`          | `variant`          |           | `Variant`                                        |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `viewChanged`      |                    | readonly  | `IEventEmitter<ICalendarViewChangedEventDetail>` |         | Called when the view is changed between years, months, and days.<br />Provides reference to `ICalendarViewChangedEventDetail` as event detail. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                          | Description                                      |
|------------------|-------------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent`        | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`              | Emitted when the element is connected to the DOM |
| `disconnected`   | `DisconnectedEvent`           | Emitted when the element is disconnected from the DOM |
| `displayChanged` | `CalendarDisplayChangedEvent` | Fired when the display date is changed.          |
| `valueChanged`   | `DateChangedEvent`            | Fired when the value is changed.<br />               In the years view, the `value` property is the selected year.<br />               In the months view, the `value` property is the selected month.<br />               In the days view, the `value` property is the selected date. |
| `viewChanged`    | `CalendarViewChangedEvent`    | Fired when the view is changed between years, months, and days. |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The header slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `heading`    | The heading part.    |
| `item`       | The item part.       |
| `navigation` | The navigation part. |
| `yearView`   | The year view part.  |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--calendar-years-view-font-family`          | String | The years view font family CSS custom property.  |
| `--calendar-years-view-font-letter-spacing`  | String | The years view font letter spacing CSS custom property. |
| `--calendar-years-view-font-line-height`     | String | The years view font line height CSS custom property. |
| `--calendar-years-view-font-size`            | String | The years view font size CSS custom property.    |
| `--calendar-years-view-font-text-decoration` | String | The years view font text decoration CSS custom property. |
| `--calendar-years-view-font-text-transform`  | String | The years view font text transform CSS custom property. |
| `--calendar-years-view-font-weight`          | String | The years view font weight CSS custom property.  |
| `--calendar-years-view-gap`                  | String |                                                  |
| `--calendar-years-view-padding-bottom`       | String |                                                  |
| `--calendar-years-view-padding-left`         | String |                                                  |
| `--calendar-years-view-padding-right`        | String |                                                  |
| `--calendar-years-view-padding-top`          | String |                                                  |
| `--calendar-years-view-shadow`               | String | The years view shadow CSS custom property.       |
| `--calendar-years-view-shadow-blur`          | String | The years view shadow blur CSS custom property.  |
| `--calendar-years-view-shadow-color`         | String | The years view shadow color CSS custom property. |
| `--calendar-years-view-shadow-offset-x`      | String | The years view shadow offset x CSS custom property. |
| `--calendar-years-view-shadow-offset-y`      | String | The years view shadow offset y CSS custom property. |
| `--calendar-years-view-shadow-spread`        | String | The years view shadow spread CSS custom property. |
| `--calendar-years-view-transition-duration`  | String | The years view transition duration CSS custom property. |
| `--calendar-years-view-transition-mode`      | String | The years view transition mode CSS custom property. |
| `--calendar-years-view-transition-property`  | String | The years view transition property CSS custom property. |
| `--calendar-years-view-translate`            | String | The years view translate CSS custom property.    |

# mosaik-calendar

Calendar - A user interface component for displaying dates and events in a chronological order.

**Mixins:** Themeable, Localeable, Appearanceable, Disableable, Invalidable, Valueable, Orientable, Variantable, Fitable

## Examples

Basic calendar:

```html
<mosaik-calendar></mosaik-calendar>
```

Calendar with variant and appearance:

```html
<mosaik-calendar variant="primary" appearance="outline"></mosaik-calendar>
```

Horizontal multi-sheet calendar:

```html
<mosaik-calendar orientation="horizontal"></mosaik-calendar>
```

## Properties

| Property               | Attribute              | Modifiers | Type                                         | Description                                      |
|------------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`           | `appearance`           |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`        | `blackoutDates`        |           | `Date[]`                                     | Gets or sets the `blackoutDates` property.       |
| `changed`              |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dateChanged`          |                        | readonly  | `IEventEmitter<IEventDetail>`                | Called when the date is changed.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`                  | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`             |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayDate`          | `displayDate`          |           | `Date \| null`                               | Returns the `displayDate` property.<br />The `displayDate` property represents the initial date to display in the calendar. |
| `displayDateEnd`       | `displayDateEnd`       |           | `Date \| null`                               | Returns the `displayDateEnd` property.<br />The `displayDateEnd` property represents the end date to display in the calendar. |
| `displayDateStart`     | `displayDateStart`     |           | `Date \| null`                               | Returns the `displayDateStart` property.<br />The `displayDateStart` property represents the start date to display in the calendar. |
| `firstDayOfWeek`       | `firstDayOfWeek`       |           | `DayOfWeek`                                  | Gets or sets the `firstDayOfWeek` property.      |
| `fit`                  | `fit`                  |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `header`               | `header`               |           | `string`                                     | Gets or sets the `header` property.              |
| `intl`                 |                        | readonly  | `CalendarElementIntl`                        | Returns the `intl` property.                     |
| `invalid`              | `invalid`              |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isTodayHighlighted`   | `isTodayHighlighted`   |           | `boolean`                                    | Gets or sets the `isTodayHighlighted` property.  |
| `isWeekendHighlighted` | `isWeekendHighlighted` |           | `boolean`                                    | Gets or sets the `isWeekendHighlighted` property. |
| `lang`                 | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`               |                        |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`        | `markerHandler`        |           | `CalendarMarkerHandler`                      | A handler that gets date and returns null or a tuple with circled marker data. See `CalendarMarkerData`. |
| `maxDate`              | `maxDate`              |           | `Date \| null`                               | Gets or sets the `maxDate` property.             |
| `minDate`              | `minDate`              |           | `Date \| null`                               | Gets or sets the `minDate` property.             |
| `orientation`          | `orientation`          |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `selectionMode`        | `selectionMode`        |           | `RangeSelectionMode`                         | Gets or sets the `selectionMode` property.       |
| `sheets`               | `sheets`               |           | `number`                                     | Gets or sets the `sheets` property.<br />The `sheets` property represents the number of calendar sheets to display simultaneously. |
| `showAdjacent`         | `showAdjacent`         |           | `boolean`                                    | Gets or sets the `showAdjacent` property.        |
| `showWeekNumbers`      | `showWeekNumbers`      |           | `boolean`                                    | Gets or sets the `showWeekNumbers` property.     |
| `specialDates`         | `specialDates`         |           | `Date[]`                                     | Gets or sets the `specialDates` property.        |
| `themeName`            |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`                | `value`                |           | `Date \| null`                               | Gets or sets the `value` property.               |
| `values`               | `values`               |           | `Date[]`                                     | Gets or sets the `values` property.              |
| `variant`              | `variant`              |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                 | `view`                 |           | `CalendarView`                               | Gets or sets the `view` property.                |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `checkValidity`    | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `navigateNext`     | `(): void`                                       |                                                  |
| `navigatePrevious` | `(): void`                                       |                                                  |
| `navigateToday`    | `(): void`                                       |                                                  |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`            | `(): void`                                       | Resets the value, all kinds of validation and errors. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `dateChanged`  | `DateChangedEvent`     | Fired when the date has changed.                 |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `footer` | The footer slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part               | Description                                 |
|--------------------|---------------------------------------------|
| `content`          | The content part.                           |
| `daysView`         | The daysView part.                          |
| `header`           | The header part.                            |
| `monthView`        | The month view part.                        |
| `navigation`       | The navigation part.                        |
| `next`             | The navigation next button part.            |
| `previous`         | The navigation previous button part.        |
| `sheet`            | Individual calendar sheet.                  |
| `sheets-container` | The container for multiple calendar sheets. |
| `today`            | The navigation today button part.           |
| `yearsView`        | The years view part.                        |

## CSS Custom Properties

| Property                          | Type   | Description                                   |
|-----------------------------------|--------|-----------------------------------------------|
| `--calendar-background-color`     | String | The background color CSS custom property.     |
| `--calendar-border-color`         | String | The border color CSS custom property.         |
| `--calendar-border-radius`        | String | The border radius CSS custom property.        |
| `--calendar-border-style`         | String | The border style CSS custom property.         |
| `--calendar-border-width`         | String | The border width CSS custom property.         |
| `--calendar-divider-height`       | String | The divider height CSS custom property.       |
| `--calendar-font-family`          | String | The font family CSS custom property.          |
| `--calendar-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--calendar-font-line-height`     | String | The font line height CSS custom property.     |
| `--calendar-font-size`            | String | The font size CSS custom property.            |
| `--calendar-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--calendar-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--calendar-font-weight`          | String | The font weight CSS custom property.          |
| `--calendar-foreground-color`     | String | The foreground color CSS custom property.     |
| `--calendar-gap`                  | String | The gap CSS custom property.                  |
| `--calendar-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--calendar-padding-left`         | String | The padding left CSS custom property.         |
| `--calendar-padding-right`        | String | The padding right CSS custom property.        |
| `--calendar-padding-top`          | String | The padding top CSS custom property.          |
| `--calendar-shadow`               | String | The shadow CSS custom property.               |
| `--calendar-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--calendar-shadow-color`         | String | The shadow color CSS custom property.         |
| `--calendar-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--calendar-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--calendar-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--calendar-transition-duration`  | String | The transition duration CSS custom property.  |
| `--calendar-transition-mode`      | String | The transition mode CSS custom property.      |
| `--calendar-transition-property`  | String | The transition property CSS custom property.  |
| `--calendar-translate`            | String | The translate CSS custom property.            |

# mosaik-camera

Camera - An input device that captures images or videos, allowing users to take photos or record footage directly within the application.

**Mixins:** Themeable, Disableable, Dimensionable

## Examples

Basic camera with auto-play:

```html
<mosaik-camera auto-play></mosaik-camera>
```

Camera using back lens with jpeg capture format:

```html
<mosaik-camera type="back" capture-format="jpeg"></mosaik-camera>
```

## Properties

| Property              | Attribute        | Modifiers | Type                                         | Description                                      |
|-----------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `autoFullScreen`      | `autoFullScreen` |           | `boolean`                                    | Gets or sets the `autoFullScreen` property.      |
| `autoPlay`            | `autoPlay`       |           | `boolean`                                    | Gets or sets the `autoPlay` property.            |
| `captureFormat`       | `captureFormat`  |           | `CameraCaptureFormat`                        | Gets or sets the `captureFormat` property.       |
| `captured`            |                  | readonly  | `IEventEmitter<ICaptureEventDetail>`         | Fires when a image was captured.<br />Provides reference to `ICaptureEventDetail` as event detail. |
| `changed`             |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`           |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`            | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`        |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `frame`               | `frame`          |           | `CameraFrame \| null`                        | A camera frame info object<br />When the camera frame is set, the camera will be displayed as a frame.<br />If a picture will captured, only the inner part of the frame will be captured. |
| `height`              | `height`         |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `isRecorderSupported` |                  | readonly  | `boolean`                                    | Returns the `isSupported` property.              |
| `isSupported`         |                  | readonly  | `boolean`                                    | Returns the `isSupported` property.              |
| `lang`                | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `poster`              |                  |           | `string`                                     | Gets or sets the `poster` property.              |
| `recorded`            |                  | readonly  | `IEventEmitter<IRecordEventDetail>`          | Fires when a video was recorded.<br />Provides reference to `IRecordEventDetail` as event detail. |
| `recorderFormat`      | `recorderFormat` |           | `CameraRecorderFormat`                       | Gets or sets the `recorderFormat` property.      |
| `src`                 |                  |           | `string \| MediaProvider \| null`            | Gets or sets the `src` property.                 |
| `themeName`           |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                | `type`           |           | `CameraType`                                 | Gets or sets the `type` property.                |
| `width`               | `width`          |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `capture`       | `(): void`                                       | Captures a image of the current video element.   |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `record`        | `(): void`                                       | Record a stream of the current video element.    |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                             | Description                                      |
|----------------|----------------------------------|--------------------------------------------------|
| `captured`     | `CaptureEvent`                   | Raised when a image was captured.                |
| `changed`      | `PropertyChangedEvent`           | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`                 | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`              | Emitted when the element is disconnected from the DOM |
| `error`        | `CustomEvent<{ error: Error; }>` |                                                  |
| `recorded`     | `RecordEvent`                    | Raised when a video was recorded.                |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
| `overlay`  | The overlay slot.                                |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `underlay` | The underlay slot.                               |

## CSS Shadow Parts

| Part       | Description        |
|------------|--------------------|
| `flash`    | The flash part.    |
| `mask`     | The mask part.     |
| `overlay`  | The overlay part.  |
| `underlay` | The underlay part. |
| `video`    | The video part.    |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--camera-background-color`     | String | The background color CSS custom property.     |
| `--camera-border-radius`        | String | The border radius CSS custom property.        |
| `--camera-font-family`          | String | The font family CSS custom property.          |
| `--camera-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--camera-font-line-height`     | String | The font line height CSS custom property.     |
| `--camera-font-size`            | String | The font size CSS custom property.            |
| `--camera-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--camera-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--camera-font-weight`          | String | The font weight CSS custom property.          |
| `--camera-foreground-color`     | String | The foreground color CSS custom property.     |
| `--camera-gap`                  | String | The gap CSS custom property.                  |
| `--camera-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--camera-padding-left`         | String | The padding left CSS custom property.         |
| `--camera-padding-right`        | String | The padding right CSS custom property.        |
| `--camera-padding-top`          | String | The padding top CSS custom property.          |
| `--camera-shadow`               | String | The shadow CSS custom property.               |
| `--camera-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--camera-shadow-color`         | String | The shadow color CSS custom property.         |
| `--camera-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--camera-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--camera-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--camera-transition-duration`  | String | The transition duration CSS custom property.  |
| `--camera-transition-mode`      | String | The transition mode CSS custom property.      |
| `--camera-transition-property`  | String | The transition property CSS custom property.  |
| `--camera-translate`            | String | The translate CSS custom property.            |

# mosaik-card-actions

CardActions - A component that represents the actions area of a card.

**Mixins:** Themeable, Slottable

## Examples

Basic usage with action buttons:

```html
<mosaik-card-actions>
  <mosaik-button label="Save" variant="primary"></mosaik-button>
  <mosaik-button label="Cancel"></mosaik-button>
</mosaik-card-actions>
```

With prefix and suffix content:

```html
<mosaik-card-actions>
  <mosaik-text slot="prefix" text="Optional Info"></mosaik-text>
  <mosaik-button label="Save" variant="primary"></mosaik-button>
  <mosaik-button slot="suffix" label="More Options" appearance="plain"></mosaik-button>
</mosaik-card-actions>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot for placing the main action buttons. |
| `prefix` | The slot for placing content that appears before the action buttons. |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The slot for placing content that appears after the action buttons. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--card-actions-font-family`          | String | The actions font family CSS custom property.     |
| `--card-actions-font-letter-spacing`  | String | The actions font letter spacing CSS custom property. |
| `--card-actions-font-line-height`     | String | The actions font line height CSS custom property. |
| `--card-actions-font-size`            | String | The actions font size CSS custom property.       |
| `--card-actions-font-text-decoration` | String | The actions font text decoration CSS custom property. |
| `--card-actions-font-text-transform`  | String | The actions font text transform CSS custom property. |
| `--card-actions-font-weight`          | String | The actions font weight CSS custom property.     |
| `--card-actions-gap`                  | String | The gap property between action elements in the card actions area. |
| `--card-actions-padding-bottom`       | String | The padding-bottom property for the card actions area. |
| `--card-actions-padding-left`         | String | The padding-left property for the card actions area. |
| `--card-actions-padding-right`        | String | The padding-right property for the card actions area. |
| `--card-actions-padding-top`          | String | The padding-top property for the card actions area. |
| `--card-actions-shadow`               | String | The actions shadow CSS custom property.          |
| `--card-actions-shadow-blur`          | String | The actions shadow blur CSS custom property.     |
| `--card-actions-shadow-color`         | String | The actions shadow color CSS custom property.    |
| `--card-actions-shadow-offset-x`      | String | The actions shadow offset x CSS custom property. |
| `--card-actions-shadow-offset-y`      | String | The actions shadow offset y CSS custom property. |
| `--card-actions-shadow-spread`        | String | The actions shadow spread CSS custom property.   |
| `--card-actions-transition-duration`  | String | The actions transition duration CSS custom property. |
| `--card-actions-transition-mode`      | String | The actions transition mode CSS custom property. |
| `--card-actions-transition-property`  | String | The actions transition property CSS custom property. |
| `--card-actions-translate`            | String | The actions translate CSS custom property.       |

# mosaik-card-content

CardContent - A component that represents the content area of a card.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Using the text property:

```html
<mosaik-card-content text="This is the main content of the card."></mosaik-card-content>
```

With slotted content:

```html
<mosaik-card-content>
  <mosaik-text text="This is the main content of the card."></mosaik-text>
</mosaik-card-content>
```

## Properties

| Property         | Attribute    | Modifiers | Type                                         | Description                                      |
|------------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `contentChanged` |              | readonly  | `IEventEmitter<IContentChangedEventDetail>`  | Called when the content changes.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`            | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`      |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasContent`     | `hasContent` |           | `boolean`                                    | Gets or sets the `hasContent` property.          |
| `lang`           | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`           |              |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`      |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `contentChanged` | `ContentChangedEvent`  | Fired when the content presence changes          |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing the main content within the card. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description                                      |
|---------------|--------------------------------------------------|
| `contentText` | The part representing the text content area of the card. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--card-content-font-family`          | String | The content font family CSS custom property.     |
| `--card-content-font-letter-spacing`  | String | The content font letter spacing CSS custom property. |
| `--card-content-font-line-height`     | String | The content font line height CSS custom property. |
| `--card-content-font-size`            | String | The content font size CSS custom property.       |
| `--card-content-font-text-decoration` | String | The content font text decoration CSS custom property. |
| `--card-content-font-text-transform`  | String | The content font text transform CSS custom property. |
| `--card-content-font-weight`          | String | The content font weight CSS custom property.     |
| `--card-content-gap`                  | String | The gap property between elements in the card content. |
| `--card-content-padding-bottom`       | String | The padding-bottom property for the card content. |
| `--card-content-padding-left`         | String | The padding-left property for the card content.  |
| `--card-content-padding-right`        | String | The padding-right property for the card content. |
| `--card-content-padding-top`          | String | The padding-top property for the card content.   |
| `--card-content-shadow`               | String | The content shadow CSS custom property.          |
| `--card-content-shadow-blur`          | String | The content shadow blur CSS custom property.     |
| `--card-content-shadow-color`         | String | The content shadow color CSS custom property.    |
| `--card-content-shadow-offset-x`      | String | The content shadow offset x CSS custom property. |
| `--card-content-shadow-offset-y`      | String | The content shadow offset y CSS custom property. |
| `--card-content-shadow-spread`        | String | The content shadow spread CSS custom property.   |
| `--card-content-transition-duration`  | String | The content transition duration CSS custom property. |
| `--card-content-transition-mode`      | String | The content transition mode CSS custom property. |
| `--card-content-transition-property`  | String | The content transition property CSS custom property. |
| `--card-content-translate`            | String | The content translate CSS custom property.       |
| `--content-font-family`               | String | The font family CSS custom property.             |
| `--content-font-letter-spacing`       | String | The font letter spacing CSS custom property.     |
| `--content-font-line-height`          | String | The font line height CSS custom property.        |
| `--content-font-size`                 | String | The font size CSS custom property.               |
| `--content-font-text-decoration`      | String | The font text decoration CSS custom property.    |
| `--content-font-text-transform`       | String | The font text transform CSS custom property.     |
| `--content-font-weight`               | String | The font weight CSS custom property.             |
| `--content-gap`                       | String | The gap CSS custom property.                     |
| `--content-padding-bottom`            | String | The padding bottom CSS custom property.          |
| `--content-padding-left`              | String | The padding left CSS custom property.            |
| `--content-padding-right`             | String | The padding right CSS custom property.           |
| `--content-padding-top`               | String | The padding top CSS custom property.             |
| `--content-shadow`                    | String | The shadow CSS custom property.                  |
| `--content-shadow-blur`               | String | The shadow blur CSS custom property.             |
| `--content-shadow-color`              | String | The shadow color CSS custom property.            |
| `--content-shadow-offset-x`           | String | The shadow offset x CSS custom property.         |
| `--content-shadow-offset-y`           | String | The shadow offset y CSS custom property.         |
| `--content-shadow-spread`             | String | The shadow spread CSS custom property.           |
| `--content-transition-duration`       | String | The transition duration CSS custom property.     |
| `--content-transition-mode`           | String | The transition mode CSS custom property.         |
| `--content-transition-property`       | String | The transition property CSS custom property.     |
| `--content-translate`                 | String | The translate CSS custom property.               |

# mosaik-card-footer

CardFooter - A component that represents the footer section of a card.

**Mixins:** Themeable, Slottable

## Example

```html
<mosaik-card-footer>
  <mosaik-button label="Action 1"></mosaik-button>
  <mosaik-button label="Action 2"></mosaik-button>
</mosaik-card-footer>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing content within the card footer. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--card-footer-font-family`          | String | The footer font family CSS custom property.      |
| `--card-footer-font-letter-spacing`  | String | The footer font letter spacing CSS custom property. |
| `--card-footer-font-line-height`     | String | The footer font line height CSS custom property. |
| `--card-footer-font-size`            | String | The footer font size CSS custom property.        |
| `--card-footer-font-text-decoration` | String | The footer font text decoration CSS custom property. |
| `--card-footer-font-text-transform`  | String | The footer font text transform CSS custom property. |
| `--card-footer-font-weight`          | String | The footer font weight CSS custom property.      |
| `--card-footer-gap`                  | String | The gap property between elements in the card footer. |
| `--card-footer-padding-bottom`       | String | The padding-bottom property for the card footer. |
| `--card-footer-padding-left`         | String | The padding-left property for the card footer.   |
| `--card-footer-padding-right`        | String | The padding-right property for the card footer.  |
| `--card-footer-padding-top`          | String | The padding-top property for the card footer.    |
| `--card-footer-shadow`               | String | The footer shadow CSS custom property.           |
| `--card-footer-shadow-blur`          | String | The footer shadow blur CSS custom property.      |
| `--card-footer-shadow-color`         | String | The footer shadow color CSS custom property.     |
| `--card-footer-shadow-offset-x`      | String | The footer shadow offset x CSS custom property.  |
| `--card-footer-shadow-offset-y`      | String | The footer shadow offset y CSS custom property.  |
| `--card-footer-shadow-spread`        | String | The footer shadow spread CSS custom property.    |
| `--card-footer-transition-duration`  | String | The footer transition duration CSS custom property. |
| `--card-footer-transition-mode`      | String | The footer transition mode CSS custom property.  |
| `--card-footer-transition-property`  | String | The footer transition property CSS custom property. |
| `--card-footer-translate`            | String | The footer translate CSS custom property.        |

# mosaik-card-header

CardHeader - A component that represents the header section of a card.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Using text properties:

```html
<mosaik-card-header text="Card Title" sub-text="Card Subtitle"></mosaik-card-header>
```

Full header anatomy using all slots:

```html
<mosaik-card-header>
  <mosaik-icon slot="prefix"></mosaik-icon>
  <mosaik-card-title slot="header" text="Card Title"></mosaik-card-title>
  <mosaik-card-sub-title slot="subHeader" text="Card Subtitle"></mosaik-card-sub-title>
  <mosaik-button slot="suffix" label="Action" appearance="plain"></mosaik-button>
</mosaik-card-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subText`      |           |           | `string`                                     | Gets or sets the `subText` property.             |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
|             | The default slot for placing additional content within the header. |
| `header`    | The slot for placing the main header content.    |
| `prefix`    | The slot for placing prefix content (e.g., icons). |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | The slot for placing sub-header content.         |
| `suffix`    | The slot for placing suffix content (e.g., buttons or icons). |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `heading` | The part representing the heading area of the card header. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--card-header-font-family`          | String | The header font family CSS custom property.      |
| `--card-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--card-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--card-header-font-size`            | String | The header font size CSS custom property.        |
| `--card-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--card-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--card-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--card-header-gap`                  | String | The gap property between elements in the card header. |
| `--card-header-padding-bottom`       | String | The padding-bottom property for the card header. |
| `--card-header-padding-left`         | String | The padding-left property for the card header.   |
| `--card-header-padding-right`        | String | The padding-right property for the card header.  |
| `--card-header-padding-top`          | String | The padding-top property for the card header.    |
| `--card-header-shadow`               | String | The header shadow CSS custom property.           |
| `--card-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--card-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--card-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--card-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--card-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--card-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--card-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--card-header-transition-property`  | String | The header transition property CSS custom property. |
| `--card-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-card-sub-title

Card Sub Title - A component that represents the subtitle section of a card.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Using text attribute:

```html
<mosaik-card-sub-title text="Premium Edition"></mosaik-card-sub-title>
```

Using default slot with text content:

```html
<mosaik-card-sub-title>Premium Edition</mosaik-card-sub-title>
```

## Properties

| Property         | Attribute    | Modifiers | Type                                         | Description                                      |
|------------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `contentChanged` |              | readonly  | `IEventEmitter<IContentChangedEventDetail>`  | Called when the content changes.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`            | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`      |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasContent`     | `hasContent` |           | `boolean`                                    | Gets or sets the `hasContent` property.          |
| `lang`           | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`           | `text`       |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`      |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `contentChanged` | `ContentChangedEvent`  | Fired when the content presence changes          |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing the subtitle content. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--card-sub-title-background-color`     | Color  | The background-color property for the card subtitle. |
| `--card-sub-title-border-color`         | Color  | The border-color property for the card subtitle. |
| `--card-sub-title-font-family`          | String | The font-family property for the card subtitle text. |
| `--card-sub-title-font-letter-spacing`  | String | The letter-spacing property for the card subtitle text. |
| `--card-sub-title-font-line-height`     | String | The line-height property for the card subtitle text. |
| `--card-sub-title-font-size`            | String | The font-size property for the card subtitle text. |
| `--card-sub-title-font-text-decoration` | String | The text-decoration property for the card subtitle text. |
| `--card-sub-title-font-text-transform`  | String | The text-transform property for the card subtitle text. |
| `--card-sub-title-font-weight`          | String | The font-weight property for the card subtitle text. |
| `--card-sub-title-foreground-color`     | Color  | The foreground-color property for the card subtitle. |
| `--card-sub-title-gap`                  | String | The sub title gap CSS custom property.           |
| `--card-sub-title-padding-bottom`       | String | The sub title padding bottom CSS custom property. |
| `--card-sub-title-padding-left`         | String | The sub title padding left CSS custom property.  |
| `--card-sub-title-padding-right`        | String | The sub title padding right CSS custom property. |
| `--card-sub-title-padding-top`          | String | The sub title padding top CSS custom property.   |
| `--card-sub-title-shadow`               | String | The sub title shadow CSS custom property.        |
| `--card-sub-title-shadow-blur`          | String | The sub title shadow blur CSS custom property.   |
| `--card-sub-title-shadow-color`         | String | The sub title shadow color CSS custom property.  |
| `--card-sub-title-shadow-offset-x`      | String | The sub title shadow offset x CSS custom property. |
| `--card-sub-title-shadow-offset-y`      | String | The sub title shadow offset y CSS custom property. |
| `--card-sub-title-shadow-spread`        | String | The sub title shadow spread CSS custom property. |
| `--card-sub-title-transition-duration`  | String | The sub title transition duration CSS custom property. |
| `--card-sub-title-transition-mode`      | String | The sub title transition mode CSS custom property. |
| `--card-sub-title-transition-property`  | String | The sub title transition property CSS custom property. |
| `--card-sub-title-translate`            | String | The sub title translate CSS custom property.     |
| `--content-font-family`                 | String | The font family CSS custom property.             |
| `--content-font-letter-spacing`         | String | The font letter spacing CSS custom property.     |
| `--content-font-line-height`            | String | The font line height CSS custom property.        |
| `--content-font-size`                   | String | The font size CSS custom property.               |
| `--content-font-text-decoration`        | String | The font text decoration CSS custom property.    |
| `--content-font-text-transform`         | String | The font text transform CSS custom property.     |
| `--content-font-weight`                 | String | The font weight CSS custom property.             |
| `--content-gap`                         | String | The gap CSS custom property.                     |
| `--content-padding-bottom`              | String | The padding bottom CSS custom property.          |
| `--content-padding-left`                | String | The padding left CSS custom property.            |
| `--content-padding-right`               | String | The padding right CSS custom property.           |
| `--content-padding-top`                 | String | The padding top CSS custom property.             |
| `--content-shadow`                      | String | The shadow CSS custom property.                  |
| `--content-shadow-blur`                 | String | The shadow blur CSS custom property.             |
| `--content-shadow-color`                | String | The shadow color CSS custom property.            |
| `--content-shadow-offset-x`             | String | The shadow offset x CSS custom property.         |
| `--content-shadow-offset-y`             | String | The shadow offset y CSS custom property.         |
| `--content-shadow-spread`               | String | The shadow spread CSS custom property.           |
| `--content-transition-duration`         | String | The transition duration CSS custom property.     |
| `--content-transition-mode`             | String | The transition mode CSS custom property.         |
| `--content-transition-property`         | String | The transition property CSS custom property.     |
| `--content-translate`                   | String | The translate CSS custom property.               |

# mosaik-card-title

CardTitle - A component that represents the title section of a card.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Using text attribute:

```html
<mosaik-card-title text="Product Name"></mosaik-card-title>
```

Using default slot with text content:

```html
<mosaik-card-title>Product Name</mosaik-card-title>
```

## Properties

| Property         | Attribute    | Modifiers | Type                                         | Description                                      |
|------------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `contentChanged` |              | readonly  | `IEventEmitter<IContentChangedEventDetail>`  | Called when the content changes.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`            | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`      |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasContent`     | `hasContent` |           | `boolean`                                    | Gets or sets the `hasContent` property.          |
| `lang`           | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`           | `text`       |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`      |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `contentChanged` | `ContentChangedEvent`  | Fired when the content presence changes          |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing the title content.  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--card-title-background-color`     | Color  | The background-color property for the card title. |
| `--card-title-border-color`         | Color  | The border-color property for the card title.    |
| `--card-title-font-family`          | String | The font-family property for the card title text. |
| `--card-title-font-letter-spacing`  | String | The letter-spacing property for the card title text. |
| `--card-title-font-line-height`     | String | The line-height property for the card title text. |
| `--card-title-font-size`            | String | The font-size property for the card title text.  |
| `--card-title-font-text-decoration` | String | The text-decoration property for the card title text. |
| `--card-title-font-text-transform`  | String | The text-transform property for the card title text. |
| `--card-title-font-weight`          | String | The font-weight property for the card title text. |
| `--card-title-foreground-color`     | Color  | The foreground-color property for the card title. |
| `--card-title-gap`                  | String | The title gap CSS custom property.               |
| `--card-title-padding-bottom`       | String | The title padding bottom CSS custom property.    |
| `--card-title-padding-left`         | String | The title padding left CSS custom property.      |
| `--card-title-padding-right`        | String | The title padding right CSS custom property.     |
| `--card-title-padding-top`          | String | The title padding top CSS custom property.       |
| `--card-title-shadow`               | String | The title shadow CSS custom property.            |
| `--card-title-shadow-blur`          | String | The title shadow blur CSS custom property.       |
| `--card-title-shadow-color`         | String | The title shadow color CSS custom property.      |
| `--card-title-shadow-offset-x`      | String | The title shadow offset x CSS custom property.   |
| `--card-title-shadow-offset-y`      | String | The title shadow offset y CSS custom property.   |
| `--card-title-shadow-spread`        | String | The title shadow spread CSS custom property.     |
| `--card-title-transition-duration`  | String | The title transition duration CSS custom property. |
| `--card-title-transition-mode`      | String | The title transition mode CSS custom property.   |
| `--card-title-transition-property`  | String | The title transition property CSS custom property. |
| `--card-title-translate`            | String | The title translate CSS custom property.         |
| `--content-font-family`             | String | The font family CSS custom property.             |
| `--content-font-letter-spacing`     | String | The font letter spacing CSS custom property.     |
| `--content-font-line-height`        | String | The font line height CSS custom property.        |
| `--content-font-size`               | String | The font size CSS custom property.               |
| `--content-font-text-decoration`    | String | The font text decoration CSS custom property.    |
| `--content-font-text-transform`     | String | The font text transform CSS custom property.     |
| `--content-font-weight`             | String | The font weight CSS custom property.             |
| `--content-gap`                     | String | The gap CSS custom property.                     |
| `--content-padding-bottom`          | String | The padding bottom CSS custom property.          |
| `--content-padding-left`            | String | The padding left CSS custom property.            |
| `--content-padding-right`           | String | The padding right CSS custom property.           |
| `--content-padding-top`             | String | The padding top CSS custom property.             |
| `--content-shadow`                  | String | The shadow CSS custom property.                  |
| `--content-shadow-blur`             | String | The shadow blur CSS custom property.             |
| `--content-shadow-color`            | String | The shadow color CSS custom property.            |
| `--content-shadow-offset-x`         | String | The shadow offset x CSS custom property.         |
| `--content-shadow-offset-y`         | String | The shadow offset y CSS custom property.         |
| `--content-shadow-spread`           | String | The shadow spread CSS custom property.           |
| `--content-transition-duration`     | String | The transition duration CSS custom property.     |
| `--content-transition-mode`         | String | The transition mode CSS custom property.         |
| `--content-transition-property`     | String | The transition property CSS custom property.     |
| `--content-translate`               | String | The translate CSS custom property.               |

# mosaik-card

Card - A versatile container component for organizing related content in a visually distinct layout.

**Mixins:** Themeable, Elevatable, Appearanceable, Insetable, Fitable, Orientable, TextFormattable, Slottable, Selectable, Disableable

## Examples

Full card anatomy with all sub-components:

```html
<mosaik-card>
  <img slot="cover" src="hero.jpg" alt="Card cover image">
  <mosaik-card-header>
    <mosaik-card-title text="Product Name"></mosaik-card-title>
    <mosaik-card-sub-title text="Premium Edition"></mosaik-card-sub-title>
  </mosaik-card-header>
  <mosaik-card-content text="Detailed product description and features."></mosaik-card-content>
  <mosaik-card-actions>
    <mosaik-button label="Learn More"></mosaik-button>
    <mosaik-button label="Buy Now" variant="primary"></mosaik-button>
  </mosaik-card-actions>
  <mosaik-card-footer>
    <mosaik-text text="Last updated: Today"></mosaik-text>
  </mosaik-card-footer>
</mosaik-card>
```

Media card with cover image and elevation:

```html
<mosaik-card elevation="2">
  <img slot="cover" src="hero.jpg" alt="Article image">
  <mosaik-card-header>
    <mosaik-card-title text="Article Title"></mosaik-card-title>
    <mosaik-card-sub-title text="Article summary and preview content."></mosaik-card-sub-title>
  </mosaik-card-header>
  <mosaik-card-footer>
    <mosaik-text text="Published: March 2024"></mosaik-text>
  </mosaik-card-footer>
</mosaik-card>
```

Selectable card with inline media:

```html
<mosaik-card inline-media>
  <img slot="media" src="thumbnail.jpg" alt="Option thumbnail">
  <mosaik-card-header>
    <mosaik-card-title text="Option A"></mosaik-card-title>
    <mosaik-card-sub-title text="Best Value"></mosaik-card-sub-title>
  </mosaik-card-header>
  <mosaik-card-content text="This option provides the best value for your needs."></mosaik-card-content>
</mosaik-card>
```

Horizontal card layout with outline appearance:

```html
<mosaik-card orientation="horizontal" appearance="outline">
  <img slot="media" src="profile.jpg" alt="Profile picture">
  <mosaik-card-header>
    <mosaik-card-title text="John Doe"></mosaik-card-title>
    <mosaik-card-sub-title text="Software Engineer"></mosaik-card-sub-title>
  </mosaik-card-header>
  <mosaik-card-content text="Bio and professional summary."></mosaik-card-content>
</mosaik-card>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |               |           | `string`                                     | Gets or sets the `content` property.             |
| `deselected`   |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `elevation`    | `elevation`   |           | `ElevationWeight`                            | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `fit`          | `fit`         |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `formatter`    |               |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`       |               |           | `string`                                     | The `header` property represents the header of the card.<br />It will inherited automatically by the `CardHeaderElement`. |
| `inlineMedia`  | `inlineMedia` |           | `boolean`                                    | Gets or sets the `inlineMedia` property.         |
| `inset`        | `inset`       |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `isSelected`   | `is-selected` |           | `boolean`                                    | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `selected`     |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `subHeader`    |               |           | `string`                                     | The `subHeader` property represents the sub header of the card.<br />It will inherited automatically by the `CardSubTitleElement`. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `deselect`             | `(): void`                                       | Deselects the element.                           |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`               | `(): void`                                       | Selects the element.                             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `deselected`   | `DeselectedEvent`      | Fired when the card is deselected (when selectable) |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the card is selected (when selectable) |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | Action buttons or interactive elements for user engagement |
| `content` | Main content body for text, descriptions, or detailed information |
| `cover`   | Primary visual content like hero images or graphics positioned at the top |
| `footer`  | Footer section for supplementary information, links, or metadata |
| `header`  | Header section typically containing titles and navigation elements |
| `media`   | Additional media content such as images, videos, or rich content |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `actions`   | Actions section container for buttons and controls |
| `content`   | Main content area container                      |
| `cover`     | Cover image or media container at the top of the card |
| `elevation` | Container for card elevation and shadow effects  |
| `footer`    | Footer section container for additional content  |
| `header`    | Header section for titles and subtitles          |
| `heading`   | Header section container wrapping header and inline media |
| `media`     | Media content container for images or visual elements |

## CSS Custom Properties

| Property                      | Type   | Description                               |
|-------------------------------|--------|-------------------------------------------|
| `--card-background-color`     | String | Background color of the card container    |
| `--card-border-color`         | String | Border color around the card              |
| `--card-border-radius`        | String | Border radius for card corner rounding    |
| `--card-border-style`         | String | Border line style (solid, dashed, dotted) |
| `--card-border-width`         | String | Border width for card outline             |
| `--card-divider-height`       | String | Height of divider lines between sections  |
| `--card-font-family`          | String | Font family for card text content         |
| `--card-font-letter-spacing`  | String | Letter spacing for card text              |
| `--card-font-line-height`     | String | Line height for card text                 |
| `--card-font-size`            | String | Font size for card text                   |
| `--card-font-text-decoration` | String | Text decoration for card text             |
| `--card-font-text-transform`  | String | Text transformation for card text         |
| `--card-font-weight`          | String | Font weight for card text                 |
| `--card-foreground-color`     | String | Primary text and icon color               |
| `--card-gap`                  | String | The gap CSS custom property.              |
| `--card-padding-bottom`       | String | The padding bottom CSS custom property.   |
| `--card-padding-left`         | String | The padding left CSS custom property.     |
| `--card-padding-right`        | String | The padding right CSS custom property.    |
| `--card-padding-top`          | String | The padding top CSS custom property.      |
| `--card-shadow`               | String | The shadow CSS custom property.           |
| `--card-shadow-blur`          | String | Shadow blur radius for elevation effect   |
| `--card-shadow-color`         | String | Shadow color for elevation effect         |
| `--card-shadow-offset-x`      | String | Horizontal shadow offset                  |
| `--card-shadow-offset-y`      | String | Vertical shadow offset                    |
| `--card-shadow-spread`        | String | Shadow spread radius                      |
| `--card-transition-duration`  | String | Duration of hover and state transitions   |
| `--card-transition-mode`      | String | Timing function for transitions           |
| `--card-transition-property`  | String | CSS properties to transition              |
| `--card-translate`            | String | The translate CSS custom property.        |

# mosaik-carousel-2

Carousel 2 - An interactive slideshow component for cycling through a collection of content items.

**Mixins:** Themeable, Slottable

## Examples

Basic carousel with multiple items:

```html
<mosaik-carousel-2 num-visible="3" num-scroll="1">
  <mosaik-carousel-item-2>Slide 1</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Slide 2</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Slide 3</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Slide 4</mosaik-carousel-item-2>
</mosaik-carousel-2>
```

Vertical carousel with autoplay:

```html
<mosaik-carousel-2 orientation="vertical" autoplay-interval="3000" show-indicators show-navigators>
  <mosaik-carousel-item-2>Content 1</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Content 2</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Content 3</mosaik-carousel-item-2>
</mosaik-carousel-2>
```

Circular carousel with navigation:

```html
<mosaik-carousel-2 circular show-indicators show-navigators>
  <mosaik-carousel-item-2>Item A</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Item B</mosaik-carousel-item-2>
  <mosaik-carousel-item-2>Item C</mosaik-carousel-item-2>
</mosaik-carousel-2>
```

## Properties

| Property           | Attribute          | Modifiers | Type                                             | Description                                      |
|--------------------|--------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `autoplayInterval` | `autoplayInterval` |           | `number`                                         | Gets or sets the `autoplayInterval` property.    |
| `changed`          |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `circular`         | `circular`         |           | `boolean`                                        | Gets or sets the `circular` property.            |
| `connected`        |                    | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`              |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`     |                    | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `itemsChanged`     |                    | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `lang`             | `lang`             |           | `string`                                         | The lang property indicates the language of the element's content. |
| `numScroll`        | `numScroll`        |           | `number`                                         | Gets or sets the `numScroll` property.           |
| `numVisible`       | `numVisible`       |           | `number`                                         | Gets or sets the `numVisible` property.          |
| `orientation`      | `orientation`      |           | `Orientation`                                    | Gets or sets the `orientation` property.         |
| `page`             | `page`             |           | `number`                                         | Gets or sets the `page` property.                |
| `selectionChanged` |                    | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `showIndicators`   | `showIndicators`   |           | `boolean`                                        | Gets or sets the `showIndicators` property.      |
| `showNavigators`   | `showNavigators`   |           | `boolean`                                        | Gets or sets the `showNavigators` property.      |
| `themeName`        |                    |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `ariaNextButtonLabel`   | `(): string`                                     |                                                  |
| `ariaPageLabel`         | `(value: number): string`                        |                                                  |
| `ariaPrevButtonLabel`   | `(): string`                                     |                                                  |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `deselect`              | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `isBackwardNavDisabled` | `(): boolean`                                    |                                                  |
| `isForwardNavDisabled`  | `(): boolean`                                    |                                                  |
| `isVertical`            | `(): boolean`                                    |                                                  |
| `navBackward`           | `(): void`                                       |                                                  |
| `navForward`            | `(): void`                                       |                                                  |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onDotClick`            | `(index: number): void`                          |                                                  |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `onTransitionEnd`       | `(): void`                                       |                                                  |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetSelection`        | `(): void`                                       | Resets the current selection.                    |
| `select`                | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`           | `(): void`                                       | Select the first item.                           |
| `selectLast`            | `(): void`                                       | Select the last item.                            |
| `selectNext`            | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious`        | `(): void`                                       | Select the previous item before current selected item/index. |
| `totalDots`             | `(): number`                                     |                                                  |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Fired when carousel properties change            |
| `connected`        | `ConnectedEvent`        | Fired when the carousel is connected to the DOM  |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `itemsChanged`     | `ItemsChangedEvent`     | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged` | `SelectionChangedEvent` | Fired when the selected item changes, providing both old and new selected items |

## Slots

| Name            | Description                                      |
|-----------------|--------------------------------------------------|
|                 | The default slot for carousel items (mosaik-carousel-item-2 elements) |
| `footer`        | Optional footer content displayed below the carousel |
| `header`        | Optional header content displayed above the carousel |
| `item`          | The item slot.                                   |
| `next-icon`     | Custom icon for the next navigation button       |
| `previous-icon` | Custom icon for the previous navigation button   |
| `style`         | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                         |
|--------------|-------------------------------------|
| `content`    | The main carousel content container |
| `indicators` | The page indicator dots container   |

## CSS Custom Properties

| Property                           | Type   | Description                                   |
|------------------------------------|--------|-----------------------------------------------|
| `--carousel2-font-family`          | String | The font family CSS custom property.          |
| `--carousel2-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--carousel2-font-line-height`     | String | The font line height CSS custom property.     |
| `--carousel2-font-size`            | String | The font size CSS custom property.            |
| `--carousel2-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--carousel2-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--carousel2-font-weight`          | String | The font weight CSS custom property.          |
| `--carousel2-gap`                  | String | The gap CSS custom property.                  |
| `--carousel2-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--carousel2-padding-left`         | String | The padding left CSS custom property.         |
| `--carousel2-padding-right`        | String | The padding right CSS custom property.        |
| `--carousel2-padding-top`          | String | The padding top CSS custom property.          |
| `--carousel2-shadow`               | String | The shadow CSS custom property.               |
| `--carousel2-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--carousel2-shadow-color`         | String | The shadow color CSS custom property.         |
| `--carousel2-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--carousel2-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--carousel2-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--carousel2-transition-duration`  | String | The transition duration CSS custom property.  |
| `--carousel2-transition-mode`      | String | The transition mode CSS custom property.      |
| `--carousel2-transition-property`  | String | The transition property CSS custom property.  |
| `--carousel2-translate`            | String | The translate CSS custom property.            |

# mosaik-carousel-item-2

Carousel Item 2 - An individual slide or content panel within a Carousel 2 component.

**Mixins:** Themeable, Valueable

## Examples

Basic carousel item with image:

```html
<mosaik-carousel-item-2>
  <mosaik-image src="slide1.jpg" alt="Slide 1"></mosaik-image>
</mosaik-carousel-item-2>
```

Carousel item with card content:

```html
<mosaik-carousel-item-2>
  <mosaik-card>
    <h3>Product Title</h3>
    <p>Product description goes here.</p>
  </mosaik-card>
</mosaik-carousel-item-2>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |              | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `index`        |              | readonly  | `number`                                     | Gets the index of the item.                      |
| `isSelected`   | `isSelected` |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when carousel item properties change       |
| `connected`    | `ConnectedEvent`       | Fired when the carousel item is connected to the DOM |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for the carousel item content   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--carousel-item2-font-family`          | String | The item2 font family CSS custom property.       |
| `--carousel-item2-font-letter-spacing`  | String | The item2 font letter spacing CSS custom property. |
| `--carousel-item2-font-line-height`     | String | The item2 font line height CSS custom property.  |
| `--carousel-item2-font-size`            | String | The item2 font size CSS custom property.         |
| `--carousel-item2-font-text-decoration` | String | The item2 font text decoration CSS custom property. |
| `--carousel-item2-font-text-transform`  | String | The item2 font text transform CSS custom property. |
| `--carousel-item2-font-weight`          | String | The item2 font weight CSS custom property.       |
| `--carousel-item2-gap`                  | String | The item2 gap CSS custom property.               |
| `--carousel-item2-padding-bottom`       | String | The item2 padding bottom CSS custom property.    |
| `--carousel-item2-padding-left`         | String | The item2 padding left CSS custom property.      |
| `--carousel-item2-padding-right`        | String | The item2 padding right CSS custom property.     |
| `--carousel-item2-padding-top`          | String | The item2 padding top CSS custom property.       |
| `--carousel-item2-shadow`               | String | The item2 shadow CSS custom property.            |
| `--carousel-item2-shadow-blur`          | String | The item2 shadow blur CSS custom property.       |
| `--carousel-item2-shadow-color`         | String | The item2 shadow color CSS custom property.      |
| `--carousel-item2-shadow-offset-x`      | String | The item2 shadow offset x CSS custom property.   |
| `--carousel-item2-shadow-offset-y`      | String | The item2 shadow offset y CSS custom property.   |
| `--carousel-item2-shadow-spread`        | String | The item2 shadow spread CSS custom property.     |
| `--carousel-item2-transition-duration`  | String | The item2 transition duration CSS custom property. |
| `--carousel-item2-transition-mode`      | String | The item2 transition mode CSS custom property.   |
| `--carousel-item2-transition-property`  | String | The item2 transition property CSS custom property. |
| `--carousel-item2-translate`            | String | The item2 translate CSS custom property.         |

# mosaik-carousel-item

CarouselItem - An individual content slide within a carousel navigation component.

Represents a single content item that can be displayed within a carousel layout.
Contains content such as images, cards, text, or any other elements that need
to be presented in the carousel's sliding presentation format.

**Mixins:** Themeable, Disableable, Valueable

## Example

```html
<!-- Image carousel item -->
<mosaik-carousel-item>
  <mosaik-image src="hero-banner.jpg" alt="Featured product"></mosaik-image>
  <div class="overlay">
    <h2>New Collection</h2>
    <mosaik-button appearance="primary">Shop Now</mosaik-button>
  </div>
</mosaik-carousel-item>

<!-- Card carousel item -->
<mosaik-carousel-item>
  <mosaik-card appearance="elevated">
    <mosaik-avatar slot="header" src="user.jpg"></mosaik-avatar>
    <mosaik-text slot="header">John Smith</mosaik-text>
    <mosaik-text>"This product changed everything for our team!"</mosaik-text>
    <mosaik-rating slot="footer" value="5" readonly></mosaik-rating>
  </mosaik-card>
</mosaik-carousel-item>

<!-- Feature carousel item -->
<mosaik-carousel-item>
  <div class="feature-content">
    <mosaik-icon size="large"></mosaik-icon>
    <mosaik-text variant="headline">Analytics Dashboard</mosaik-text>
    <mosaik-text>Track your performance with detailed insights</mosaik-text>
  </div>
</mosaik-carousel-item>
```

## Properties

| Property           | Attribute           | Modifiers | Type                                         | Description                                      |
|--------------------|---------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`          |                     | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                     | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`       |                     | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`              | `dir`               |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`          |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                     | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dismissDirection` | `dismiss-direction` |           | `string \| null`                             | Gets or sets the `dismissDirection` property.<br />Indicates the direction this card is being dismissed or arriving from<br />in deck display mode. Used by CSS to determine animation direction. |
| `displayText`      |                     | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `index`            |                     | readonly  | `number`                                     | Gets the index of the item.                      |
| `isActive`         | `is-active`         |           | `boolean`                                    | Gets or sets the `isActive` property.<br />Indicates whether this item is the currently active card in deck display mode. |
| `isDismissed`      | `is-dismissed`      |           | `boolean`                                    | Gets or sets the `isDismissed` property.<br />Indicates whether this item has been dismissed (swiped past) in deck display mode. |
| `isSelected`       | `isSelected`        |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `lang`             | `lang`              |           | `string`                                     | The lang property indicates the language of the element's content. |
| `parent`           |                     | readonly  | `CarouselElement`                            | Get the item parent.                             |
| `selected`         |                     | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`        |                     |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`            | `value`             |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content area for the carousel item's content |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--carousel-item-font-family`          | String | The item font family CSS custom property.        |
| `--carousel-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--carousel-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--carousel-item-font-size`            | String | The item font size CSS custom property.          |
| `--carousel-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--carousel-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--carousel-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--carousel-item-gap`                  | String | The item gap CSS custom property.                |
| `--carousel-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--carousel-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--carousel-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--carousel-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--carousel-item-shadow`               | String | The item shadow CSS custom property.             |
| `--carousel-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--carousel-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--carousel-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--carousel-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--carousel-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--carousel-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--carousel-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--carousel-item-transition-property`  | String | The item transition property CSS custom property. |
| `--carousel-item-translate`            | String | The item translate CSS custom property.          |

# CarouselItem2Element - Individual item within Carousel2

## Description
CarouselItem2Element represents a single item within a Carousel2 carousel. It wraps content to be displayed in the carousel and handles the layout and positioning logic for carousel items.

## Element
- **Tag**: `mosaik-carousel-item-2`
- **Category**: Selectors

## Slots
- **default** - The content of the carousel item (images, cards, or any custom content)

## CSS Parts
(Styling inherited from parent Carousel2 component)

## CSS Custom Properties
(Styling controlled by parent Carousel2 component theme)

## Dependencies
None (used within `mosaik-carousel-2`)

## Examples

### Basic carousel item
```html
<mosaik-carousel-2>
    <mosaik-carousel-item-2>
        <img src="product1.jpg" alt="Product 1">
    </mosaik-carousel-item-2>
    <mosaik-carousel-item-2>
        <img src="product2.jpg" alt="Product 2">
    </mosaik-carousel-item-2>
</mosaik-carousel-2>
```

### Carousel item with card
```html
<mosaik-carousel-2 num-visible="3">
    <mosaik-carousel-item-2>
        <mosaik-card>
            <mosaik-card-header>Product 1</mosaik-card-header>
            <mosaik-card-content>Description here</mosaik-card-content>
        </mosaik-card>
    </mosaik-carousel-item-2>
    <!-- More items... -->
</mosaik-carousel-2>
```

### Carousel item with custom content
```html
<mosaik-carousel-2>
    <mosaik-carousel-item-2>
        <div class="promo-slide">
            <h2>Special Offer!</h2>
            <p>Get 50% off today</p>
            <mosaik-button label="Shop Now" variant="primary"></mosaik-button>
        </div>
    </mosaik-carousel-item-2>
</mosaik-carousel-2>
```

## Usage Notes
- Always use within a `mosaik-carousel-2` parent element
- The item's dimensions adapt to the carousel's `numVisible` setting
- Content should be sized appropriately for the carousel container
- Multiple items can be visible simultaneously based on carousel settings

# mosaik-carousel

Carousel - A content navigation component that displays items in a horizontally scrolling slideshow format.

Enables users to browse through multiple content items (images, cards, media) in a space-efficient
carousel layout with navigation controls. Supports automatic cycling, manual navigation, and
touch/swipe interactions for engaging content presentation. Offers two display modes: `slide`
(horizontal track) and `deck` (stacked cards with depth effect). Navigation button placement
can be configured via `navigationPosition` (`split`, `inside`, `outside`).

**Mixins:** Themeable, Disableable, Appearanceable, Variantable

## Example

```html
<!-- Slide carousel with outside navigation -->
<mosaik-carousel display-mode="slide" navigation-position="outside" show-navigation>
  <mosaik-carousel-item>
    <mosaik-image src="slide1.jpg" alt="Slide 1"></mosaik-image>
  </mosaik-carousel-item>
  <mosaik-carousel-item>
    <mosaik-image src="slide2.jpg" alt="Slide 2"></mosaik-image>
  </mosaik-carousel-item>
</mosaik-carousel>

<!-- Deck carousel (Tinder-like stacked cards) -->
<mosaik-carousel display-mode="deck" show-navigation>
  <mosaik-carousel-item>
    <mosaik-card>Card 1</mosaik-card>
  </mosaik-carousel-item>
  <mosaik-carousel-item>
    <mosaik-card>Card 2</mosaik-card>
  </mosaik-carousel-item>
  <mosaik-carousel-item>
    <mosaik-card>Card 3</mosaik-card>
  </mosaik-carousel-item>
</mosaik-carousel>
```

## Properties

| Property             | Attribute            | Modifiers | Type                                             | Description                                      |
|----------------------|----------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`         | `appearance`         |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`            |                      | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`          |                      | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`                |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`           | `disabled`           |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`       |                      | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayMode`        | `displayMode`        |           | `CarouselDisplayMode`                            | Gets or sets the `displayMode` property.<br />Determines how carousel items are arranged and transitioned.<br />Use `slide` for a traditional horizontal track or `deck` for stacked card presentation. |
| `hasNext`            | `hasNext`            |           | `boolean`                                        | Gets or sets the `hasNext` property.             |
| `hasPrevious`        | `hasPrevious`        |           | `boolean`                                        | Gets or sets the `hasPrevious` property.         |
| `itemsChanged`       |                      | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `lang`               | `lang`               |           | `string`                                         | The lang property indicates the language of the element's content. |
| `loop`               | `loop`               |           | `boolean`                                        | Gets or sets the `loop` property.                |
| `navigationPosition` | `navigationPosition` |           | `CarouselNavigationPosition`                     | Gets or sets the `navigationPosition` property.<br />Controls where the navigation buttons are placed relative to the carousel content. |
| `selectedItem`       |                      |           | `TItem \| null`                                  | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectionChanged`   |                      | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `showIndicator`      | `showIndicator`      |           | `boolean`                                        | Gets or sets the `showIndicator` property.       |
| `showNavigation`     | `showNavigation`     |           | `boolean`                                        | Gets or sets the `showNavigation` property.      |
| `themeName`          |                      |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`            | `variant`            |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method           | Type                                             | Description                                      |
|------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`     | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`       | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`           | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`            | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`             | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`  | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetSelection` | `(): void`                                       | Resets the current selection.                    |
| `select`         | `(item: CarouselItemElement): void`              | Select the item.                                 |
| `selectFirst`    | `(): void`                                       | Select the first item.                           |
| `selectLast`     | `(): void`                                       | Select the last item.                            |
| `selectNext`     | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious` | `(): void`                                       | Select the previous item before current selected item/index. |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Fired when any property changes                  |
| `connected`        | `ConnectedEvent`        | Fired when the element is connected to the DOM   |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `itemsChanged`     | `ItemsChangedEvent`     | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged` | `SelectionChangedEvent` | Fired when the selected item changes, providing both old and new selected items |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
|             | Default content area for carousel items and navigation elements |
| `indicator` | The indicator slot.                              |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                  |
|-------------|----------------------------------------------|
| `content`   | Content area wrapping the item list or deck  |
| `indicator` | Page indicator showing current position      |
| `next`      | Navigation button to go to the next item     |
| `previous`  | Navigation button to go to the previous item |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--carousel-deck-animation-duration` | String | Transition duration for deck card animations     |
| `--carousel-deck-rotation`           | String | Rotation angle for pile cards (design token)     |
| `--carousel-font-family`             | String | The font family CSS custom property.             |
| `--carousel-font-letter-spacing`     | String | The font letter spacing CSS custom property.     |
| `--carousel-font-line-height`        | String | The font line height CSS custom property.        |
| `--carousel-font-size`               | String | The font size CSS custom property.               |
| `--carousel-font-text-decoration`    | String | The font text decoration CSS custom property.    |
| `--carousel-font-text-transform`     | String | The font text transform CSS custom property.     |
| `--carousel-font-weight`             | String | The font weight CSS custom property.             |
| `--carousel-gap`                     | String | Spacing between carousel items                   |
| `--carousel-padding-bottom`          | String | The padding bottom CSS custom property.          |
| `--carousel-padding-left`            | String | The padding left CSS custom property.            |
| `--carousel-padding-right`           | String | The padding right CSS custom property.           |
| `--carousel-padding-top`             | String | The padding top CSS custom property.             |
| `--carousel-shadow`                  | String | The shadow CSS custom property.                  |
| `--carousel-shadow-blur`             | String | The shadow blur CSS custom property.             |
| `--carousel-shadow-color`            | String | The shadow color CSS custom property.            |
| `--carousel-shadow-offset-x`         | String | The shadow offset x CSS custom property.         |
| `--carousel-shadow-offset-y`         | String | The shadow offset y CSS custom property.         |
| `--carousel-shadow-spread`           | String | The shadow spread CSS custom property.           |
| `--carousel-transition-duration`     | String | Animation duration for slide-mode item transitions |
| `--carousel-transition-mode`         | String | The transition mode CSS custom property.         |
| `--carousel-transition-property`     | String | The transition property CSS custom property.     |
| `--carousel-translate`               | String | The translate CSS custom property.               |

# Carousel2Element - Carousel/slider for cycling through content

## Description
The Carousel2Element is an alternative implementation of the carousel pattern for cycling through elements such as images, cards, or any content. Supports horizontal and vertical orientations, navigation buttons, page indicators, autoplay functionality, and circular (infinite loop) mode. Can display multiple items per page and scroll by custom amounts.

## Element
- **Tag**: `mosaik-carousel-2`
- **Category**: Selectors

## Slots
- **default** - Carousel items (typically `mosaik-carousel-item-2` elements)
- `header` - Optional header content above the carousel
- `footer` - Optional footer content below the carousel
- `previous-icon` - Custom icon for the previous/back navigation button
- `next-icon` - Custom icon for the next/forward navigation button

## CSS Parts
- `content` - The main carousel content container
- `indicators` - The page indicator dots container

## CSS Custom Properties
(Defined in theme tokens - carousel2.json)

## Dependencies
None (self-contained selector element)

## Examples

### Basic image carousel
```html
<mosaik-carousel-2 num-visible="1" num-scroll="1" show-indicators="true" show-navigators="true">
    <mosaik-carousel-item-2>
        <img src="image1.jpg" alt="Slide 1">
    </mosaik-carousel-item-2>
    <mosaik-carousel-item-2>
        <img src="image2.jpg" alt="Slide 2">
    </mosaik-carousel-item-2>
    <mosaik-carousel-item-2>
        <img src="image3.jpg" alt="Slide 3">
    </mosaik-carousel-item-2>
</mosaik-carousel-2>
```

### Multi-item carousel
```html
<mosaik-carousel-2 
    num-visible="3" 
    num-scroll="3" 
    circular="true"
    show-navigators="true">
    <mosaik-carousel-item-2>
        <mosaik-card>Product 1</mosaik-card>
    </mosaik-carousel-item-2>
    <mosaik-carousel-item-2>
        <mosaik-card>Product 2</mosaik-card>
    </mosaik-carousel-item-2>
    <!-- More items... -->
</mosaik-carousel-2>
```

### Autoplay carousel
```html
<mosaik-carousel-2 
    autoplay-interval="3000" 
    circular="true"
    show-indicators="true">
    <mosaik-carousel-item-2>Slide 1</mosaik-carousel-item-2>
    <mosaik-carousel-item-2>Slide 2</mosaik-carousel-item-2>
    <mosaik-carousel-item-2>Slide 3</mosaik-carousel-item-2>
</mosaik-carousel-2>
```

### Vertical carousel
```html
<mosaik-carousel-2 
    orientation="vertical" 
    num-visible="2"
    show-navigators="true">
    <mosaik-carousel-item-2>Content 1</mosaik-carousel-item-2>
    <mosaik-carousel-item-2>Content 2</mosaik-carousel-item-2>
    <mosaik-carousel-item-2>Content 3</mosaik-carousel-item-2>
</mosaik-carousel-2>
```

### With header and footer
```html
<mosaik-carousel-2 show-indicators="true">
    <h3 slot="header">Featured Products</h3>
    
    <mosaik-carousel-item-2>Product 1</mosaik-carousel-item-2>
    <mosaik-carousel-item-2>Product 2</mosaik-carousel-item-2>
    
    <div slot="footer">
        <a href="/all-products">View All</a>
    </div>
</mosaik-carousel-2>
```

## Properties

### page
- **Type**: `number`
- **Default**: `0`
- **Description**: Current active page index

### numVisible
- **Type**: `number`
- **Default**: `1`
- **Description**: Number of items to display per page

### numScroll
- **Type**: `number`
- **Default**: `1`
- **Description**: Number of items to scroll on navigation

### orientation
- **Type**: `Orientation` ('horizontal' | 'vertical')
- **Default**: `'horizontal'`
- **Description**: Carousel scroll direction

### circular
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Enable infinite loop mode

### showIndicators
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Show page indicator dots

### showNavigators
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Show previous/next navigation buttons

### autoplayInterval
- **Type**: `number`
- **Default**: `0`
- **Description**: Auto-advance interval in milliseconds (0 = disabled)

# mosaik-cell-group

CellGroup - A logical container component for organizing related cells into cohesive sections with optional headers.

**Mixins:** Themeable

## Examples

Basic cell group with slotted header:

```html
<mosaik-cell-group>
  <span slot="header">Account Settings</span>
  <mosaik-cell label="Profile Information"></mosaik-cell>
  <mosaik-cell label="Change Password"></mosaik-cell>
</mosaik-cell-group>
```

Settings group with cells and icons:

```html
<mosaik-cell-group>
  <span slot="header">Account Settings</span>
  <mosaik-cell label="Profile Information" is-navigation></mosaik-cell>
  <mosaik-cell label="Change Password" is-navigation></mosaik-cell>
</mosaik-cell-group>
```

Navigation menu group:

```html
<mosaik-cell-group>
  <span slot="header">Navigation</span>
  <mosaik-cell label="Dashboard" is-navigation></mosaik-cell>
  <mosaik-cell label="Analytics" is-navigation></mosaik-cell>
</mosaik-cell-group>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `header`       |           |           | `string`                                     | Gets or sets the `header` property.              |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default content area for cell components and related content |
| `header` | Header content area for group titles, descriptions, or section labels |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                                      |
|----------|--------------------------------------------------|
| `header` | Header section styling container for group titles |
| `root`   | Root container wrapping the entire cell group structure |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--cell-group-border-color`         | String | Border color for the group container             |
| `--cell-group-border-radius`        | String | Border radius for group container corner rounding |
| `--cell-group-border-style`         | String | Border line style (solid, dashed, dotted)        |
| `--cell-group-border-width`         | String | Border width for group container outline         |
| `--cell-group-font-family`          | String | Font family for header text                      |
| `--cell-group-font-letter-spacing`  | String | Letter spacing for header text                   |
| `--cell-group-font-line-height`     | String | Line height for header text                      |
| `--cell-group-font-size`            | String | Font size for header text                        |
| `--cell-group-font-text-decoration` | String | Text decoration for header text                  |
| `--cell-group-font-text-transform`  | String | Text transform for header text                   |
| `--cell-group-font-weight`          | String | Font weight for header text                      |
| `--cell-group-gap`                  | String | The group gap CSS custom property.               |
| `--cell-group-inline-end`           | String | Inline end offset for group positioning          |
| `--cell-group-inline-start`         | String | Inline start offset for group positioning        |
| `--cell-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--cell-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--cell-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--cell-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--cell-group-shadow`               | String | The group shadow CSS custom property.            |
| `--cell-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--cell-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--cell-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--cell-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--cell-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--cell-group-transition-duration`  | String | The group transition duration CSS custom property. |
| `--cell-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--cell-group-transition-property`  | String | The group transition property CSS custom property. |
| `--cell-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-cell

Cell - A flexible content container component optimized for structured data presentation in grids, lists, and tables.

**Mixins:** Themeable, Labelable, Disableable

## Examples

Basic cell with label:

```html
<mosaik-cell label="Dashboard"></mosaik-cell>
```

Contact list cell with slotted content:

```html
<mosaik-cell>
  <mosaik-avatar slot="start"></mosaik-avatar>
  <span slot="label">John Smith</span>
  <span slot="subLabel">john.smith@company.com</span>
  <mosaik-button slot="end" label="Call" appearance="plain"></mosaik-button>
</mosaik-cell>
```

Navigation cell with indicator:

```html
<mosaik-cell is-navigation label="Privacy &amp; Security"></mosaik-cell>
```

Disabled cell:

```html
<mosaik-cell disabled label="Unavailable Option"></mosaik-cell>
```

## Properties

| Property       | Attribute       | Modifiers | Type                                         | Description                                      |
|----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isNavigation` | `is-navigation` |           | `boolean`                                    | Gets or sets the `isNavigation` property.        |
| `label`        |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subLabel`     |                 |           | `string`                                     | Gets or sets the `subLabel` property.            |
| `themeName`    |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
| `end`      | Trailing content area for actions, status indicators, or secondary controls |
| `label`    | Primary content area for main text, titles, or primary information |
| `start`    | Leading content area for icons, avatars, thumbnails, or visual indicators |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `subLabel` | Secondary content area for descriptions, metadata, or supplementary text |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `label`    | Primary label content styling container          |
| `root`     | Root container wrapping the entire cell content and layout |
| `subLabel` | Secondary label content styling container        |
| `text`     | Text content wrapper for typography and text styling |

## CSS Custom Properties

| Property                          | Type   | Description                                  |
|-----------------------------------|--------|----------------------------------------------|
| `--cell-background-color`         | String | Background color of the cell container       |
| `--cell-font-family`              | String | Font family for primary cell text            |
| `--cell-font-letter-spacing`      | String | Letter spacing for primary cell text         |
| `--cell-font-line-height`         | String | Line height for primary cell text            |
| `--cell-font-size`                | String | Font size for primary cell text              |
| `--cell-font-text-decoration`     | String | Text decoration for primary cell text        |
| `--cell-font-text-transform`      | String | Text transform for primary cell text         |
| `--cell-font-weight`              | String | Font weight for primary cell text            |
| `--cell-gap`                      | String | Gap between cell content elements            |
| `--cell-padding-bottom`           | String | Bottom padding for cell content spacing      |
| `--cell-padding-left`             | String | Left padding for cell content spacing        |
| `--cell-padding-right`            | String | Right padding for cell content spacing       |
| `--cell-padding-top`              | String | Top padding for cell content spacing         |
| `--cell-shadow`                   | String | The shadow CSS custom property.              |
| `--cell-shadow-blur`              | String | The shadow blur CSS custom property.         |
| `--cell-shadow-color`             | String | The shadow color CSS custom property.        |
| `--cell-shadow-offset-x`          | String | The shadow offset x CSS custom property.     |
| `--cell-shadow-offset-y`          | String | The shadow offset y CSS custom property.     |
| `--cell-shadow-spread`            | String | The shadow spread CSS custom property.       |
| `--cell-sub-font-family`          | String | Font family for secondary cell text          |
| `--cell-sub-font-letter-spacing`  | String | Letter spacing for secondary cell text       |
| `--cell-sub-font-line-height`     | String | Line height for secondary cell text          |
| `--cell-sub-font-size`            | String | Font size for secondary cell text            |
| `--cell-sub-font-text-decoration` | String | Text decoration for secondary cell text      |
| `--cell-sub-font-text-transform`  | String | Text transform for secondary cell text       |
| `--cell-sub-font-weight`          | String | Font weight for secondary cell text          |
| `--cell-transition-duration`      | String | The transition duration CSS custom property. |
| `--cell-transition-mode`          | String | The transition mode CSS custom property.     |
| `--cell-transition-property`      | String | The transition property CSS custom property. |
| `--cell-translate`                | String | The translate CSS custom property.           |

# mosaik-chart

Chart - A comprehensive data visualization component powered by ApexCharts for creating interactive charts and graphs.

**Mixins:** Themeable, Variantable, Fitable, Dimensionable

## Examples

Basic bar chart using only HTML attributes:

```html
<mosaik-chart display="bar" is-x-axis-visible is-y-axis-visible></mosaik-chart>
```

Line chart with legend:

```html
<mosaik-chart
  display="line"
  is-legend-visible
  legend-position="bottom"
></mosaik-chart>
```

Pie chart with legend:

```html
<mosaik-chart
  display="pie"
  is-legend-visible
  legend-position="right"
></mosaik-chart>
```

Stacked area chart:

```html
<mosaik-chart
  display="area"
  stacked
  is-x-axis-visible
  is-y-axis-visible
></mosaik-chart>
```

Chart with fit sizing:

```html
<mosaik-chart
  display="line"
  fit="both"
></mosaik-chart>
```

## Properties

| Property          | Attribute           | Modifiers | Type                                            | Description                                      |
|-------------------|---------------------|-----------|-------------------------------------------------|--------------------------------------------------|
| `annotations`     |                     |           | `ApexAnnotations \| null \| undefined`          | Gets or sets the `annotations` property.         |
| `changed`         |                     | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`    | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `chart`           |                     |           | `ApexChart \| null \| undefined`                | Gets or sets the `chart` property.               |
| `colors`          |                     |           | `any[] \| null \| undefined`                    | Gets or sets the `colors` property.              |
| `connected`       |                     | readonly  | `IEventEmitter<void>`                           | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dataLabels`      |                     |           | `ApexDataLabels \| null \| undefined`           | Gets or sets the `dataLabels` property.          |
| `dir`             | `dir`               |           | `FlowDirection`                                 | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`    |                     | readonly  | `IEventEmitter<void>`                           | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `display`         | `display`           |           | `ChartDisplayType`                              | Gets or sets the `display` property.             |
| `fill`            |                     |           | `ApexFill \| null \| undefined`                 | Gets or sets the `fill` property.                |
| `fit`             | `fit`               |           | `Fit`                                           | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `grid`            |                     |           | `ApexGrid \| null \| undefined`                 | Gets or sets the `grid` property.                |
| `header`          |                     |           | `string`                                        | Gets or sets the `header` property.              |
| `height`          | `height`            |           | `CssLength`                                     | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `isLegendVisible` | `is-legend-visible` |           | `boolean`                                       | Gets or sets the `isLegendVisible` property.     |
| `isXAxisVisible`  | `is-x-axis-visible` |           | `boolean`                                       | Gets or sets the `isXAxisVisible` property.      |
| `isYAxisVisible`  | `is-y-axis-visible` |           | `boolean`                                       | Gets or sets the `isYAxisVisible` property.      |
| `labels`          |                     |           | `string[] \| null \| undefined`                 | Gets or sets the `labels` property.              |
| `lang`            | `lang`              |           | `string`                                        | The lang property indicates the language of the element's content. |
| `legend`          |                     |           | `ApexLegend \| null \| undefined`               | Gets or sets the `legend` property.              |
| `legendPosition`  | `legend-position`   |           | `ChartLegendPosition`                           | Gets or sets the `legendPosition` property.      |
| `markers`         |                     |           | `ApexMarkers \| null \| undefined`              | Gets or sets the `markers` property.             |
| `noData`          |                     |           | `ApexNoData \| null \| undefined`               | Gets or sets the `noData` property.              |
| `plotOptions`     |                     |           | `ApexPlotOptions \| null \| undefined`          | Gets or sets the `plotOptions` property.         |
| `responsive`      |                     |           | `ApexResponsive[] \| null \| undefined`         | Gets or sets the `responsive` property.          |
| `series`          |                     |           | `ApexNonAxisChartSeries \| null \| undefined`   | Gets or sets the `series` property.              |
| `stackType`       | `stack-type`        |           | `ChartStackType`                                | Gets or sets the `stackType` property.           |
| `stacked`         | `stacked`           |           | `boolean`                                       | Gets or sets the `stacked` property.             |
| `states`          |                     |           | `ApexStates \| null \| undefined`               | Gets or sets the `states` property.              |
| `stroke`          |                     |           | `ApexStroke \| null \| undefined`               | Gets or sets the `stroke` property.              |
| `subHeader`       |                     |           | `string`                                        | Gets or sets the `subHeader` property.           |
| `theme`           |                     |           | `ApexTheme \| null \| undefined`                | Gets or sets the `theme` property.               |
| `themeName`       |                     |           | `string`                                        | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tooltip`         |                     |           | `ApexTooltip \| null \| undefined`              | Gets or sets the `tooltip` property.             |
| `variant`         | `variant`           |           | `Variant`                                       | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `width`           | `width`             |           | `CssLength`                                     | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |
| `xAxis`           |                     |           | `ApexXAxis \| null \| undefined`                | Gets or sets the `xAxis` property.               |
| `yAxis`           |                     |           | `ApexYAxis \| ApexYAxis[] \| null \| undefined` | Gets or sets the `yAxis` property.               |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description                            |
|---------|----------------------------------------|
| `chart` | Main chart rendering container element |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--chart-background-color`     | String | Background color for the chart rendering area |
| `--chart-font-family`          | String | Font family for all chart text elements       |
| `--chart-font-letter-spacing`  | String | Letter spacing for chart text                 |
| `--chart-font-line-height`     | String | Line height for chart text elements           |
| `--chart-font-size`            | String | Font size for chart labels and text           |
| `--chart-font-text-decoration` | String | Text decoration style for chart labels        |
| `--chart-font-text-transform`  | String | Text transformation for chart labels          |
| `--chart-font-weight`          | String | Font weight for chart text                    |
| `--chart-foreground-color`     | String | Primary color for text and line elements      |
| `--chart-gap`                  | String | The gap CSS custom property.                  |
| `--chart-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--chart-padding-left`         | String | The padding left CSS custom property.         |
| `--chart-padding-right`        | String | The padding right CSS custom property.        |
| `--chart-padding-top`          | String | The padding top CSS custom property.          |
| `--chart-shadow`               | String | The shadow CSS custom property.               |
| `--chart-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--chart-shadow-color`         | String | The shadow color CSS custom property.         |
| `--chart-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--chart-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--chart-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--chart-transition-duration`  | String | The transition duration CSS custom property.  |
| `--chart-transition-mode`      | String | The transition mode CSS custom property.      |
| `--chart-transition-property`  | String | The transition property CSS custom property.  |
| `--chart-translate`            | String | The translate CSS custom property.            |

# mosaik-chat-header

Chat Header - The Chat Header is used to display the title and subtitle of a chat. Typically, it can also include additional actions or buttons.

**Mixins:** Themeable, TextFormattable

## Example

Basic chat header:

```html
<mosaik-chat-header></mosaik-chat-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subTitle`     |           |           | `string`                                     | Gets or sets the `subTitle` property.            |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `title`        |           |           | `string`                                     | Gets or sets the `title` property.               |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `after`  | The content placed at the end of the chat header. |
| `before` | The content placed at the beginning of the chat header. |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `toolbar` | The toolbar part. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--chat-header-font-family`          | String | The header font family CSS custom property.      |
| `--chat-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--chat-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--chat-header-font-size`            | String | The header font size CSS custom property.        |
| `--chat-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--chat-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--chat-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--chat-header-gap`                  | String | The header gap CSS custom property.              |
| `--chat-header-height`               | String | The header height CSS custom property.           |
| `--chat-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--chat-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--chat-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--chat-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--chat-header-shadow`               | String | The header shadow CSS custom property.           |
| `--chat-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--chat-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--chat-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--chat-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--chat-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--chat-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--chat-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--chat-header-transition-property`  | String | The header transition property CSS custom property. |
| `--chat-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-chat-input-attachment-list

Chat Input Attachment List - Represents the list of attachments in the chat input.

**Mixins:** Themeable, Variantable, Appearanceable, Disableable, Slottable

## Examples

Basic attachment list:

```html
<mosaik-chat-input-attachment-list></mosaik-chat-input-attachment-list>
```

Disabled attachment list:

```html
<mosaik-chat-input-attachment-list disabled></mosaik-chat-input-attachment-list>
```

## Properties

| Property            | Attribute    | Modifiers | Type                                          | Description                                      |
|---------------------|--------------|-----------|-----------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance` |           | `Appearance`                                  | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `attachmentAdded`   |              | readonly  | `IEventEmitter<IAttachmentAddEventDetail>`    | Called when an attachment is added.<br />Provides reference to `IEventDetail` as event detail. |
| `attachmentRemoved` |              | readonly  | `IEventEmitter<IAttachmentRemoveEventDetail>` | Called when an attachment is removed.<br />Provides reference to `IEventDetail` as event detail. |
| `changed`           |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`  | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |              | readonly  | `IEventEmitter<void>`                         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`        |           | `FlowDirection`                               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`   |           | `boolean`                                     | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |              | readonly  | `IEventEmitter<void>`                         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `files`             |              |           | `File[]`                                      | Gets or sets the `files` property.               |
| `lang`              | `lang`       |           | `string`                                      | The lang property indicates the language of the element's content. |
| `themeName`         |              |           | `string`                                      | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`           | `variant`    |           | `Variant`                                     | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `addAttachment`        | `(file: File): void`                             |                                                  |
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `removeAttachment`     | `(file: File): void`                             |                                                  |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `attachmentAdd`    | `AttachmentAddEvent`    | Called when an attachment is added.              |
| `attachmentRemove` | `AttachmentRemoveEvent` | Called when an attachment is removed.            |
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `attachment` | The attachment part. |
| `content`    | The content part.    |
| `label`      | The label part.      |
| `thumbnail`  | The thumbnail part.  |
| `type`       | The type part.       |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--chat-input-attachment-list-background-color`  | String | The input attachment list background color CSS custom property. |
| `--chat-input-attachment-list-border-color`      | String | The input attachment list border color CSS custom property. |
| `--chat-input-attachment-list-border-radius`     | String | The input attachment list border radius CSS custom property. |
| `--chat-input-attachment-list-border-style`      | String | The input attachment list border style CSS custom property. |
| `--chat-input-attachment-list-border-width`      | String | The input attachment list border width CSS custom property. |
| `--chat-input-attachment-list-font-family`       | String | The input attachment list font family CSS custom property. |
| `--chat-input-attachment-list-font-letter-spacing` | String | The input attachment list font letter spacing CSS custom property. |
| `--chat-input-attachment-list-font-line-height`  | String | The input attachment list font line height CSS custom property. |
| `--chat-input-attachment-list-font-size`         | String | The input attachment list font size CSS custom property. |
| `--chat-input-attachment-list-font-text-decoration` | String | The input attachment list font text decoration CSS custom property. |
| `--chat-input-attachment-list-font-text-transform` | String | The input attachment list font text transform CSS custom property. |
| `--chat-input-attachment-list-font-weight`       | String | The input attachment list font weight CSS custom property. |
| `--chat-input-attachment-list-foreground-color`  | String | The input attachment list foreground color CSS custom property. |
| `--chat-input-attachment-list-gap`               | String | The input attachment list gap CSS custom property. |
| `--chat-input-attachment-list-padding-bottom`    | String | The input attachment list padding bottom CSS custom property. |
| `--chat-input-attachment-list-padding-left`      | String | The input attachment list padding left CSS custom property. |
| `--chat-input-attachment-list-padding-right`     | String | The input attachment list padding right CSS custom property. |
| `--chat-input-attachment-list-padding-top`       | String | The input attachment list padding top CSS custom property. |
| `--chat-input-attachment-list-shadow`            | String | The input attachment list shadow CSS custom property. |
| `--chat-input-attachment-list-shadow-blur`       | String | The input attachment list shadow blur CSS custom property. |
| `--chat-input-attachment-list-shadow-color`      | String | The input attachment list shadow color CSS custom property. |
| `--chat-input-attachment-list-shadow-offset-x`   | String | The input attachment list shadow offset x CSS custom property. |
| `--chat-input-attachment-list-shadow-offset-y`   | String | The input attachment list shadow offset y CSS custom property. |
| `--chat-input-attachment-list-shadow-spread`     | String | The input attachment list shadow spread CSS custom property. |
| `--chat-input-attachment-list-transition-duration` | String | The input attachment list transition duration CSS custom property. |
| `--chat-input-attachment-list-transition-mode`   | String | The input attachment list transition mode CSS custom property. |
| `--chat-input-attachment-list-transition-property` | String | The input attachment list transition property CSS custom property. |
| `--chat-input-attachment-list-translate`         | String | The input attachment list translate CSS custom property. |

# mosaik-chat-input

Chat Input - Represents the input area for sending messages in the chat.

**Mixins:** Themeable, Variantable, Appearanceable, Disableable, Slottable

## Examples

Basic chat input:

```html
<mosaik-chat-input placeholder="Type a message..."></mosaik-chat-input>
```

Disabled chat input:

```html
<mosaik-chat-input placeholder="Unavailable" disabled></mosaik-chat-input>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                             | Description                                      |
|----------------|--------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                         | The lang property indicates the language of the element's content. |
| `placeholder`  |              |           | `string`                                         | Gets or sets the `placeholder` property.         |
| `submitted`    |              | readonly  | `IEventEmitter<IChatSubmitEventDetail<unknown>>` | Called when a new message is submitting.<br />Provides reference to `IChatSubmitEventDetail` as event detail. |
| `themeName`    |              |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        |              |           | `{ message: string; files: File[]; }`            | Gets or sets the `value` property.               |
| `variant`      | `variant`    |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `clear`                | `(): void`                                       |                                                  |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate`      | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `send`                 | `(message: string, files?: File[] \| FileList \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `chatSubmit`   | `ChatSubmitEvent`      | Called when a new message is submitted.          |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `tools` | The tools slot.                                  |

## CSS Shadow Parts

| Part          | Description           |
|---------------|-----------------------|
| `attachments` | The attachments part. |
| `begin`       | The begin part.       |
| `end`         | The end part.         |
| `focusRing`   | The focusRing part.   |
| `textBox`     | The textBox part.     |
| `tools`       | The tools part.       |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--chat-input-background-color`     | String | The input background color CSS custom property.  |
| `--chat-input-border-color`         | String | The input border color CSS custom property.      |
| `--chat-input-border-radius`        | String | The input border radius CSS custom property.     |
| `--chat-input-border-style`         | String | The input border style CSS custom property.      |
| `--chat-input-border-width`         | String | The input border width CSS custom property.      |
| `--chat-input-font-family`          | String | The input font family CSS custom property.       |
| `--chat-input-font-letter-spacing`  | String | The input font letter spacing CSS custom property. |
| `--chat-input-font-line-height`     | String | The input font line height CSS custom property.  |
| `--chat-input-font-size`            | String | The input font size CSS custom property.         |
| `--chat-input-font-text-decoration` | String | The input font text decoration CSS custom property. |
| `--chat-input-font-text-transform`  | String | The input font text transform CSS custom property. |
| `--chat-input-font-weight`          | String | The input font weight CSS custom property.       |
| `--chat-input-foreground-color`     | String | The input foreground color CSS custom property.  |
| `--chat-input-gap`                  | String | The input gap CSS custom property.               |
| `--chat-input-padding-bottom`       | String | The input padding bottom CSS custom property.    |
| `--chat-input-padding-left`         | String | The input padding left CSS custom property.      |
| `--chat-input-padding-right`        | String | The input padding right CSS custom property.     |
| `--chat-input-padding-top`          | String | The input padding top CSS custom property.       |
| `--chat-input-shadow`               | String | The input shadow CSS custom property.            |
| `--chat-input-shadow-blur`          | String | The input shadow blur CSS custom property.       |
| `--chat-input-shadow-color`         | String | The input shadow color CSS custom property.      |
| `--chat-input-shadow-offset-x`      | String | The input shadow offset x CSS custom property.   |
| `--chat-input-shadow-offset-y`      | String | The input shadow offset y CSS custom property.   |
| `--chat-input-shadow-spread`        | String | The input shadow spread CSS custom property.     |
| `--chat-input-transition-duration`  | String | The input transition duration CSS custom property. |
| `--chat-input-transition-mode`      | String | The input transition mode CSS custom property.   |
| `--chat-input-transition-property`  | String | The input transition property CSS custom property. |
| `--chat-input-translate`            | String | The input translate CSS custom property.         |

# mosaik-chat-marker

Chat Marker - Represents a marker within a chat message.

**Mixins:** Themeable, Variantable, Orientable, ContentAlignable, Stickable, TextFormattable, Appearanceable

## Examples

Basic chat marker:

```html
<mosaik-chat-marker></mosaik-chat-marker>
```

Chat marker with a variant:

```html
<mosaik-chat-marker variant="primary"></mosaik-chat-marker>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`                  |                                |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.                |
| `isSticky`                   | `is-sticky`                    |           | `boolean`                                    | The `isSticky` property indicates whether the element is sticky or not.<br />The default value is `false`, which means the element is not sticky. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `text`                       |                                |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `icon` | The icon part. |
| `text` | The text part. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--chat-marker-background-color`     | String | The marker background color CSS custom property. |
| `--chat-marker-border-color`         | String | The marker border color CSS custom property.     |
| `--chat-marker-border-radius`        | String | The marker border radius CSS custom property.    |
| `--chat-marker-border-style`         | String | The marker border style CSS custom property.     |
| `--chat-marker-border-width`         | String | The marker border width CSS custom property.     |
| `--chat-marker-font-family`          | String | The marker font family CSS custom property.      |
| `--chat-marker-font-letter-spacing`  | String | The marker font letter spacing CSS custom property. |
| `--chat-marker-font-line-height`     | String | The marker font line height CSS custom property. |
| `--chat-marker-font-size`            | String | The marker font size CSS custom property.        |
| `--chat-marker-font-text-decoration` | String | The marker font text decoration CSS custom property. |
| `--chat-marker-font-text-transform`  | String | The marker font text transform CSS custom property. |
| `--chat-marker-font-weight`          | String | The marker font weight CSS custom property.      |
| `--chat-marker-foreground-color`     | String | The marker foreground color CSS custom property. |
| `--chat-marker-gap`                  | String | The marker gap CSS custom property.              |
| `--chat-marker-padding-bottom`       | String | The marker padding bottom CSS custom property.   |
| `--chat-marker-padding-left`         | String | The marker padding left CSS custom property.     |
| `--chat-marker-padding-right`        | String | The marker padding right CSS custom property.    |
| `--chat-marker-padding-top`          | String | The marker padding top CSS custom property.      |
| `--chat-marker-shadow`               | String | The marker shadow CSS custom property.           |
| `--chat-marker-shadow-blur`          | String | The marker shadow blur CSS custom property.      |
| `--chat-marker-shadow-color`         | String | The marker shadow color CSS custom property.     |
| `--chat-marker-shadow-offset-x`      | String | The marker shadow offset x CSS custom property.  |
| `--chat-marker-shadow-offset-y`      | String | The marker shadow offset y CSS custom property.  |
| `--chat-marker-shadow-spread`        | String | The marker shadow spread CSS custom property.    |
| `--chat-marker-transition-duration`  | String | The marker transition duration CSS custom property. |
| `--chat-marker-transition-mode`      | String | The marker transition mode CSS custom property.  |
| `--chat-marker-transition-property`  | String | The marker transition property CSS custom property. |
| `--chat-marker-translate`            | String | The marker translate CSS custom property.        |

# mosaik-chat-message-avatar

Chat Message Avatar - Represents the avatar of a chat message.

**Mixins:** Themeable, Appearanceable, Variantable, Disableable

## Examples

Basic chat message avatar:

```html
<mosaik-chat-message-avatar></mosaik-chat-message-avatar>
```

Chat message avatar with a variant:

```html
<mosaik-chat-message-avatar variant="primary"></mosaik-chat-message-avatar>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |              |           | `string`                                     | Gets or sets the `icon` property.                |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `src`          |              |           | `string`                                     | Gets or sets the `src` property.                 |
| `text`         |              |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description      |
|----------|------------------|
| `avatar` | The avatar part. |

## CSS Custom Properties

| Property                                       | Type   | Description                                      |
|------------------------------------------------|--------|--------------------------------------------------|
| `--chat-message-avatar-background-color`       | String | The message avatar background color CSS custom property. |
| `--chat-message-avatar-badge-gap`              | String | The message avatar badge gap CSS custom property. |
| `--chat-message-avatar-badge-horizontal-align` | String | The message avatar badge horizontal align CSS custom property. |
| `--chat-message-avatar-badge-radius`           | String | The message avatar badge radius CSS custom property. |
| `--chat-message-avatar-badge-vertical-align`   | String | The message avatar badge vertical align CSS custom property. |
| `--chat-message-avatar-border-color`           | String | The message avatar border color CSS custom property. |
| `--chat-message-avatar-border-radius`          | String | The message avatar border radius CSS custom property. |
| `--chat-message-avatar-border-style`           | String | The message avatar border style CSS custom property. |
| `--chat-message-avatar-border-width`           | String | The message avatar border width CSS custom property. |
| `--chat-message-avatar-diameter`               | String | The message avatar diameter CSS custom property. |
| `--chat-message-avatar-font-family`            | String | The message avatar font family CSS custom property. |
| `--chat-message-avatar-font-letter-spacing`    | String | The message avatar font letter spacing CSS custom property. |
| `--chat-message-avatar-font-line-height`       | String | The message avatar font line height CSS custom property. |
| `--chat-message-avatar-font-size`              | String | The message avatar font size CSS custom property. |
| `--chat-message-avatar-font-text-decoration`   | String | The message avatar font text decoration CSS custom property. |
| `--chat-message-avatar-font-text-transform`    | String | The message avatar font text transform CSS custom property. |
| `--chat-message-avatar-font-weight`            | String | The message avatar font weight CSS custom property. |
| `--chat-message-avatar-foreground-color`       | String | The message avatar foreground color CSS custom property. |
| `--chat-message-avatar-gap`                    | String | The message avatar gap CSS custom property.      |
| `--chat-message-avatar-offset`                 | String | The message avatar offset CSS custom property.   |
| `--chat-message-avatar-padding-bottom`         | String | The message avatar padding bottom CSS custom property. |
| `--chat-message-avatar-padding-left`           | String | The message avatar padding left CSS custom property. |
| `--chat-message-avatar-padding-right`          | String | The message avatar padding right CSS custom property. |
| `--chat-message-avatar-padding-top`            | String | The message avatar padding top CSS custom property. |
| `--chat-message-avatar-shadow`                 | String | The message avatar shadow CSS custom property.   |
| `--chat-message-avatar-shadow-blur`            | String | The message avatar shadow blur CSS custom property. |
| `--chat-message-avatar-shadow-color`           | String | The message avatar shadow color CSS custom property. |
| `--chat-message-avatar-shadow-offset-x`        | String | The message avatar shadow offset x CSS custom property. |
| `--chat-message-avatar-shadow-offset-y`        | String | The message avatar shadow offset y CSS custom property. |
| `--chat-message-avatar-shadow-spread`          | String | The message avatar shadow spread CSS custom property. |
| `--chat-message-avatar-transition-duration`    | String | The message avatar transition duration CSS custom property. |
| `--chat-message-avatar-transition-mode`        | String | The message avatar transition mode CSS custom property. |
| `--chat-message-avatar-transition-property`    | String | The message avatar transition property CSS custom property. |
| `--chat-message-avatar-translate`              | String | The message avatar translate CSS custom property. |

# mosaik-chat-message-divider

Chat Message Divider - Represents a visual divider between chat messages.

**Mixins:** Themeable, Stickable

## Example

Basic chat message divider:

```html
<mosaik-chat-message-divider></mosaik-chat-message-divider>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isSticky`     | `is-sticky` |           | `boolean`                                    | The `isSticky` property indicates whether the element is sticky or not.<br />The default value is `false`, which means the element is not sticky. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |             |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`    |             |           | `number`                                     | Gets or sets the `thickness` property.           |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `divider` | The divider part. |
| `text`    | The text part.    |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--chat-message-divider-font-family`          | String | The message divider font family CSS custom property. |
| `--chat-message-divider-font-letter-spacing`  | String | The message divider font letter spacing CSS custom property. |
| `--chat-message-divider-font-line-height`     | String | The message divider font line height CSS custom property. |
| `--chat-message-divider-font-size`            | String | The message divider font size CSS custom property. |
| `--chat-message-divider-font-text-decoration` | String | The message divider font text decoration CSS custom property. |
| `--chat-message-divider-font-text-transform`  | String | The message divider font text transform CSS custom property. |
| `--chat-message-divider-font-weight`          | String | The message divider font weight CSS custom property. |
| `--chat-message-divider-foreground-color`     | String | The message divider foreground color CSS custom property. |
| `--chat-message-divider-gap`                  | String | The message divider gap CSS custom property.     |
| `--chat-message-divider-padding-bottom`       | String | The message divider padding bottom CSS custom property. |
| `--chat-message-divider-padding-left`         | String | The message divider padding left CSS custom property. |
| `--chat-message-divider-padding-right`        | String | The message divider padding right CSS custom property. |
| `--chat-message-divider-padding-top`          | String | The message divider padding top CSS custom property. |
| `--chat-message-divider-shadow`               | String | The message divider shadow CSS custom property.  |
| `--chat-message-divider-shadow-blur`          | String | The message divider shadow blur CSS custom property. |
| `--chat-message-divider-shadow-color`         | String | The message divider shadow color CSS custom property. |
| `--chat-message-divider-shadow-offset-x`      | String | The message divider shadow offset x CSS custom property. |
| `--chat-message-divider-shadow-offset-y`      | String | The message divider shadow offset y CSS custom property. |
| `--chat-message-divider-shadow-spread`        | String | The message divider shadow spread CSS custom property. |
| `--chat-message-divider-transition-duration`  | String | The message divider transition duration CSS custom property. |
| `--chat-message-divider-transition-mode`      | String | The message divider transition mode CSS custom property. |
| `--chat-message-divider-transition-property`  | String | The message divider transition property CSS custom property. |
| `--chat-message-divider-translate`            | String | The message divider translate CSS custom property. |

# mosaik-chat-message-reaction

Chat Message Reaction - Represents a single reaction to a chat message.

**Mixins:** Themeable, Disableable

## Examples

Basic chat message reaction:

```html
<mosaik-chat-message-reaction></mosaik-chat-message-reaction>
```

Disabled reaction:

```html
<mosaik-chat-message-reaction disabled></mosaik-chat-message-reaction>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `count`        |            |           | `number`                                     | Gets or sets the `count` property.               |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `emoji`        |            |           | `string`                                     | Gets or sets the `emoji` property.               |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description     |
|---------|-----------------|
| `count` | The count part. |
| `emoji` | The emoji part. |

## CSS Custom Properties

| Property                                       | Type   | Description                                      |
|------------------------------------------------|--------|--------------------------------------------------|
| `--chat-message-reaction-font-family`          | String | The message reaction font family CSS custom property. |
| `--chat-message-reaction-font-letter-spacing`  | String | The message reaction font letter spacing CSS custom property. |
| `--chat-message-reaction-font-line-height`     | String | The message reaction font line height CSS custom property. |
| `--chat-message-reaction-font-size`            | String | The message reaction font size CSS custom property. |
| `--chat-message-reaction-font-text-decoration` | String | The message reaction font text decoration CSS custom property. |
| `--chat-message-reaction-font-text-transform`  | String | The message reaction font text transform CSS custom property. |
| `--chat-message-reaction-font-weight`          | String | The message reaction font weight CSS custom property. |
| `--chat-message-reaction-foreground-color`     | String | The message reaction foreground color CSS custom property. |
| `--chat-message-reaction-gap`                  | String | The message reaction gap CSS custom property.    |
| `--chat-message-reaction-padding-bottom`       | String | The message reaction padding bottom CSS custom property. |
| `--chat-message-reaction-padding-left`         | String | The message reaction padding left CSS custom property. |
| `--chat-message-reaction-padding-right`        | String | The message reaction padding right CSS custom property. |
| `--chat-message-reaction-padding-top`          | String | The message reaction padding top CSS custom property. |
| `--chat-message-reaction-shadow`               | String | The message reaction shadow CSS custom property. |
| `--chat-message-reaction-shadow-blur`          | String | The message reaction shadow blur CSS custom property. |
| `--chat-message-reaction-shadow-color`         | String | The message reaction shadow color CSS custom property. |
| `--chat-message-reaction-shadow-offset-x`      | String | The message reaction shadow offset x CSS custom property. |
| `--chat-message-reaction-shadow-offset-y`      | String | The message reaction shadow offset y CSS custom property. |
| `--chat-message-reaction-shadow-spread`        | String | The message reaction shadow spread CSS custom property. |
| `--chat-message-reaction-transition-duration`  | String | The message reaction transition duration CSS custom property. |
| `--chat-message-reaction-transition-mode`      | String | The message reaction transition mode CSS custom property. |
| `--chat-message-reaction-transition-property`  | String | The message reaction transition property CSS custom property. |
| `--chat-message-reaction-translate`            | String | The message reaction translate CSS custom property. |

# mosaik-chat-message

Chat Message - Represents a single message in the chat.

**Mixins:** Themeable, Variantable, Appearanceable, Disableable, TextFormattable, Busyable, Valueable, Slottable

## Examples

Basic chat message:

```html
<mosaik-chat-message></mosaik-chat-message>
```

Reply message with a variant:

```html
<mosaik-chat-message reply variant="primary"></mosaik-chat-message>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `at`           |              |           | `string`                                     | Gets or sets the `at` property.                  |
| `attachments`  |              |           | `File[]`                                     | Gets or sets the `attachments` property.         |
| `author`       |              |           | `string`                                     | Gets or sets the `author` property.              |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `isBusy`       | `is-busy`    |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `reply`        | `reply`      |           | `boolean`                                    | Gets or sets the `reply` property.               |
| `text`         |              |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name         | Description                                      |
|--------------|--------------------------------------------------|
| `at`         | The slot for timestamp elements.                 |
| `attachment` | The slot for attachment elements.                |
| `author`     | The slot for author elements.                    |
| `avatar`     | The slot for avatar elements.                    |
| `reaction`   | The slot for reaction elements.                  |
| `style`      | Custom styles injection slot for shadow DOM styling escape hatch |
| `text`       | The slot for message elements.                   |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `at`        | The at part.        |
| `author`    | The author part.    |
| `busy`      | The busy part.      |
| `content`   | The content part.   |
| `dot`       | The dot part.       |
| `header`    | The header part.    |
| `message`   | The message part.   |
| `reactions` | The reactions part. |
| `root`      | The root part.      |
| `text`      | The text part.      |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--chat-message-background-color`     | String | The message background color CSS custom property. |
| `--chat-message-border-color`         | String | The message border color CSS custom property.    |
| `--chat-message-border-radius`        | String | The message border radius CSS custom property.   |
| `--chat-message-border-style`         | String | The message border style CSS custom property.    |
| `--chat-message-border-width`         | String | The message border width CSS custom property.    |
| `--chat-message-font-family`          | String | The message font family CSS custom property.     |
| `--chat-message-font-letter-spacing`  | String | The message font letter spacing CSS custom property. |
| `--chat-message-font-line-height`     | String | The message font line height CSS custom property. |
| `--chat-message-font-size`            | String | The message font size CSS custom property.       |
| `--chat-message-font-text-decoration` | String | The message font text decoration CSS custom property. |
| `--chat-message-font-text-transform`  | String | The message font text transform CSS custom property. |
| `--chat-message-font-weight`          | String | The message font weight CSS custom property.     |
| `--chat-message-foreground-color`     | String | The message foreground color CSS custom property. |
| `--chat-message-gap`                  | String | The message gap CSS custom property.             |
| `--chat-message-padding-bottom`       | String | The message padding bottom CSS custom property.  |
| `--chat-message-padding-left`         | String | The message padding left CSS custom property.    |
| `--chat-message-padding-right`        | String | The message padding right CSS custom property.   |
| `--chat-message-padding-top`          | String | The message padding top CSS custom property.     |
| `--chat-message-shadow`               | String | The message shadow CSS custom property.          |
| `--chat-message-shadow-blur`          | String | The message shadow blur CSS custom property.     |
| `--chat-message-shadow-color`         | String | The message shadow color CSS custom property.    |
| `--chat-message-shadow-offset-x`      | String | The message shadow offset x CSS custom property. |
| `--chat-message-shadow-offset-y`      | String | The message shadow offset y CSS custom property. |
| `--chat-message-shadow-spread`        | String | The message shadow spread CSS custom property.   |
| `--chat-message-transition-duration`  | String | The message transition duration CSS custom property. |
| `--chat-message-transition-mode`      | String | The message transition mode CSS custom property. |
| `--chat-message-transition-property`  | String | The message transition property CSS custom property. |
| `--chat-message-translate`            | String | The message translate CSS custom property.       |
| `--chat-message-white-space`          | String | The message white space CSS custom property.     |

# mosaik-chat

Chat - A user interface component for real-time messaging and communication.

**Mixins:** Themeable, Dimensionable, Appearanceable, Variantable, Slottable

## Examples

Basic chat:

```html
<mosaik-chat></mosaik-chat>
```

Chat with scroll-to-end enabled and a variant:

```html
<mosaik-chat variant="primary" scroll-to-end></mosaik-chat>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `begin`        |               |           | `ChatBegin`                                  | Gets or sets the `begin` property.               |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `height`       | `height`      |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `intl`         |               | readonly  | `ChatElementIntl`                            | Returns the `intl` property.                     |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `scrollToEnd`  | `scrollToEnd` |           | `boolean`                                    | Gets or sets the `scrollToEnd` property.<br />If `true`, in order to `begin` property, the chat will scroll to top or bottom of the chat messages. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `width`        | `width`       |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `empty`   | Slot for empty state content.                    |
| `header`  | Slot for chat header content.                    |
| `input`   | Slot for chat input element.                     |
| `message` | Slot for chat message elements.                  |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part              | Description               |
|-------------------|---------------------------|
| `empty`           | The empty part.           |
| `footer`          | The footer part.          |
| `messages`        | The messages part.        |
| `messagesWrapper` | The messagesWrapper part. |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--chat-background-color`     | String | The background color CSS custom property.     |
| `--chat-border-color`         | String | The border color CSS custom property.         |
| `--chat-border-radius`        | String | The border radius CSS custom property.        |
| `--chat-border-style`         | String | The border style CSS custom property.         |
| `--chat-border-width`         | String | The border width CSS custom property.         |
| `--chat-font-family`          | String | The font family CSS custom property.          |
| `--chat-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--chat-font-line-height`     | String | The font line height CSS custom property.     |
| `--chat-font-size`            | String | The font size CSS custom property.            |
| `--chat-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--chat-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--chat-font-weight`          | String | The font weight CSS custom property.          |
| `--chat-foreground-color`     | String | The foreground color CSS custom property.     |
| `--chat-gap`                  | String | The gap CSS custom property.                  |
| `--chat-line-thickness`       | String | The line thickness CSS custom property.       |
| `--chat-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--chat-padding-left`         | String | The padding left CSS custom property.         |
| `--chat-padding-right`        | String | The padding right CSS custom property.        |
| `--chat-padding-top`          | String | The padding top CSS custom property.          |
| `--chat-shadow`               | String | The shadow CSS custom property.               |
| `--chat-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--chat-shadow-color`         | String | The shadow color CSS custom property.         |
| `--chat-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--chat-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--chat-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--chat-transition-duration`  | String | The transition duration CSS custom property.  |
| `--chat-transition-mode`      | String | The transition mode CSS custom property.      |
| `--chat-transition-property`  | String | The transition property CSS custom property.  |
| `--chat-translate`            | String | The translate CSS custom property.            |

# CheckBoxGroupElement - Group of related checkboxes

## Description
The CheckBoxGroup component organizes multiple checkbox elements into a cohesive group with shared properties and validation. It manages the collective state of its child checkboxes, provides group-level labels and hints, supports inheritance of properties like disabled state, and handles validation at the group level.

## Element
- **Tag**: `mosaik-checkbox-group`
- **Category**: Inputs

## Slots
- **default** - The child checkbox elements

## CSS Parts
- `root` - The root container
- `label` - The group label
- `content` - The checkboxes container
- `hint` - The hint text container

## Examples

### Basic checkbox group
```html
<mosaik-checkbox-group label="Select your interests">
    <mosaik-checkbox label="Sports" value="sports"></mosaik-checkbox>
    <mosaik-checkbox label="Music" value="music"></mosaik-checkbox>
    <mosaik-checkbox label="Art" value="art"></mosaik-checkbox>
</mosaik-checkbox-group>
```

### With required validation
```html
<mosaik-checkbox-group label="Terms" required>
    <mosaik-checkbox label="I accept the terms" value="terms"></mosaik-checkbox>
    <mosaik-checkbox label="I accept the privacy policy" value="privacy"></mosaik-checkbox>
</mosaik-checkbox-group>
```

# CheckBoxElement - Binary selection control

## Description
The Checkbox component allows users to make binary choices (checked/unchecked) or multiple selections from a set of options. It supports various states including checked, unchecked, indeterminate, and disabled. Checkboxes are commonly used in forms, settings panels, and anywhere users need to make boolean choices or multiple selections.

## Element
- **Tag**: `mosaik-checkbox`
- **Category**: Inputs

## Slots
- `checkmark` - The checkmark indicator
- `label` - The label text

## CSS Parts
- `input` - The input element
- `focusRing` - The focus ring indicator
- `checkmark` - The checkmark container
- `label` - The label text container
- `hint` - The hint text container

## CSS Custom Properties
- `--check-box-font-family/size/line-height/weight/letter-spacing/text-decoration/text-transform` - Font properties
- `--check-box-padding-top/right/bottom/left` - Padding
- `--check-box-gap` - Gap between checkbox and label
- `--check-box-transition-duration/mode/property` - Transition properties
- `--check-box-foreground-color` - Text color
- `--check-box-background-color` - Background color
- `--check-box-border-color/width/radius/style` - Border properties
- `--check-box-shadow` - Shadow effect

## Dependencies
- `mosaik-checkmark` - Checkmark indicator
- `mosaik-text` - Label text

## Examples

### Basic checkbox
```html
<mosaik-checkbox label="Accept terms and conditions" value="accepted"></mosaik-checkbox>
```

### Checked by default
```html
<mosaik-checkbox label="Remember me" is-checked="true"></mosaik-checkbox>
```

### Indeterminate state
```html
<mosaik-checkbox label="Select all" is-indeterminate="true"></mosaik-checkbox>
```

### Disabled checkbox
```html
<mosaik-checkbox label="Not available" disabled></mosaik-checkbox>
```

# mosaik-checkbox-group

Checkbox Group - A container for grouping multiple checkboxes.

**Mixins:** Themeable, Invalidable, Valueable, Disableable, Orientable, Appearanceable, Variantable, Slottable

## Examples

Basic checkbox group:

```html
<mosaik-checkbox-group name="interests">
  <mosaik-checkbox label="Sports" value="sports"></mosaik-checkbox>
  <mosaik-checkbox label="Music" value="music"></mosaik-checkbox>
  <mosaik-checkbox label="Technology" value="technology" is-checked></mosaik-checkbox>
</mosaik-checkbox-group>
```

Horizontal checkbox group with variant:

```html
<mosaik-checkbox-group name="options" orientation="horizontal" variant="primary">
  <mosaik-checkbox label="Option A" value="a"></mosaik-checkbox>
  <mosaik-checkbox label="Option B" value="b"></mosaik-checkbox>
</mosaik-checkbox-group>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                             | Description                                      |
|----------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checkChanged` |               | readonly  | `IEventEmitter<IGroupChangedEventDetail<unknown>>` | Called when the selection in the group changes.<br />Provides reference to `IGroupChangedEventDetail` as event detail. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`      | `invalid`     |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `lang`         | `lang`        |           | `string`                                         | The lang property indicates the language of the element's content. |
| `name`         | `name`        |           | `string`                                         | Gets or sets the `name` property.                |
| `orientation`  | `orientation` |           | `Orientation`                                    | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `required`     | `required`    |           | `boolean`                                        | Gets or sets the `required` property.            |
| `themeName`    |               |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`       |           | `TType`                                          | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkAll`             | `(): void`                                       | Checks all checkboxes in the group.              |
| `checkValidity`        | `(): boolean`                                    | Returns whether a form will validate when it is submitted, without having to submit it. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the element to its initial state.         |
| `uncheckAll`           | `(): void`                                       | Unchecks all checkboxes in the group.            |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checkChanged` | `GroupChangedEvent`    | Called when the selection in the group changes.  |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--check-box-group-background-color`     | String | The box group background color CSS custom property. |
| `--check-box-group-border-color`         | String | The box group border color CSS custom property.  |
| `--check-box-group-border-radius`        | String | The box group border radius CSS custom property. |
| `--check-box-group-border-style`         | String | The box group border style CSS custom property.  |
| `--check-box-group-border-width`         | String | The box group border width CSS custom property.  |
| `--check-box-group-font-family`          | String | The box group font family CSS custom property.   |
| `--check-box-group-font-letter-spacing`  | String | The box group font letter spacing CSS custom property. |
| `--check-box-group-font-line-height`     | String | The box group font line height CSS custom property. |
| `--check-box-group-font-size`            | String | The box group font size CSS custom property.     |
| `--check-box-group-font-text-decoration` | String | The box group font text decoration CSS custom property. |
| `--check-box-group-font-text-transform`  | String | The box group font text transform CSS custom property. |
| `--check-box-group-font-weight`          | String | The box group font weight CSS custom property.   |
| `--check-box-group-foreground-color`     | String | The box group foreground color CSS custom property. |
| `--check-box-group-gap`                  | String | The box group gap CSS custom property.           |
| `--check-box-group-padding-bottom`       | String | The box group padding bottom CSS custom property. |
| `--check-box-group-padding-left`         | String | The box group padding left CSS custom property.  |
| `--check-box-group-padding-right`        | String | The box group padding right CSS custom property. |
| `--check-box-group-padding-top`          | String | The box group padding top CSS custom property.   |
| `--check-box-group-shadow`               | String | The box group shadow CSS custom property.        |
| `--check-box-group-shadow-blur`          | String | The box group shadow blur CSS custom property.   |
| `--check-box-group-shadow-color`         | String | The box group shadow color CSS custom property.  |
| `--check-box-group-shadow-offset-x`      | String | The box group shadow offset x CSS custom property. |
| `--check-box-group-shadow-offset-y`      | String | The box group shadow offset y CSS custom property. |
| `--check-box-group-shadow-spread`        | String | The box group shadow spread CSS custom property. |
| `--check-box-group-transition-duration`  | String | The box group transition duration CSS custom property. |
| `--check-box-group-transition-mode`      | String | The box group transition mode CSS custom property. |
| `--check-box-group-transition-property`  | String | The box group transition property CSS custom property. |
| `--check-box-group-translate`            | String | The box group translate CSS custom property.     |

# mosaik-checkbox

Checkbox - A control element that allows users to select or deselect an option.

**Mixins:** Themeable, Invalidable, Valueable, Variantable, Appearanceable, Disableable, Labelable, TextFormattable, Focusable

## Examples

Basic checkbox:

```html
<mosaik-checkbox label="Accept terms and conditions" value="accepted"></mosaik-checkbox>
```

Pre-checked checkbox:

```html
<mosaik-checkbox label="Subscribe to newsletter" is-checked></mosaik-checkbox>
```

Checkbox group composition:

```html
<mosaik-checkbox-group name="preferences">
  <mosaik-checkbox label="Email notifications" value="email"></mosaik-checkbox>
  <mosaik-checkbox label="SMS notifications" value="sms"></mosaik-checkbox>
  <mosaik-checkbox label="Push notifications" value="push"></mosaik-checkbox>
</mosaik-checkbox-group>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`       |                 | readonly  | `IEventEmitter<ICheckedEventDetail>`         | Called when the `isChecked` property is `true`.<br />Provides reference to the `ICheckedEventDetail` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`     |                 |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `indeterminate` |                 | readonly  | `IEventEmitter<IIndeterminateEventDetail>`   | Called when the `isChecked` property is `null`.<br />Provides reference to the `IIndeterminateEventDetail` as event argument. |
| `invalid`       | `invalid`       |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isChecked`     | `isChecked`     |           | `boolean \| null`                            | Indicates whether the `ToggableElement` is checked. |
| `isFocused`     | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isThreeState`  | `isThreeState`  |           | `boolean`                                    | The `isThreeState` property determines whether the `ToggableElement` supports two or three states.<br />`isChecked` property can be set to `null` as a third state when `isThreeState` is `true` |
| `label`         |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `labelPosition` | `labelPosition` |           | `LabelPosition`                              | Gets or sets the `labelPosition` property.       |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`          | `name`          |           | `string`                                     | Gets or sets the `name` property.<br />When used inside a CheckBoxGroup, inherits the group's name unless explicitly set. |
| `required`      | `required`      |           | `boolean`                                    | Gets or sets the `required` property.            |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `unchecked`     |                 | readonly  | `IEventEmitter<IUncheckedEventDetail>`       | Called when the `isChecked` property is `false`.<br />Provides reference to the `IUncheckedEventDetail` as event argument. |
| `value`         | `value`         |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `check`                 | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the element to its initial state.         |
| `toggle`                | `(): void`                                       | Toggles the element between checked and unchecked states. |
| `uncheck`               | `(): void`                                       |                                                  |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checked`       | `CheckedEvent`         | Dispatched when the element transitions to checked state (isChecked = true) |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `indeterminate` | `IndeterminateEvent`   | Dispatched when the element transitions to indeterminate state (isChecked = null, requires isThreeState = true) |
| `unchecked`     | `UncheckedEvent`       | Dispatched when the element transitions to unchecked state (isChecked = false) |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `checkmark` | The checkmark slot.                              |
| `label`     | The label slot.                                  |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description          |
|-------------|----------------------|
| `checkmark` | the checkmark part.  |
| `focusRing` | the focus ring part. |
| `input`     | the input part.      |
| `label`     | the label part.      |

## CSS Custom Properties

| Property                           | Type   | Description                                  |
|------------------------------------|--------|----------------------------------------------|
| `--check-box-background-color`     | Color  | The background color.                        |
| `--check-box-border-color`         | Color  | The border color.                            |
| `--check-box-border-radius`        | String | The border radius.                           |
| `--check-box-border-style`         | String | The border style.                            |
| `--check-box-border-width`         | String | The border width.                            |
| `--check-box-font-family`          | String | The font family.                             |
| `--check-box-font-letter-spacing`  | String | The font letter spacing.                     |
| `--check-box-font-line-height`     | String | The font line height.                        |
| `--check-box-font-size`            | String | The font size.                               |
| `--check-box-font-text-decoration` | String | The font text decoration.                    |
| `--check-box-font-text-transform`  | String | The font text transform.                     |
| `--check-box-font-weight`          | String | The font weight.                             |
| `--check-box-foreground-color`     | Color  | The foreground color.                        |
| `--check-box-gap`                  | String | The gap.                                     |
| `--check-box-padding-bottom`       | String | The padding bottom.                          |
| `--check-box-padding-left`         | String | The padding left.                            |
| `--check-box-padding-right`        | String | The padding right.                           |
| `--check-box-padding-top`          | String | The padding top.                             |
| `--check-box-shadow`               | String | The shadow.                                  |
| `--check-box-shadow-blur`          | String | The box shadow blur CSS custom property.     |
| `--check-box-shadow-color`         | String | The box shadow color CSS custom property.    |
| `--check-box-shadow-offset-x`      | String | The box shadow offset x CSS custom property. |
| `--check-box-shadow-offset-y`      | String | The box shadow offset y CSS custom property. |
| `--check-box-shadow-spread`        | String | The box shadow spread CSS custom property.   |
| `--check-box-transition-duration`  | String | The transition duration.                     |
| `--check-box-transition-mode`      | String | The transition mode.                         |
| `--check-box-transition-property`  | String | The transition property.                     |
| `--check-box-translate`            | String | The box translate CSS custom property.       |

# mosaik-checkmark

Checkmark - A visual indicator for selection states in checkboxes, radio buttons, and list items.

**Mixins:** Themeable, Disableable, Variantable, Appearanceable

## Examples

Basic checked checkmark:

```html
<mosaik-checkmark checked></mosaik-checkmark>
```

Indeterminate state (three-state - set checked to null via JavaScript):

```html
<mosaik-checkmark is-three-state></mosaik-checkmark>
```

Radio button style with dot:

```html
<mosaik-checkmark checked type="dot" variant="primary"></mosaik-checkmark>
```

Custom styled checkmark:

```html
<mosaik-checkmark
  checked
  appearance="solid"
  variant="success"
  type="checkmark">
</mosaik-checkmark>
```

Disabled checkmark:

```html
<mosaik-checkmark checked disabled></mosaik-checkmark>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`      | `checked`      |           | `boolean \| null`                            | Gets or sets the `checked` property.             |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isThreeState` | `isThreeState` |           | `boolean`                                    | Gets or sets the `isThreeState` property.        |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`         | `type`         |           | `CheckType \| null`                          | Gets or sets the `type` property.                |
| `variant`      | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                          |
|-------------|--------------------------------------|
| `checkmark` | The main checkmark indicator element |

## CSS Custom Properties

| Property                           | Type   | Description                               |
|------------------------------------|--------|-------------------------------------------|
| `--checkmark-background-color`     | String | Background color of the checkmark box     |
| `--checkmark-border-color`         | String | Border color of the checkmark outline     |
| `--checkmark-border-radius`        | String | Corner rounding radius                    |
| `--checkmark-border-style`         | String | Border line style                         |
| `--checkmark-border-width`         | String | Border thickness                          |
| `--checkmark-box-size`             | String | Size of the checkmark box                 |
| `--checkmark-font-family`          | String | Font family for symbol rendering          |
| `--checkmark-font-letter-spacing`  | String | Letter spacing for the checkmark symbol   |
| `--checkmark-font-line-height`     | String | Line height for the checkmark symbol      |
| `--checkmark-font-size`            | String | Font size for the checkmark symbol        |
| `--checkmark-font-text-decoration` | String | Text decoration style                     |
| `--checkmark-font-text-transform`  | String | Text transformation style                 |
| `--checkmark-font-weight`          | String | Font weight for the checkmark symbol      |
| `--checkmark-foreground-color`     | String | Color of the checkmark symbol             |
| `--checkmark-gap`                  | String | Internal spacing within the checkmark     |
| `--checkmark-height`               | String | Height of the checkmark element           |
| `--checkmark-padding-bottom`       | String | Bottom padding inside the checkmark       |
| `--checkmark-padding-left`         | String | Left padding inside the checkmark         |
| `--checkmark-padding-right`        | String | Right padding inside the checkmark        |
| `--checkmark-padding-top`          | String | Top padding inside the checkmark          |
| `--checkmark-shadow`               | String | Drop shadow or elevation effect           |
| `--checkmark-shadow-blur`          | String | The shadow blur CSS custom property.      |
| `--checkmark-shadow-color`         | String | The shadow color CSS custom property.     |
| `--checkmark-shadow-offset-x`      | String | The shadow offset x CSS custom property.  |
| `--checkmark-shadow-offset-y`      | String | The shadow offset y CSS custom property.  |
| `--checkmark-shadow-spread`        | String | The shadow spread CSS custom property.    |
| `--checkmark-thickness`            | String | Stroke thickness for the checkmark symbol |
| `--checkmark-transition-duration`  | String | Duration of state transitions             |
| `--checkmark-transition-mode`      | String | Timing function for transitions           |
| `--checkmark-transition-property`  | String | CSS properties to transition              |
| `--checkmark-translate`            | String | Transform translation value               |
| `--checkmark-width`                | String | Width of the checkmark element            |

# ChipBoxElement - Multi-value input with chip tokens

## Description
The ChipBox component provides an input field for entering multiple values displayed as removable chips/tokens. Features include dynamic chip creation on enter/delimiter, chip removal, visual chip styling, value array management, max chip limits, and custom chip templates.

## Element
- **Tag**: `mosaik-chipbox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the chips
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `prefix` - Prefix container
- `chips` - Chips container
- `chip` - Individual chip element
- `input` - The input field
- `suffix` - Suffix container

## Examples

### Basic chip input
```html
<mosaik-chipbox 
    label="Tags" 
    placeholder="Add tags...">
</mosaik-chipbox>
```

### With initial values
```html
<mosaik-chipbox 
    label="Interests" 
    value='["Sports", "Music", "Art"]'>
</mosaik-chipbox>
```

### With max limit
```html
<mosaik-chipbox 
    label="Select up to 5 items" 
    max="5">
</mosaik-chipbox>
```

### Email chip input
```html
<mosaik-chipbox 
    label="Recipients" 
    placeholder="Enter email addresses..." 
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
</mosaik-chipbox>
```

# mosaik-chip-group

Chip Group - A container for grouping multiple chips.

**Mixins:** Themeable, Sizeable, Invalidable, Valueable, Disableable, Appearanceable, Variantable, Slottable

## Examples

Single selection mode:

```html
<mosaik-chip-group selection-mode="single">
  <mosaik-chip value="option-1" is-checkable></mosaik-chip>
  <mosaik-chip value="option-2" is-checkable></mosaik-chip>
  <mosaik-chip value="option-3" is-checkable></mosaik-chip>
</mosaik-chip-group>
```

Multiple selection mode:

```html
<mosaik-chip-group selection-mode="multiple">
  <mosaik-chip value="tag-1" is-checkable></mosaik-chip>
  <mosaik-chip value="tag-2" is-checkable></mosaik-chip>
  <mosaik-chip value="tag-3" is-checkable></mosaik-chip>
</mosaik-chip-group>
```

## Properties

| Property        | Attribute        | Modifiers | Type                                             | Description                                      |
|-----------------|------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`     |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `chipChanged`   |                  | readonly  | `IEventEmitter<IGroupChangedEventDetail<unknown>>` | Called when the selection in the group changes.<br />Provides reference to `IGroupChangedEventDetail` as event detail. |
| `connected`     |                  | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`            |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`       |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                  | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`       | `invalid`        |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `lang`          | `lang`           |           | `string`                                         | The lang property indicates the language of the element's content. |
| `name`          | `name`           |           | `string`                                         | Gets or sets the `name` property.                |
| `required`      | `required`       |           | `boolean`                                        | Gets or sets the `required` property.            |
| `selectionMode` | `selection-mode` |           | `SelectionMode`                                  | Gets or sets the `selectionMode` property.<br />Controls whether single or multiple chips can be selected. |
| `size`          | `size`           |           | `Size`                                           | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`     |                  |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`         | `value`          |           | `TType`                                          | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`        |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `wrap`          | `wrap`           |           | `boolean`                                        | Gets or sets the `wrap` property.                |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Returns whether a form will validate when it is submitted, without having to submit it. |
| `deselectAll`          | `(): void`                                       | Deselects all chips in the group.                |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the element to its initial state.         |
| `selectAll`            | `(): void`                                       | Selects all chips in the group (only works in multiple selection mode). |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `chipChanged`  | `GroupChangedEvent`    | Called when the selection in the group changes.  |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for chip elements.                  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                 |
|--------|-----------------------------|
| `root` | The root container element. |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--chip-group-background-color`     | String | The group background color CSS custom property.  |
| `--chip-group-border-color`         | String | The group border color CSS custom property.      |
| `--chip-group-border-radius`        | String | The group border radius CSS custom property.     |
| `--chip-group-border-style`         | String | The group border style CSS custom property.      |
| `--chip-group-border-width`         | String | The group border width CSS custom property.      |
| `--chip-group-font-family`          | String | The group font family CSS custom property.       |
| `--chip-group-font-letter-spacing`  | String | The group font letter spacing CSS custom property. |
| `--chip-group-font-line-height`     | String | The group font line height CSS custom property.  |
| `--chip-group-font-size`            | String | The group font size CSS custom property.         |
| `--chip-group-font-text-decoration` | String | The group font text decoration CSS custom property. |
| `--chip-group-font-text-transform`  | String | The group font text transform CSS custom property. |
| `--chip-group-font-weight`          | String | The group font weight CSS custom property.       |
| `--chip-group-foreground-color`     | String | The group foreground color CSS custom property.  |
| `--chip-group-gap`                  | String | The group gap CSS custom property.               |
| `--chip-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--chip-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--chip-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--chip-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--chip-group-shadow`               | String | The group shadow CSS custom property.            |
| `--chip-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--chip-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--chip-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--chip-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--chip-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--chip-group-transition-duration`  | String | The group transition duration CSS custom property. |
| `--chip-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--chip-group-transition-property`  | String | The group transition property CSS custom property. |
| `--chip-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-chip

Chip - A compact element representing information, a tag, or a selection.

**Mixins:** Themeable, Rippleable, Closeable, Variantable, Appearanceable, Checkable, Disableable, Sizeable, Focusable, Labelable, Slottable, Valueable

## Examples

Basic chip (set display label via the `label` JavaScript property):

```html
<mosaik-chip value="tag-1"></mosaik-chip>
```

Checkable chip with a value:

```html
<mosaik-chip is-checkable value="option-a"></mosaik-chip>
```

Pre-checked chip with variant and appearance:

```html
<mosaik-chip is-checkable is-checked variant="primary" appearance="soft" value="selected"></mosaik-chip>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`      |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `closeable`    | `closeable`   |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`       |               |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |               |           | `string`                                     | Gets or sets the `icon` property.                |
| `isCheckable`  | `isCheckable` |           | `boolean`                                    | Gets or sets the `isCheckable` property.         |
| `isChecked`    | `is-checked`  |           | `boolean`                                    | Gets or sets the `isChecked` property.<br />The default value is `false`, which means the element is not checked. |
| `isFocused`    | `is-focused`  |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`        |               |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`       | `ripple`      |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`         | `size`        |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`      |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property changes (either direction).<br />Provides reference to the `IEventDetail` as event argument. |
| `unchecked`    |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `value`        | `value`       |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `check`                 | `(): void`                                       | Checks the element.                              |
| `close`                 | `(): Promise<boolean>`                           | Removes the element from the DOM.                |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`                | `(): void`                                       |                                                  |
| `uncheck`               | `(): void`                                       | Unchecks the element.                            |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checked`      | `CheckedEvent`         | Dispatched when the chip is checked.             |
| `closed`       | `ClosedEvent`          | Dispatched when the chip is closed.              |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `toggled`      | `ToggledEvent`         | Dispatched when the chip is toggled, regardless of the new state. |
| `unchecked`    | `UncheckedEvent`       | Dispatched when the chip is unchecked.           |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `checkmark` | The checkmark slot.                              |
| `close`     | The close button slot.                           |
| `icon`      | The icon slot.                                   |
| `label`     | The label slot.                                  |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                  | Description                                      |
|-----------------------|--------------------------------------------------|
| `checkmark`           | The checkmark element shown when checked.        |
| `checkmark-container` | The container for the checkmark with slide-in animation. |
| `close`               | The close button element.                        |
| `focusRing`           | The focus ring element.                          |
| `icon`                | The icon element.                                |
| `label`               | The label text element.                          |
| `ripple`              | The ripple effect element.                       |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--chip-background-color`          | String | The background color CSS custom property.        |
| `--chip-border-color`              | String | The border color CSS custom property.            |
| `--chip-border-radius`             | String | The border radius CSS custom property.           |
| `--chip-border-style`              | String | The border style CSS custom property.            |
| `--chip-border-width`              | String | The border width CSS custom property.            |
| `--chip-focus-ring-active-width`   | String | The focus ring active width CSS custom property. |
| `--chip-focus-ring-color`          | String | The focus ring color CSS custom property.        |
| `--chip-focus-ring-inward-offset`  | String | The focus ring inward offset CSS custom property. |
| `--chip-focus-ring-outward-offset` | String | The focus ring outward offset CSS custom property. |
| `--chip-font-family`               | String | The font family CSS custom property.             |
| `--chip-font-letter-spacing`       | String | The font letter spacing CSS custom property.     |
| `--chip-font-line-height`          | String | The font line height CSS custom property.        |
| `--chip-font-size`                 | String | The font size CSS custom property.               |
| `--chip-font-text-decoration`      | String | The font text decoration CSS custom property.    |
| `--chip-font-text-transform`       | String | The font text transform CSS custom property.     |
| `--chip-font-weight`               | String | The font weight CSS custom property.             |
| `--chip-foreground-color`          | String | The foreground color CSS custom property.        |
| `--chip-gap`                       | String | The gap CSS custom property.                     |
| `--chip-height`                    | String | The height CSS custom property.                  |
| `--chip-padding-bottom`            | String | The padding bottom CSS custom property.          |
| `--chip-padding-left`              | String | The padding left CSS custom property.            |
| `--chip-padding-right`             | String | The padding right CSS custom property.           |
| `--chip-padding-top`               | String | The padding top CSS custom property.             |
| `--chip-ripple-color`              | Color  | The ripple color CSS custom property.            |
| `--chip-ripple-duration`           | String | The ripple duration CSS custom property.         |
| `--chip-shadow`                    | String | The shadow CSS custom property.                  |
| `--chip-shadow-blur`               | String | The shadow blur CSS custom property.             |
| `--chip-shadow-color`              | String | The shadow color CSS custom property.            |
| `--chip-shadow-offset-x`           | String | The shadow offset x CSS custom property.         |
| `--chip-shadow-offset-y`           | String | The shadow offset y CSS custom property.         |
| `--chip-shadow-spread`             | String | The shadow spread CSS custom property.           |
| `--chip-transition-duration`       | String | The transition duration CSS custom property.     |
| `--chip-transition-mode`           | String | The transition mode CSS custom property.         |
| `--chip-transition-property`       | String | The transition property CSS custom property.     |
| `--chip-translate`                 | String | The translate CSS custom property.               |

# mosaik-chipbox

Chip Box - A multi-selection input control for creating and managing collections of chip elements.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Invalidable, Variantable, Appearanceable, Labelable, Focusable

## Examples

Basic chip box with label and placeholder:

```html
<mosaik-chipbox
  label="Skills"
  placeholder="Add a skill...">
</mosaik-chipbox>
```

Chip box pre-populated with chips:

```html
<mosaik-chipbox
  label="Tags"
  chips="JavaScript TypeScript React">
</mosaik-chipbox>
```

Chip box with clearable option and variant styling:

```html
<mosaik-chipbox
  label="Selected items"
  placeholder="Add item..."
  is-clearable
  variant="primary">
</mosaik-chipbox>
```

## Properties

| Property                 | Attribute                | Modifiers | Type                                         | Description                                      |
|--------------------------|--------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`             | `appearance`             |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`           | `autocomplete`           |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`              |                          |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `changed`                |                          | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `chipAdded`              |                          | readonly  | `IEventEmitter<{ chip: unknown; }>`          | Called when a chip is added.<br />Provides reference to `{chip:unknown}` as event argument. |
| `chipRemoved`            |                          | readonly  | `IEventEmitter<{ chip: unknown; }>`          | Called when a chip is removed.<br />Provides reference to `{chip: unknown}` as event argument. |
| `chips`                  | `chips`                  |           | `unknown[]`                                  | Gets or sets the `chips` property.               |
| `cleared`                |                          |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`              |                          | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                    | `dir`                    |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`               | `disabled`               |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`           |                          | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`              |                          |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`                | `invalid`                |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`            | `is-clearable`           |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isEditable`             | `isEditable`             |           | `boolean`                                    | Gets or sets the `isEditable` property.          |
| `isFocused`              | `is-focused`             |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`                  |                          |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                   | `lang`                   |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`                   | `name`                   |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`                 |                          |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `pattern`                | `pattern`                |           | `string`                                     | Gets or sets the `pattern` property.             |
| `placeholder`            | `placeholder`            |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `pressBackspaceToRemove` | `pressBackspaceToRemove` |           | `boolean`                                    | Gets or sets the `pressBackspaceToRemove` property. |
| `readonly`               | `readonly`               |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`               | `required`               |           | `boolean`                                    | Gets or sets the `required` property.            |
| `separatorKeys`          | `separatorKeys`          |           | `number[]`                                   | Gets or sets the `separatorKeys` property.       |
| `state`                  | `state`                  |           | `InputState`                                 | Gets or sets the `state` property.               |
| `themeName`              |                          |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `transform`              | `transform`              |           | `ChipTransformFn \| null`                    | Gets or sets the `transform` property.           |
| `value`                  | `value`                  |           | `string`                                     | Gets or sets the `value` property.               |
| `variant`                | `variant`                |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `add`                   | `(chip: unknown): void`                          |                                                  |
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `delete`                | `(chip: unknown): void`                          |                                                  |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       |                                                  |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `chipAdded`    | `ChipAddedEvent`       | Fired when a chip is added.                      |
| `chipRemoved`  | `ChipRemovedEvent`     | Fired when a chip is removed.                    |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the chip collection.       |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the chip collection.        |

## CSS Shadow Parts

| Part        | Description                                |
|-------------|--------------------------------------------|
| `chip`      | Individual chip elements.                  |
| `clear`     | The clear part.                            |
| `focusRing` | The focus ring indicator.                  |
| `inner`     | The inner container wrapper.               |
| `input`     | The text input field for adding new chips. |
| `label`     | The floating label element.                |
| `prefix`    | The prefix content container.              |
| `suffix`    | The suffix content container.              |
| `wrapper`   | The wrapper containing chips and input.    |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--chip-box-background-color`          | Color  | The background color.                            |
| `--chip-box-border-color`              | Color  | The border color.                                |
| `--chip-box-border-radius`             | String | The border radius.                               |
| `--chip-box-border-style`              | String | The border style.                                |
| `--chip-box-border-width`              | String | The border width.                                |
| `--chip-box-focus-ring-outward-offset` | String | The box focus ring outward offset CSS custom property. |
| `--chip-box-focus-ring-width`          | String | The box focus ring width CSS custom property.    |
| `--chip-box-font-family`               | String | The box font family CSS custom property.         |
| `--chip-box-font-letter-spacing`       | String | The box font letter spacing CSS custom property. |
| `--chip-box-font-line-height`          | String | The box font line height CSS custom property.    |
| `--chip-box-font-size`                 | String | The box font size CSS custom property.           |
| `--chip-box-font-text-decoration`      | String | The box font text decoration CSS custom property. |
| `--chip-box-font-text-transform`       | String | The box font text transform CSS custom property. |
| `--chip-box-font-weight`               | String | The box font weight CSS custom property.         |
| `--chip-box-foreground-color`          | Color  | The foreground color.                            |
| `--chip-box-gap`                       | String | The gap between elements.                        |
| `--chip-box-height`                    | String | The height.                                      |
| `--chip-box-padding-bottom`            | String | The padding bottom.                              |
| `--chip-box-padding-left`              | String | The padding left.                                |
| `--chip-box-padding-right`             | String | The padding right.                               |
| `--chip-box-padding-top`               | String | The padding top.                                 |
| `--chip-box-prefix-icon-size`          | String | The box prefix icon size CSS custom property.    |
| `--chip-box-shadow`                    | String | The shadow.                                      |
| `--chip-box-shadow-blur`               | String | The box shadow blur CSS custom property.         |
| `--chip-box-shadow-color`              | String | The box shadow color CSS custom property.        |
| `--chip-box-shadow-offset-x`           | String | The box shadow offset x CSS custom property.     |
| `--chip-box-shadow-offset-y`           | String | The box shadow offset y CSS custom property.     |
| `--chip-box-shadow-spread`             | String | The box shadow spread CSS custom property.       |
| `--chip-box-suffix-icon-size`          | String | The box suffix icon size CSS custom property.    |
| `--chip-box-transition-duration`       | String | The box transition duration CSS custom property. |
| `--chip-box-transition-mode`           | String | The box transition mode CSS custom property.     |
| `--chip-box-transition-property`       | String | The box transition property CSS custom property. |
| `--chip-box-translate`                 | String | The box translate CSS custom property.           |

# mosaik-choice-group-header

Choice Group Header - A semantic heading element for grouping related choice items.

**Mixins:** Themeable

## Examples

Basic choice group header:

```html
<mosaik-choice-group-header>
  Notification Preferences
</mosaik-choice-group-header>
```

Header within a choice group:

```html
<mosaik-choice-group name="plan">
  <mosaik-choice-group-header>
    Select your plan
  </mosaik-choice-group-header>
  <mosaik-radio name="plan" value="basic" label="Basic"></mosaik-radio>
  <mosaik-radio name="plan" value="premium" label="Premium"></mosaik-radio>
</mosaik-choice-group>
```

Custom styled header:

```html
<mosaik-choice-group-header>
  <strong>Required Settings</strong> <em>(choose one)</em>
</mosaik-choice-group-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for header content (text, icons, or custom markup) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--choice-group-header-background-color`     | String | The background color of the header               |
| `--choice-group-header-border-color`         | String | The border color                                 |
| `--choice-group-header-border-radius`        | String | The corner rounding radius                       |
| `--choice-group-header-border-style`         | String | The border line style                            |
| `--choice-group-header-border-width`         | String | The border thickness                             |
| `--choice-group-header-font-family`          | String | The group header font family CSS custom property. |
| `--choice-group-header-font-letter-spacing`  | String | The group header font letter spacing CSS custom property. |
| `--choice-group-header-font-line-height`     | String | The group header font line height CSS custom property. |
| `--choice-group-header-font-size`            | String | The group header font size CSS custom property.  |
| `--choice-group-header-font-text-decoration` | String | The group header font text decoration CSS custom property. |
| `--choice-group-header-font-text-transform`  | String | The group header font text transform CSS custom property. |
| `--choice-group-header-font-weight`          | String | The group header font weight CSS custom property. |
| `--choice-group-header-foreground-color`     | String | The text color of the header                     |
| `--choice-group-header-gap`                  | String | The group header gap CSS custom property.        |
| `--choice-group-header-padding-bottom`       | String | The group header padding bottom CSS custom property. |
| `--choice-group-header-padding-left`         | String | The group header padding left CSS custom property. |
| `--choice-group-header-padding-right`        | String | The group header padding right CSS custom property. |
| `--choice-group-header-padding-top`          | String | The group header padding top CSS custom property. |
| `--choice-group-header-shadow`               | String | The drop shadow or elevation effect              |
| `--choice-group-header-shadow-blur`          | String | The group header shadow blur CSS custom property. |
| `--choice-group-header-shadow-color`         | String | The group header shadow color CSS custom property. |
| `--choice-group-header-shadow-offset-x`      | String | The group header shadow offset x CSS custom property. |
| `--choice-group-header-shadow-offset-y`      | String | The group header shadow offset y CSS custom property. |
| `--choice-group-header-shadow-spread`        | String | The group header shadow spread CSS custom property. |
| `--choice-group-header-transition-duration`  | String | The group header transition duration CSS custom property. |
| `--choice-group-header-transition-mode`      | String | The group header transition mode CSS custom property. |
| `--choice-group-header-transition-property`  | String | The group header transition property CSS custom property. |
| `--choice-group-header-translate`            | String | The group header translate CSS custom property.  |

# mosaik-choice-group

Choice Group - A container for grouping multiple choices, such as radio buttons or checkboxes.

**Mixins:** Themeable, Orientable, Invalidable, Valueable, Disableable, Appearanceable, Variantable, Slottable

## Examples

Basic choice group:

```html
<mosaik-choice-group name="plan">
  <mosaik-choice label="Basic" value="basic"></mosaik-choice>
  <mosaik-choice label="Professional" value="pro"></mosaik-choice>
  <mosaik-choice label="Enterprise" value="enterprise"></mosaik-choice>
</mosaik-choice-group>
```

Choice group with header, variant, and horizontal layout:

```html
<mosaik-choice-group name="size" orientation="horizontal" variant="primary">
  <mosaik-choice-group-header>Select size</mosaik-choice-group-header>
  <mosaik-choice label="Small" value="s"></mosaik-choice>
  <mosaik-choice label="Medium" value="m"></mosaik-choice>
  <mosaik-choice label="Large" value="l"></mosaik-choice>
</mosaik-choice-group>
```

## Properties

| Property        | Attribute     | Modifiers | Type                                             | Description                                      |
|-----------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`  |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `choiceChanged` |               | readonly  | `IEventEmitter<IGroupChangedEventDetail<unknown>>` | Called when the value of the `ChoiceGroupElement` changes.<br />Provides reference to `IEventDetail` as event detail. |
| `connected`     |               | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`         |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`    |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |               | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`       | `invalid`     |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `lang`          | `lang`        |           | `string`                                         | The lang property indicates the language of the element's content. |
| `name`          | `name`        |           | `string`                                         | Gets or sets the `name` property.                |
| `orientation`   | `orientation` |           | `Orientation`                                    | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `required`      | `required`    |           | `boolean`                                        | Gets or sets the `required` property.            |
| `themeName`     |               |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`         | `value`       |           | `TType`                                          | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`     |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Returns whether a form will validate when it is submitted, without having to submit it. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the element to its initial state.         |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `choiceChanged` | `GroupChangedEvent`    | Called when the value of the `ChoiceGroupElement` changes. |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot.                                |
| `error`  | The error slot.                                  |
| `header` | The header slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `root` | The root part. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--choice-group-background-color`     | String | The group background color CSS custom property.  |
| `--choice-group-border-color`         | String | The group border color CSS custom property.      |
| `--choice-group-border-radius`        | String | The group border radius CSS custom property.     |
| `--choice-group-border-style`         | String | The group border style CSS custom property.      |
| `--choice-group-border-width`         | String | The group border width CSS custom property.      |
| `--choice-group-font-family`          | String | The group font family CSS custom property.       |
| `--choice-group-font-letter-spacing`  | String | The group font letter spacing CSS custom property. |
| `--choice-group-font-line-height`     | String | The group font line height CSS custom property.  |
| `--choice-group-font-size`            | String | The group font size CSS custom property.         |
| `--choice-group-font-text-decoration` | String | The group font text decoration CSS custom property. |
| `--choice-group-font-text-transform`  | String | The group font text transform CSS custom property. |
| `--choice-group-font-weight`          | String | The group font weight CSS custom property.       |
| `--choice-group-foreground-color`     | String | The group foreground color CSS custom property.  |
| `--choice-group-gap`                  | String | The group gap CSS custom property.               |
| `--choice-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--choice-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--choice-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--choice-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--choice-group-shadow`               | String | The group shadow CSS custom property.            |
| `--choice-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--choice-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--choice-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--choice-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--choice-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--choice-group-transition-duration`  | String | The group transition duration CSS custom property. |
| `--choice-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--choice-group-transition-property`  | String | The group transition property CSS custom property. |
| `--choice-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-choice

Choice - An option within a group of choices.

**Mixins:** Themeable, Rippleable, Invalidable, Valueable, Disableable, Appearanceable, Variantable, Labelable, TextFormattable, Focusable

## Examples

Basic choice option with label and value:

```html
<mosaik-choice label="Premium Plan" value="premium"></mosaik-choice>
```

Choice with additional description:

```html
<mosaik-choice
  label="Professional"
  value="pro"
  additional="Full access to all features">
</mosaik-choice>
```

Choice group composition:

```html
<mosaik-choice-group name="plan">
  <mosaik-choice label="Basic" value="basic" additional="Free tier"></mosaik-choice>
  <mosaik-choice label="Professional" value="pro" additional="$9/month"></mosaik-choice>
  <mosaik-choice label="Enterprise" value="enterprise" additional="Contact sales"></mosaik-choice>
</mosaik-choice-group>
```

## Properties

| Property        | Attribute      | Modifiers | Type                                         | Description                                      |
|-----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `additional`    | `additional`   |           | `string`                                     | Gets or sets the `additional` property.          |
| `appearance`    | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`       |                | readonly  | `IEventEmitter<ICheckedEventDetail>`         | Called when the `isChecked` property is `true`.<br />Provides reference to the `ICheckedEventDetail` as event argument. |
| `connected`     |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`          |           | `FlowDirection`                              | Gets or sets the `dir` property.<br />When used inside a ChoiceGroup, inherits the group's dir unless explicitly set. |
| `disabled`      | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`     |                |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `icon`          | `icon`         |           | `string`                                     | Gets or sets the `icon` property.                |
| `iconPosition`  | `iconPosition` |           | `IconPosition`                               | Gets or sets the `iconPosition` property.        |
| `indeterminate` |                | readonly  | `IEventEmitter<IIndeterminateEventDetail>`   | Called when the `isChecked` property is `null`.<br />Provides reference to the `IIndeterminateEventDetail` as event argument. |
| `invalid`       | `invalid`      |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isChecked`     | `isChecked`    |           | `boolean \| null`                            | Indicates whether the `ToggableElement` is checked. |
| `isFocused`     | `is-focused`   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isThreeState`  | `isThreeState` |           | `boolean`                                    | The `isThreeState` property determines whether the `ToggableElement` supports two or three states.<br />`isChecked` property can be set to `null` as a third state when `isThreeState` is `true` |
| `label`         |                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`          | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`          | `name`         |           | `string`                                     | Gets or sets the `name` property.<br />When used inside a ChoiceGroup, inherits the group's name unless explicitly set. |
| `required`      | `required`     |           | `boolean`                                    | Gets or sets the `required` property.            |
| `ripple`        | `ripple`       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `themeName`     |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `unchecked`     |                | readonly  | `IEventEmitter<IUncheckedEventDetail>`       | Called when the `isChecked` property is `false`.<br />Provides reference to the `IUncheckedEventDetail` as event argument. |
| `value`         | `value`        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `check`                 | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `toggle`                | `(): void`                                       |                                                  |
| `uncheck`               | `(): void`                                       |                                                  |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checked`       | `CheckedEvent`         | Dispatched when the element transitions to checked state (isChecked = true) |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `indeterminate` | `IndeterminateEvent`   | Dispatched when the element transitions to indeterminate state (isChecked = null, requires isThreeState = true) |
| `unchecked`     | `UncheckedEvent`       | Dispatched when the element transitions to unchecked state (isChecked = false) |

## Slots

| Name         | Description                                      |
|--------------|--------------------------------------------------|
| `additional` | The additional slot.                             |
| `checkmark`  | The checkmark slot.                              |
| `label`      | The label slot.                                  |
| `style`      | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `additional` | The additional part. |
| `focusRing`  | The focusRing part.  |
| `input`      | The input part.      |
| `label`      | The label part.      |
| `ripple`     | The ripple part.     |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--choice-background-color`          | String | The background color CSS custom property.        |
| `--choice-border-color`              | String | The border color CSS custom property.            |
| `--choice-border-radius`             | String | The border radius CSS custom property.           |
| `--choice-border-style`              | String | The border style CSS custom property.            |
| `--choice-border-width`              | String | The border width CSS custom property.            |
| `--choice-checkmark-border-radius`   | String | The checkmark border radius CSS custom property. |
| `--choice-focus-ring-border-radius`  | String | The focus ring border radius CSS custom property. |
| `--choice-focus-ring-color`          | String | The focus ring color CSS custom property.        |
| `--choice-focus-ring-outward-offset` | String | The focus ring outward offset CSS custom property. |
| `--choice-font-family`               | String | The font family CSS custom property.             |
| `--choice-font-letter-spacing`       | String | The font letter spacing CSS custom property.     |
| `--choice-font-line-height`          | String | The font line height CSS custom property.        |
| `--choice-font-size`                 | String | The font size CSS custom property.               |
| `--choice-font-text-decoration`      | String | The font text decoration CSS custom property.    |
| `--choice-font-text-transform`       | String | The font text transform CSS custom property.     |
| `--choice-font-weight`               | String | The font weight CSS custom property.             |
| `--choice-foreground-color`          | String | The foreground color CSS custom property.        |
| `--choice-gap`                       | String | The gap CSS custom property.                     |
| `--choice-padding-bottom`            | String | The padding bottom CSS custom property.          |
| `--choice-padding-left`              | String | The padding left CSS custom property.            |
| `--choice-padding-right`             | String | The padding right CSS custom property.           |
| `--choice-padding-top`               | String | The padding top CSS custom property.             |
| `--choice-shadow`                    | String | The shadow CSS custom property.                  |
| `--choice-shadow-blur`               | String | The shadow blur CSS custom property.             |
| `--choice-shadow-color`              | String | The shadow color CSS custom property.            |
| `--choice-shadow-offset-x`           | String | The shadow offset x CSS custom property.         |
| `--choice-shadow-offset-y`           | String | The shadow offset y CSS custom property.         |
| `--choice-shadow-spread`             | String | The shadow spread CSS custom property.           |
| `--choice-transition-duration`       | String | The transition duration CSS custom property.     |
| `--choice-transition-mode`           | String | The transition mode CSS custom property.         |
| `--choice-transition-property`       | String | The transition property CSS custom property.     |
| `--choice-translate`                 | String | The translate CSS custom property.               |

# mosaik-code

Code - An inline code display element for rendering code snippets and technical text.

**Mixins:** Themeable, Variantable

## Examples

Basic inline code:

```html
<p>Use the <mosaik-code text="getElementById"></mosaik-code> method to select elements.</p>
```

Variable reference:

```html
<p>The <mosaik-code text="userName"></mosaik-code> variable stores the user's name.</p>
```

Dynamic code display:

```html
<mosaik-code id="codeSnippet"></mosaik-code>
<script>
  const codeEl = document.querySelector('#codeSnippet');
  codeEl.text = 'const result = 42;';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`    |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant` |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--code-font-family`          | String | The font family CSS custom property.          |
| `--code-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--code-font-line-height`     | String | The font line height CSS custom property.     |
| `--code-font-size`            | String | The font size CSS custom property.            |
| `--code-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--code-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--code-font-weight`          | String | The font weight CSS custom property.          |
| `--code-foreground-color`     | String | Text color for the code content               |
| `--code-gap`                  | String | The gap CSS custom property.                  |
| `--code-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--code-padding-left`         | String | The padding left CSS custom property.         |
| `--code-padding-right`        | String | The padding right CSS custom property.        |
| `--code-padding-top`          | String | The padding top CSS custom property.          |
| `--code-shadow`               | String | The shadow CSS custom property.               |
| `--code-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--code-shadow-color`         | String | The shadow color CSS custom property.         |
| `--code-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--code-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--code-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--code-transition-duration`  | String | The transition duration CSS custom property.  |
| `--code-transition-mode`      | String | The transition mode CSS custom property.      |
| `--code-transition-property`  | String | The transition property CSS custom property.  |
| `--code-translate`            | String | The translate CSS custom property.            |

# mosaik-color-area

Color Area - A user interface component for displaying a colored region or background.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage:

```html
<mosaik-color-area></mosaik-color-area>
```

With an initial color value:

```html
<mosaik-color-area color="#ff0000"></mosaik-color-area>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`        | `color`      |           | `string`                                     | Gets or sets the `color` property.               |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isFocused`    | `is-focused` |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `handleAreaPointerdown` | `(event: PointerEvent): void`                    |                                                  |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `change`       |                        |                                                  |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `input`        |                        |                                                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# ColorBoxElement - Color selection input

## Description
The ColorBox component provides an input field for selecting colors with integrated color picker. Features include hex/rgb/hsl input, visual color preview, color picker popup, alpha/opacity support, color palette presets, and keyboard input for precise values.

## Element
- **Tag**: `mosaik-colorbox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the color preview
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `preview` - Color preview swatch
- `input` - The color value input field
- `picker` - Color picker popup

## Examples

### Basic color input
```html
<mosaik-colorbox label="Theme Color"></mosaik-colorbox>
```

### With default value
```html
<mosaik-colorbox 
    label="Background" 
    value="#ff5733">
</mosaik-colorbox>
```

### With alpha channel
```html
<mosaik-colorbox 
    label="Overlay Color" 
    alpha="true">
</mosaik-colorbox>
```

### With color presets
```html
<mosaik-colorbox 
    label="Brand Color" 
    presets='["#ff0000", "#00ff00", "#0000ff"]'>
</mosaik-colorbox>
```

# mosaik-color-editor-alpha-slider

Color Editor Alpha Slider - A slider for selecting alpha/opacity values.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage:

```html
<mosaik-color-editor-alpha-slider></mosaik-color-editor-alpha-slider>
```

With initial color and alpha value:

```html
<mosaik-color-editor-alpha-slider color="#4a90d9" alpha="0.5"></mosaik-color-editor-alpha-slider>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Default | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `alpha`        | `alpha`      |           | `number`                                     |         | Gets or sets the alpha value (0-1).              |
| `alphaChanged` |              | readonly  | `IEventEmitter<IAlphaChangedEventDetail>`    |         | Called when the alpha value changes.<br />Provides reference to `IAlphaChangedEventDetail` as event detail. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`        | `color`      |           | `string`                                     |         | Gets or sets the base color for the gradient.    |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isFocused`    | `is-focused` |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `step`         |              |           | `number`                                     | "0.01"  | Gets or sets the step increment for the slider.  |
| `themeName`    |              |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `alphaChanged` | `AlphaChangedEvent`    | Fired when the alpha value changes via user interaction |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `checkerboard` | The checkerboard part.                           |
| `gradient`     | The alpha gradient overlay showing transparency  |
| `thumb`        | The draggable indicator showing current alpha position |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-alpha-slider-background-color`   | String | The editor alpha slider background color CSS custom property. |
| `--color-editor-alpha-slider-border-color`       | String | The editor alpha slider border color CSS custom property. |
| `--color-editor-alpha-slider-border-radius`      | String | The editor alpha slider border radius CSS custom property. |
| `--color-editor-alpha-slider-border-style`       | String | The editor alpha slider border style CSS custom property. |
| `--color-editor-alpha-slider-border-width`       | String | The editor alpha slider border width CSS custom property. |
| `--color-editor-alpha-slider-checkerboard-size`  | String | The editor alpha slider checkerboard size CSS custom property. |
| `--color-editor-alpha-slider-focus-ring-active-width` | String | The editor alpha slider focus ring active width CSS custom property. |
| `--color-editor-alpha-slider-focus-ring-color`   | String | The editor alpha slider focus ring color CSS custom property. |
| `--color-editor-alpha-slider-focus-ring-inward-offset` | String | The editor alpha slider focus ring inward offset CSS custom property. |
| `--color-editor-alpha-slider-focus-ring-outward-offset` | String | The editor alpha slider focus ring outward offset CSS custom property. |
| `--color-editor-alpha-slider-font-family`        | String | The editor alpha slider font family CSS custom property. |
| `--color-editor-alpha-slider-font-letter-spacing` | String | The editor alpha slider font letter spacing CSS custom property. |
| `--color-editor-alpha-slider-font-line-height`   | String | The editor alpha slider font line height CSS custom property. |
| `--color-editor-alpha-slider-font-size`          | String | The editor alpha slider font size CSS custom property. |
| `--color-editor-alpha-slider-font-text-decoration` | String | The editor alpha slider font text decoration CSS custom property. |
| `--color-editor-alpha-slider-font-text-transform` | String | The editor alpha slider font text transform CSS custom property. |
| `--color-editor-alpha-slider-font-weight`        | String | The editor alpha slider font weight CSS custom property. |
| `--color-editor-alpha-slider-foreground-color`   | String | The editor alpha slider foreground color CSS custom property. |
| `--color-editor-alpha-slider-gap`                | String | The editor alpha slider gap CSS custom property. |
| `--color-editor-alpha-slider-height`             | String | The editor alpha slider height CSS custom property. |
| `--color-editor-alpha-slider-padding-bottom`     | String | The editor alpha slider padding bottom CSS custom property. |
| `--color-editor-alpha-slider-padding-left`       | String | The editor alpha slider padding left CSS custom property. |
| `--color-editor-alpha-slider-padding-right`      | String | The editor alpha slider padding right CSS custom property. |
| `--color-editor-alpha-slider-padding-top`        | String | The editor alpha slider padding top CSS custom property. |
| `--color-editor-alpha-slider-shadow`             | String | The editor alpha slider shadow CSS custom property. |
| `--color-editor-alpha-slider-shadow-blur`        | String | The editor alpha slider shadow blur CSS custom property. |
| `--color-editor-alpha-slider-shadow-color`       | String | The editor alpha slider shadow color CSS custom property. |
| `--color-editor-alpha-slider-shadow-offset-x`    | String | The editor alpha slider shadow offset x CSS custom property. |
| `--color-editor-alpha-slider-shadow-offset-y`    | String | The editor alpha slider shadow offset y CSS custom property. |
| `--color-editor-alpha-slider-shadow-spread`      | String | The editor alpha slider shadow spread CSS custom property. |
| `--color-editor-alpha-slider-thumb-background-color` | String | The editor alpha slider thumb background color CSS custom property. |
| `--color-editor-alpha-slider-thumb-border-color` | String | The editor alpha slider thumb border color CSS custom property. |
| `--color-editor-alpha-slider-thumb-border-radius` | String | The editor alpha slider thumb border radius CSS custom property. |
| `--color-editor-alpha-slider-thumb-border-width` | String | The editor alpha slider thumb border width CSS custom property. |
| `--color-editor-alpha-slider-thumb-shadow`       | String | The editor alpha slider thumb shadow CSS custom property. |
| `--color-editor-alpha-slider-thumb-size`         | String | The editor alpha slider thumb size CSS custom property. |
| `--color-editor-alpha-slider-transition-duration` | String | The editor alpha slider transition duration CSS custom property. |
| `--color-editor-alpha-slider-transition-mode`    | String | The editor alpha slider transition mode CSS custom property. |
| `--color-editor-alpha-slider-transition-property` | String | The editor alpha slider transition property CSS custom property. |
| `--color-editor-alpha-slider-translate`          | String | The editor alpha slider translate CSS custom property. |
| `--color-editor-alpha-slider-width`              | String | The editor alpha slider width CSS custom property. |

# mosaik-color-editor-area

Color Editor Area - A 2D gradient picker for selecting saturation and value in HSV color space.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage:

```html
<mosaik-color-editor-area></mosaik-color-editor-area>
```

With an initial hue:

```html
<mosaik-color-editor-area hue="180"></mosaik-color-editor-area>
```

## Properties

| Property           | Attribute    | Modifiers | Type                                          | Description                                      |
|--------------------|--------------|-----------|-----------------------------------------------|--------------------------------------------------|
| `changed`          |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`  | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `colorAreaChanged` |              | readonly  | `IEventEmitter<IColorAreaChangedEventDetail>` | Called when the saturation or value changes.<br />Provides reference to `IColorAreaChangedEventDetail` as event detail. |
| `connected`        |              | readonly  | `IEventEmitter<void>`                         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`        |           | `FlowDirection`                               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`   |           | `boolean`                                     | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |              | readonly  | `IEventEmitter<void>`                         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hue`              | `hue`        |           | `number`                                      | Gets or sets the hue value (0-360).              |
| `isFocused`        | `is-focused` |           | `boolean`                                     | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`             | `lang`       |           | `string`                                      | The lang property indicates the language of the element's content. |
| `saturation`       |              |           | `number`                                      | Gets or sets the saturation value (0-1).         |
| `themeName`        |              |           | `string`                                      | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`            |              |           | `number`                                      | Gets or sets the value/brightness (0-1).         |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `setColor`              | `(hue: number, saturation: number, value: number): void` | Updates the color from external HSV values.<br /><br />**hue**: The hue value (0-360)<br />**saturation**: The saturation value (0-1)<br />**value**: The value/brightness (0-1) |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `colorAreaChanged` | `ColorAreaChangedEvent` | Fired when the saturation or value changes via user interaction |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                  | Description                                      |
|-----------------------|--------------------------------------------------|
| `gradient-saturation` | The horizontal saturation gradient overlay       |
| `gradient-value`      | The vertical value/brightness gradient overlay   |
| `thumb`               | The draggable indicator showing current position |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-area-background-color`          | String | The editor area background color CSS custom property. |
| `--color-editor-area-border-color`              | String | The editor area border color CSS custom property. |
| `--color-editor-area-border-radius`             | String | The editor area border radius CSS custom property. |
| `--color-editor-area-border-style`              | String | The editor area border style CSS custom property. |
| `--color-editor-area-border-width`              | String | The editor area border width CSS custom property. |
| `--color-editor-area-focus-ring-active-width`   | String | The editor area focus ring active width CSS custom property. |
| `--color-editor-area-focus-ring-color`          | String | The editor area focus ring color CSS custom property. |
| `--color-editor-area-focus-ring-inward-offset`  | String | The editor area focus ring inward offset CSS custom property. |
| `--color-editor-area-focus-ring-outward-offset` | String | The editor area focus ring outward offset CSS custom property. |
| `--color-editor-area-font-family`               | String | The editor area font family CSS custom property. |
| `--color-editor-area-font-letter-spacing`       | String | The editor area font letter spacing CSS custom property. |
| `--color-editor-area-font-line-height`          | String | The editor area font line height CSS custom property. |
| `--color-editor-area-font-size`                 | String | The editor area font size CSS custom property.   |
| `--color-editor-area-font-text-decoration`      | String | The editor area font text decoration CSS custom property. |
| `--color-editor-area-font-text-transform`       | String | The editor area font text transform CSS custom property. |
| `--color-editor-area-font-weight`               | String | The editor area font weight CSS custom property. |
| `--color-editor-area-foreground-color`          | String | The editor area foreground color CSS custom property. |
| `--color-editor-area-gap`                       | String | The editor area gap CSS custom property.         |
| `--color-editor-area-height`                    | String | The editor area height CSS custom property.      |
| `--color-editor-area-padding-bottom`            | String | The editor area padding bottom CSS custom property. |
| `--color-editor-area-padding-left`              | String | The editor area padding left CSS custom property. |
| `--color-editor-area-padding-right`             | String | The editor area padding right CSS custom property. |
| `--color-editor-area-padding-top`               | String | The editor area padding top CSS custom property. |
| `--color-editor-area-shadow`                    | String | The editor area shadow CSS custom property.      |
| `--color-editor-area-shadow-blur`               | String | The editor area shadow blur CSS custom property. |
| `--color-editor-area-shadow-color`              | String | The editor area shadow color CSS custom property. |
| `--color-editor-area-shadow-offset-x`           | String | The editor area shadow offset x CSS custom property. |
| `--color-editor-area-shadow-offset-y`           | String | The editor area shadow offset y CSS custom property. |
| `--color-editor-area-shadow-spread`             | String | The editor area shadow spread CSS custom property. |
| `--color-editor-area-thumb-border-color`        | String | The editor area thumb border color CSS custom property. |
| `--color-editor-area-thumb-border-radius`       | String | The editor area thumb border radius CSS custom property. |
| `--color-editor-area-thumb-border-width`        | String | The editor area thumb border width CSS custom property. |
| `--color-editor-area-thumb-shadow`              | String | The editor area thumb shadow CSS custom property. |
| `--color-editor-area-thumb-size`                | String | The editor area thumb size CSS custom property.  |
| `--color-editor-area-transition-duration`       | String | The editor area transition duration CSS custom property. |
| `--color-editor-area-transition-mode`           | String | The editor area transition mode CSS custom property. |
| `--color-editor-area-transition-property`       | String | The editor area transition property CSS custom property. |
| `--color-editor-area-translate`                 | String | The editor area translate CSS custom property.   |
| `--color-editor-area-width`                     | String | The editor area width CSS custom property.       |

# mosaik-color-editor-hue-slider

Color Editor Hue Slider - A slider for selecting hue values in the color spectrum.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage:

```html
<mosaik-color-editor-hue-slider></mosaik-color-editor-hue-slider>
```

With an initial hue value:

```html
<mosaik-color-editor-hue-slider hue="120"></mosaik-color-editor-hue-slider>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Default | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hue`          | `hue`        |           | `number`                                     |         | Gets or sets the hue value (0-360).              |
| `hueChanged`   |              | readonly  | `IEventEmitter<IHueChangedEventDetail>`      |         | Called when the hue value changes.<br />Provides reference to `IHueChangedEventDetail` as event detail. |
| `isFocused`    | `is-focused` |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `step`         |              |           | `number`                                     | "1"     | Gets or sets the step increment for the slider.  |
| `themeName`    |              |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `hueChanged`   | `HueChangedEvent`      | Fired when the hue value changes via user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description                                      |
|---------|--------------------------------------------------|
| `thumb` | The draggable indicator showing current hue position |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-hue-slider-background-color`     | String | The editor hue slider background color CSS custom property. |
| `--color-editor-hue-slider-border-color`         | String | The editor hue slider border color CSS custom property. |
| `--color-editor-hue-slider-border-radius`        | String | The editor hue slider border radius CSS custom property. |
| `--color-editor-hue-slider-border-style`         | String | The editor hue slider border style CSS custom property. |
| `--color-editor-hue-slider-border-width`         | String | The editor hue slider border width CSS custom property. |
| `--color-editor-hue-slider-focus-ring-active-width` | String | The editor hue slider focus ring active width CSS custom property. |
| `--color-editor-hue-slider-focus-ring-color`     | String | The editor hue slider focus ring color CSS custom property. |
| `--color-editor-hue-slider-focus-ring-inward-offset` | String | The editor hue slider focus ring inward offset CSS custom property. |
| `--color-editor-hue-slider-focus-ring-outward-offset` | String | The editor hue slider focus ring outward offset CSS custom property. |
| `--color-editor-hue-slider-font-family`          | String | The editor hue slider font family CSS custom property. |
| `--color-editor-hue-slider-font-letter-spacing`  | String | The editor hue slider font letter spacing CSS custom property. |
| `--color-editor-hue-slider-font-line-height`     | String | The editor hue slider font line height CSS custom property. |
| `--color-editor-hue-slider-font-size`            | String | The editor hue slider font size CSS custom property. |
| `--color-editor-hue-slider-font-text-decoration` | String | The editor hue slider font text decoration CSS custom property. |
| `--color-editor-hue-slider-font-text-transform`  | String | The editor hue slider font text transform CSS custom property. |
| `--color-editor-hue-slider-font-weight`          | String | The editor hue slider font weight CSS custom property. |
| `--color-editor-hue-slider-foreground-color`     | String | The editor hue slider foreground color CSS custom property. |
| `--color-editor-hue-slider-gap`                  | String | The editor hue slider gap CSS custom property.   |
| `--color-editor-hue-slider-height`               | String | The editor hue slider height CSS custom property. |
| `--color-editor-hue-slider-padding-bottom`       | String | The editor hue slider padding bottom CSS custom property. |
| `--color-editor-hue-slider-padding-left`         | String | The editor hue slider padding left CSS custom property. |
| `--color-editor-hue-slider-padding-right`        | String | The editor hue slider padding right CSS custom property. |
| `--color-editor-hue-slider-padding-top`          | String | The editor hue slider padding top CSS custom property. |
| `--color-editor-hue-slider-shadow`               | String | The editor hue slider shadow CSS custom property. |
| `--color-editor-hue-slider-shadow-blur`          | String | The editor hue slider shadow blur CSS custom property. |
| `--color-editor-hue-slider-shadow-color`         | String | The editor hue slider shadow color CSS custom property. |
| `--color-editor-hue-slider-shadow-offset-x`      | String | The editor hue slider shadow offset x CSS custom property. |
| `--color-editor-hue-slider-shadow-offset-y`      | String | The editor hue slider shadow offset y CSS custom property. |
| `--color-editor-hue-slider-shadow-spread`        | String | The editor hue slider shadow spread CSS custom property. |
| `--color-editor-hue-slider-thumb-background-color` | String | The editor hue slider thumb background color CSS custom property. |
| `--color-editor-hue-slider-thumb-border-color`   | String | The editor hue slider thumb border color CSS custom property. |
| `--color-editor-hue-slider-thumb-border-radius`  | String | The editor hue slider thumb border radius CSS custom property. |
| `--color-editor-hue-slider-thumb-border-width`   | String | The editor hue slider thumb border width CSS custom property. |
| `--color-editor-hue-slider-thumb-shadow`         | String | The editor hue slider thumb shadow CSS custom property. |
| `--color-editor-hue-slider-thumb-size`           | String | The editor hue slider thumb size CSS custom property. |
| `--color-editor-hue-slider-transition-duration`  | String | The editor hue slider transition duration CSS custom property. |
| `--color-editor-hue-slider-transition-mode`      | String | The editor hue slider transition mode CSS custom property. |
| `--color-editor-hue-slider-transition-property`  | String | The editor hue slider transition property CSS custom property. |
| `--color-editor-hue-slider-translate`            | String | The editor hue slider translate CSS custom property. |
| `--color-editor-hue-slider-width`                | String | The editor hue slider width CSS custom property. |

# mosaik-color-editor-inputs

Color Editor Inputs - Input fields for editing color values in various formats.

**Mixins:** Themeable, Disableable, Focusable, Sizeable

## Examples

Basic usage:

```html
<mosaik-color-editor-inputs></mosaik-color-editor-inputs>
```

With initial color and format:

```html
<mosaik-color-editor-inputs color="#ff0000" format="rgb"></mosaik-color-editor-inputs>
```

## Properties

| Property             | Attribute    | Modifiers | Type                                            | Default | Description                                      |
|----------------------|--------------|-----------|-------------------------------------------------|---------|--------------------------------------------------|
| `changed`            |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`    |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`              | `color`      |           | `string`                                        |         | Gets or sets the color value.                    |
| `colorChanged`       |              | readonly  | `IEventEmitter<IColorChangedEventDetail>`       |         | Called when the color value changes via user input.<br />Provides reference to `IColorChangedEventDetail` as event detail. |
| `colorFormatChanged` |              | readonly  | `IEventEmitter<IColorFormatChangedEventDetail>` |         | Called when the color format is changed.<br />Provides reference to `IColorFormatChangedEventDetail` as event detail. |
| `connected`          |              | readonly  | `IEventEmitter<void>`                           |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`        |           | `FlowDirection`                                 |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`           | `disabled`   |           | `boolean`                                       |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`       |              | readonly  | `IEventEmitter<void>`                           |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `format`             | `format`     |           | `ColorEditorFormat`                             |         | Gets or sets the color format to display.        |
| `isFocused`          | `is-focused` |           | `boolean`                                       |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`               | `lang`       |           | `string`                                        |         | The lang property indicates the language of the element's content. |
| `showAlpha`          |              |           | `boolean`                                       | "true"  | Gets or sets whether to show the alpha input.    |
| `size`               | `size`       |           | `Size`                                          |         | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`          |              |           | `string`                                        |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `nextFormat`            | `(): void`                                       | Navigates to the next color format in the cycle. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `previousFormat`        | `(): void`                                       | Navigates to the previous color format in the cycle. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                | Type                      | Description                                      |
|----------------------|---------------------------|--------------------------------------------------|
| `changed`            | `PropertyChangedEvent`    | Emitted when any attribute changes before update |
| `colorChanged`       | `ColorChangedEvent`       | Fired when the color value changes via user input |
| `colorFormatChanged` | `ColorFormatChangedEvent` | Fired when the color format is changed           |
| `connected`          | `ConnectedEvent`          | Emitted when the element is connected to the DOM |
| `disconnected`       | `DisconnectedEvent`       | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description                                  |
|---------------|----------------------------------------------|
| `input`       | The text input fields                        |
| `input-group` | Container for each input field and its label |
| `next`        | The next part.                               |
| `previous`    | The previous part.                           |

## CSS Custom Properties

| Property                                       | Type   | Description                                      |
|------------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-inputs-background-color`       | String | The editor inputs background color CSS custom property. |
| `--color-editor-inputs-border-color`           | String | The editor inputs border color CSS custom property. |
| `--color-editor-inputs-border-radius`          | String | The editor inputs border radius CSS custom property. |
| `--color-editor-inputs-border-style`           | String | The editor inputs border style CSS custom property. |
| `--color-editor-inputs-border-width`           | String | The editor inputs border width CSS custom property. |
| `--color-editor-inputs-font-family`            | String | The editor inputs font family CSS custom property. |
| `--color-editor-inputs-font-letter-spacing`    | String | The editor inputs font letter spacing CSS custom property. |
| `--color-editor-inputs-font-line-height`       | String | The editor inputs font line height CSS custom property. |
| `--color-editor-inputs-font-size`              | String | The editor inputs font size CSS custom property. |
| `--color-editor-inputs-font-text-decoration`   | String | The editor inputs font text decoration CSS custom property. |
| `--color-editor-inputs-font-text-transform`    | String | The editor inputs font text transform CSS custom property. |
| `--color-editor-inputs-font-weight`            | String | The editor inputs font weight CSS custom property. |
| `--color-editor-inputs-foreground-color`       | String | The editor inputs foreground color CSS custom property. |
| `--color-editor-inputs-gap`                    | String | The editor inputs gap CSS custom property.       |
| `--color-editor-inputs-height`                 | String | The editor inputs height CSS custom property.    |
| `--color-editor-inputs-input-background-color` | String | The editor inputs input background color CSS custom property. |
| `--color-editor-inputs-input-border-color`     | String | The editor inputs input border color CSS custom property. |
| `--color-editor-inputs-input-border-radius`    | String | The editor inputs input border radius CSS custom property. |
| `--color-editor-inputs-input-border-width`     | String | The editor inputs input border width CSS custom property. |
| `--color-editor-inputs-input-height`           | String | The editor inputs input height CSS custom property. |
| `--color-editor-inputs-label-color`            | String | The editor inputs label color CSS custom property. |
| `--color-editor-inputs-label-font-size`        | String | The editor inputs label font size CSS custom property. |
| `--color-editor-inputs-padding-bottom`         | String | The editor inputs padding bottom CSS custom property. |
| `--color-editor-inputs-padding-left`           | String | The editor inputs padding left CSS custom property. |
| `--color-editor-inputs-padding-right`          | String | The editor inputs padding right CSS custom property. |
| `--color-editor-inputs-padding-top`            | String | The editor inputs padding top CSS custom property. |
| `--color-editor-inputs-shadow`                 | String | The editor inputs shadow CSS custom property.    |
| `--color-editor-inputs-shadow-blur`            | String | The editor inputs shadow blur CSS custom property. |
| `--color-editor-inputs-shadow-color`           | String | The editor inputs shadow color CSS custom property. |
| `--color-editor-inputs-shadow-offset-x`        | String | The editor inputs shadow offset x CSS custom property. |
| `--color-editor-inputs-shadow-offset-y`        | String | The editor inputs shadow offset y CSS custom property. |
| `--color-editor-inputs-shadow-spread`          | String | The editor inputs shadow spread CSS custom property. |
| `--color-editor-inputs-transition-duration`    | String | The editor inputs transition duration CSS custom property. |
| `--color-editor-inputs-transition-mode`        | String | The editor inputs transition mode CSS custom property. |
| `--color-editor-inputs-transition-property`    | String | The editor inputs transition property CSS custom property. |
| `--color-editor-inputs-translate`              | String | The editor inputs translate CSS custom property. |
| `--color-editor-inputs-width`                  | String | The editor inputs width CSS custom property.     |

# mosaik-color-editor-palette

Color Editor Palette - A component for displaying and selecting colors from predefined palettes.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage:

```html
<mosaik-color-editor-palette></mosaik-color-editor-palette>
```

With a pre-selected palette and current color:

```html
<mosaik-color-editor-palette selected-palette="Material" current-color="#1976d2"></mosaik-color-editor-palette>
```

Disabled state:

```html
<mosaik-color-editor-palette disabled></mosaik-color-editor-palette>
```

## Properties

| Property               | Attribute         | Modifiers | Type                                         | Default | Description                                      |
|------------------------|-------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `allowAdd`             |                   |           | `boolean`                                    | "true"  | Gets or sets whether to show the add button (for custom palettes). |
| `changed`              |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |                   | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `currentColor`         | `currentColor`    |           | `string`                                     |         | Gets or sets the current color (used for adding to custom palette). |
| `dir`                  | `dir`             |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`        |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |                   | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isFocused`            | `is-focused`      |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`                 | `lang`            |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `paletteAdd`           |                   | readonly  | `IEventEmitter<IPaletteAddEventDetail>`      |         | Called when the add button is clicked.<br />Provides reference to `IPaletteAddEventDetail` as event detail. |
| `paletteChanged`       |                   | readonly  | `IEventEmitter<IPaletteChangedEventDetail>`  |         | Called when the active palette is changed.<br />Provides reference to `IPaletteChangedEventDetail` as event detail. |
| `paletteCustomChanged` |                   | readonly  | `IEventEmitter<IPaletteChangedEventDetail>`  |         | Called when colors are added or removed from the custom palette.<br />Provides reference to `IPaletteChangedEventDetail` as event detail. |
| `paletteSelect`        |                   | readonly  | `IEventEmitter<IPaletteSelectEventDetail>`   |         | Called when a color is selected from the palette.<br />Provides reference to `IPaletteSelectEventDetail` as event detail. |
| `palettes`             |                   |           | `IColorPalette[]`                            |         | Gets or sets the available palettes.             |
| `panelAnchor`          |                   |           | `HTMLElement \| null`                        |         | Gets or sets the anchor element for the panel.<br />When set, the panel will be positioned and sized relative to this element. |
| `panelOpen`            |                   | readonly  | `boolean`                                    |         | Gets whether the panel is open.                  |
| `selectedPalette`      | `selectedPalette` |           | `string`                                     |         | Gets or sets the currently selected palette name. |
| `themeName`            |                   |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                         | Type                                             | Description                                      |
|--------------------------------|--------------------------------------------------|--------------------------------------------------|
| `addColorToCustomPalette`      | `(color: string): void`                          | Adds a color to the custom palette.<br /><br />**color**: The color to add |
| `adoptStyle`                   | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                         | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getActivePalette`             | `(): IColorPalette \| undefined`                 | Gets the currently active palette.               |
| `getCustomPaletteColors`       | `(): string[]`                                   | Gets the colors from the custom (mutable) palette. |
| `getPanelStyles`               | `(): string`                                     | Gets the computed panel styles based on the anchor element. |
| `handleAddClick`               | `(): void`                                       | Handles add button click.                        |
| `handleColorClick`             | `(color: string): void`                          | Handles color item click.                        |
| `handlePaletteSelect`          | `(paletteName: string): void`                    | Handles palette selection from panel.            |
| `handlePanelClose`             | `(): void`                                       | Handles panel close.                             |
| `handleSwitcherClick`          | `(): void`                                       | Handles switcher button click.                   |
| `hasVisibleFocusInTree`        | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                          | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                           | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `removeColorFromCustomPalette` | `(color: string): void`                          | Removes a color from the custom palette.<br /><br />**color**: The color to remove |
| `requestUpdate`                | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `setCustomPaletteColors`       | `(colors: string[]): void`                       | Sets the colors for the custom (mutable) palette.<br />This replaces all existing colors in the custom palette.<br /><br />**colors**: The array of colors to set |

## Events

| Event                  | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `changed`              | `PropertyChangedEvent`                           | Emitted when any attribute changes before update |
| `connected`            | `ConnectedEvent`                                 | Emitted when the element is connected to the DOM |
| `disconnected`         | `DisconnectedEvent`                              | Emitted when the element is disconnected from the DOM |
| `paletteAdd`           | `PaletteAddEvent`                                | Fired when the add button is clicked (for custom palette) |
| `paletteChanged`       | `PaletteChangedEvent`                            | Fired when the active palette is changed         |
| `paletteCustomChanged` | `PaletteChangedEvent} - Fired when colors are added or removed from the custom palette. Detail contains { colors: Array<string> ` |                                                  |
| `paletteSelect`        | `PaletteSelectEvent`                             | Fired when a color is selected from the palette  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                | Description                                      |
|---------------------|--------------------------------------------------|
| `add-button`        | The button to add current color to custom palette |
| `color-item`        | Individual color swatch buttons                  |
| `colors`            | The container for color swatches                 |
| `header`            | The header row containing title and switcher     |
| `panel`             | The palette selector panel                       |
| `panel-close`       | The panel-close part.                            |
| `panel-header`      | The panel-header part.                           |
| `panel-item`        | The panel-item part.                             |
| `panel-item-color`  | The panel-item-color part.                       |
| `panel-item-colors` | The panel-item-colors part.                      |
| `panel-item-more`   | The "+N" text showing remaining colors count     |
| `panel-item-name`   | The panel-item-name part.                        |
| `panel-list`        | The panel-list part.                             |
| `panel-title`       | The panel-title part.                            |
| `switcher`          | The button to open palette selector panel        |
| `title`             | The palette name display                         |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-palette-background-color`        | String | The editor palette background color CSS custom property. |
| `--color-editor-palette-border-color`            | String | The editor palette border color CSS custom property. |
| `--color-editor-palette-border-radius`           | String | The editor palette border radius CSS custom property. |
| `--color-editor-palette-border-style`            | String | The editor palette border style CSS custom property. |
| `--color-editor-palette-border-width`            | String | The editor palette border width CSS custom property. |
| `--color-editor-palette-checkerboard-size`       | String | The editor palette checkerboard size CSS custom property. |
| `--color-editor-palette-color-item-border-color` | String | The editor palette color item border color CSS custom property. |
| `--color-editor-palette-color-item-border-radius` | String | The editor palette color item border radius CSS custom property. |
| `--color-editor-palette-color-item-border-width` | String | The editor palette color item border width CSS custom property. |
| `--color-editor-palette-color-item-size`         | String | The editor palette color item size CSS custom property. |
| `--color-editor-palette-font-family`             | String | The editor palette font family CSS custom property. |
| `--color-editor-palette-font-letter-spacing`     | String | The editor palette font letter spacing CSS custom property. |
| `--color-editor-palette-font-line-height`        | String | The editor palette font line height CSS custom property. |
| `--color-editor-palette-font-size`               | String | The editor palette font size CSS custom property. |
| `--color-editor-palette-font-text-decoration`    | String | The editor palette font text decoration CSS custom property. |
| `--color-editor-palette-font-text-transform`     | String | The editor palette font text transform CSS custom property. |
| `--color-editor-palette-font-weight`             | String | The editor palette font weight CSS custom property. |
| `--color-editor-palette-foreground-color`        | String | The editor palette foreground color CSS custom property. |
| `--color-editor-palette-gap`                     | String | The editor palette gap CSS custom property.      |
| `--color-editor-palette-height`                  | String | The editor palette height CSS custom property.   |
| `--color-editor-palette-padding-bottom`          | String | The editor palette padding bottom CSS custom property. |
| `--color-editor-palette-padding-left`            | String | The editor palette padding left CSS custom property. |
| `--color-editor-palette-padding-right`           | String | The editor palette padding right CSS custom property. |
| `--color-editor-palette-padding-top`             | String | The editor palette padding top CSS custom property. |
| `--color-editor-palette-preview-color-item-size` | String | The editor palette preview color item size CSS custom property. |
| `--color-editor-palette-shadow`                  | String | The editor palette shadow CSS custom property.   |
| `--color-editor-palette-shadow-blur`             | String | The editor palette shadow blur CSS custom property. |
| `--color-editor-palette-shadow-color`            | String | The editor palette shadow color CSS custom property. |
| `--color-editor-palette-shadow-offset-x`         | String | The editor palette shadow offset x CSS custom property. |
| `--color-editor-palette-shadow-offset-y`         | String | The editor palette shadow offset y CSS custom property. |
| `--color-editor-palette-shadow-spread`           | String | The editor palette shadow spread CSS custom property. |
| `--color-editor-palette-transition-duration`     | String | The editor palette transition duration CSS custom property. |
| `--color-editor-palette-transition-mode`         | String | The editor palette transition mode CSS custom property. |
| `--color-editor-palette-transition-property`     | String | The editor palette transition property CSS custom property. |
| `--color-editor-palette-translate`               | String | The editor palette translate CSS custom property. |
| `--color-editor-palette-width`                   | String | The editor palette width CSS custom property.    |

# mosaik-color-editor-shade-slider

Color Editor Shade Slider - A slider for selecting shade/darkness values.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage with hue and shade values:

```html
<mosaik-color-editor-shade-slider hue="200" saturation="80" shade="20"></mosaik-color-editor-shade-slider>
```

Disabled state:

```html
<mosaik-color-editor-shade-slider hue="0" shade="50" disabled></mosaik-color-editor-shade-slider>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Default | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hue`          | `hue`        |           | `number`                                     |         | Gets or sets the hue value (0-360) for the gradient color. |
| `isFocused`    | `is-focused` |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `saturation`   | `saturation` |           | `number`                                     |         | Gets or sets the saturation value (0-100) for the gradient color. |
| `shade`        | `shade`      |           | `number`                                     |         | Gets or sets the shade value (0-100).<br />0 = full color, 100 = completely black. |
| `shadeChanged` |              | readonly  | `IEventEmitter<IShadeChangedEventDetail>`    |         | Called when the shade value changes.<br />Provides reference to `IShadeChangedEventDetail` as event detail. |
| `step`         |              |           | `number`                                     | "1"     | Gets or sets the step increment for the slider.  |
| `themeName`    |              |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `shadeChanged` | `ShadeChangedEvent`    | Fired when the shade value changes via user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `gradient` | The gradient part.                               |
| `thumb`    | The draggable indicator showing current shade position |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-shade-slider-background-color`   | String | The editor shade slider background color CSS custom property. |
| `--color-editor-shade-slider-border-color`       | String | The editor shade slider border color CSS custom property. |
| `--color-editor-shade-slider-border-radius`      | String | The editor shade slider border radius CSS custom property. |
| `--color-editor-shade-slider-border-style`       | String | The editor shade slider border style CSS custom property. |
| `--color-editor-shade-slider-border-width`       | String | The editor shade slider border width CSS custom property. |
| `--color-editor-shade-slider-focus-ring-active-width` | String | The editor shade slider focus ring active width CSS custom property. |
| `--color-editor-shade-slider-focus-ring-color`   | String | The editor shade slider focus ring color CSS custom property. |
| `--color-editor-shade-slider-focus-ring-inward-offset` | String | The editor shade slider focus ring inward offset CSS custom property. |
| `--color-editor-shade-slider-focus-ring-outward-offset` | String | The editor shade slider focus ring outward offset CSS custom property. |
| `--color-editor-shade-slider-font-family`        | String | The editor shade slider font family CSS custom property. |
| `--color-editor-shade-slider-font-letter-spacing` | String | The editor shade slider font letter spacing CSS custom property. |
| `--color-editor-shade-slider-font-line-height`   | String | The editor shade slider font line height CSS custom property. |
| `--color-editor-shade-slider-font-size`          | String | The editor shade slider font size CSS custom property. |
| `--color-editor-shade-slider-font-text-decoration` | String | The editor shade slider font text decoration CSS custom property. |
| `--color-editor-shade-slider-font-text-transform` | String | The editor shade slider font text transform CSS custom property. |
| `--color-editor-shade-slider-font-weight`        | String | The editor shade slider font weight CSS custom property. |
| `--color-editor-shade-slider-foreground-color`   | String | The editor shade slider foreground color CSS custom property. |
| `--color-editor-shade-slider-gap`                | String | The editor shade slider gap CSS custom property. |
| `--color-editor-shade-slider-height`             | String | The editor shade slider height CSS custom property. |
| `--color-editor-shade-slider-padding-bottom`     | String | The editor shade slider padding bottom CSS custom property. |
| `--color-editor-shade-slider-padding-left`       | String | The editor shade slider padding left CSS custom property. |
| `--color-editor-shade-slider-padding-right`      | String | The editor shade slider padding right CSS custom property. |
| `--color-editor-shade-slider-padding-top`        | String | The editor shade slider padding top CSS custom property. |
| `--color-editor-shade-slider-shadow`             | String | The editor shade slider shadow CSS custom property. |
| `--color-editor-shade-slider-shadow-blur`        | String | The editor shade slider shadow blur CSS custom property. |
| `--color-editor-shade-slider-shadow-color`       | String | The editor shade slider shadow color CSS custom property. |
| `--color-editor-shade-slider-shadow-offset-x`    | String | The editor shade slider shadow offset x CSS custom property. |
| `--color-editor-shade-slider-shadow-offset-y`    | String | The editor shade slider shadow offset y CSS custom property. |
| `--color-editor-shade-slider-shadow-spread`      | String | The editor shade slider shadow spread CSS custom property. |
| `--color-editor-shade-slider-thumb-background-color` | String | The editor shade slider thumb background color CSS custom property. |
| `--color-editor-shade-slider-thumb-border-color` | String | The editor shade slider thumb border color CSS custom property. |
| `--color-editor-shade-slider-thumb-border-radius` | String | The editor shade slider thumb border radius CSS custom property. |
| `--color-editor-shade-slider-thumb-border-width` | String | The editor shade slider thumb border width CSS custom property. |
| `--color-editor-shade-slider-thumb-shadow`       | String | The editor shade slider thumb shadow CSS custom property. |
| `--color-editor-shade-slider-thumb-size`         | String | The editor shade slider thumb size CSS custom property. |
| `--color-editor-shade-slider-transition-duration` | String | The editor shade slider transition duration CSS custom property. |
| `--color-editor-shade-slider-transition-mode`    | String | The editor shade slider transition mode CSS custom property. |
| `--color-editor-shade-slider-transition-property` | String | The editor shade slider transition property CSS custom property. |
| `--color-editor-shade-slider-translate`          | String | The editor shade slider translate CSS custom property. |
| `--color-editor-shade-slider-width`              | String | The editor shade slider width CSS custom property. |

# mosaik-color-editor-swatch

Color Editor Swatch - A color preview element with optional copy functionality.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage displaying a color:

```html
<mosaik-color-editor-swatch color="#e91e63"></mosaik-color-editor-swatch>
```

Disabled state:

```html
<mosaik-color-editor-swatch color="#1976d2" disabled></mosaik-color-editor-swatch>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Default | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`        | `color`      |           | `string`                                     |         | Gets or sets the color to display.               |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `copyable`     |              |           | `boolean`                                    | "true"  | Gets or sets whether the swatch shows a copy button on hover. |
| `dir`          | `dir`        |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isFocused`    | `is-focused` |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `swatchCopy`   |              | readonly  | `IEventEmitter<ISwatchCopyEventDetail>`      |         | Called when the color is copied to clipboard.<br />Provides reference to `ISwatchCopyEventDetail` as event detail. |
| `themeName`    |              |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `pick`                  | `(): Promise<void>`                              | Handles click on the copy button.                |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `swatchCopy`   | `SwatchCopyEvent`      | Fired when the color is copied to clipboard      |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                          |
|----------------|--------------------------------------|
| `checkerboard` | The checkerboard part.               |
| `color`        | The color display area               |
| `copy-button`  | The copy to clipboard button overlay |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-swatch-background-color`     | String | The editor swatch background color CSS custom property. |
| `--color-editor-swatch-border-color`         | String | The editor swatch border color CSS custom property. |
| `--color-editor-swatch-border-radius`        | String | The editor swatch border radius CSS custom property. |
| `--color-editor-swatch-border-style`         | String | The editor swatch border style CSS custom property. |
| `--color-editor-swatch-border-width`         | String | The editor swatch border width CSS custom property. |
| `--color-editor-swatch-checkerboard-size`    | String | The editor swatch checkerboard size CSS custom property. |
| `--color-editor-swatch-font-family`          | String | The editor swatch font family CSS custom property. |
| `--color-editor-swatch-font-letter-spacing`  | String | The editor swatch font letter spacing CSS custom property. |
| `--color-editor-swatch-font-line-height`     | String | The editor swatch font line height CSS custom property. |
| `--color-editor-swatch-font-size`            | String | The editor swatch font size CSS custom property. |
| `--color-editor-swatch-font-text-decoration` | String | The editor swatch font text decoration CSS custom property. |
| `--color-editor-swatch-font-text-transform`  | String | The editor swatch font text transform CSS custom property. |
| `--color-editor-swatch-font-weight`          | String | The editor swatch font weight CSS custom property. |
| `--color-editor-swatch-foreground-color`     | String | The editor swatch foreground color CSS custom property. |
| `--color-editor-swatch-gap`                  | String | The editor swatch gap CSS custom property.       |
| `--color-editor-swatch-height`               | String | The editor swatch height CSS custom property.    |
| `--color-editor-swatch-padding-bottom`       | String | The editor swatch padding bottom CSS custom property. |
| `--color-editor-swatch-padding-left`         | String | The editor swatch padding left CSS custom property. |
| `--color-editor-swatch-padding-right`        | String | The editor swatch padding right CSS custom property. |
| `--color-editor-swatch-padding-top`          | String | The editor swatch padding top CSS custom property. |
| `--color-editor-swatch-shadow`               | String | The editor swatch shadow CSS custom property.    |
| `--color-editor-swatch-shadow-blur`          | String | The editor swatch shadow blur CSS custom property. |
| `--color-editor-swatch-shadow-color`         | String | The editor swatch shadow color CSS custom property. |
| `--color-editor-swatch-shadow-offset-x`      | String | The editor swatch shadow offset x CSS custom property. |
| `--color-editor-swatch-shadow-offset-y`      | String | The editor swatch shadow offset y CSS custom property. |
| `--color-editor-swatch-shadow-spread`        | String | The editor swatch shadow spread CSS custom property. |
| `--color-editor-swatch-transition-duration`  | String | The editor swatch transition duration CSS custom property. |
| `--color-editor-swatch-transition-mode`      | String | The editor swatch transition mode CSS custom property. |
| `--color-editor-swatch-transition-property`  | String | The editor swatch transition property CSS custom property. |
| `--color-editor-swatch-translate`            | String | The editor swatch translate CSS custom property. |
| `--color-editor-swatch-width`                | String | The editor swatch width CSS custom property.     |

# mosaik-color-editor

Color Editor - A comprehensive color picker component with area, sliders, inputs, and palette.

**Mixins:** Themeable, Disableable, Focusable

## Examples

Basic usage:

```html
<mosaik-color-editor></mosaik-color-editor>
```

With an initial color and format:

```html
<mosaik-color-editor color="#4a90d9" format="hex"></mosaik-color-editor>
```

Disabled state:

```html
<mosaik-color-editor color="#ff0000" disabled></mosaik-color-editor>
```

## Properties

| Property             | Attribute         | Modifiers | Type                                            | Default | Description                                      |
|----------------------|-------------------|-----------|-------------------------------------------------|---------|--------------------------------------------------|
| `alpha`              |                   | readonly  | `number`                                        |         | Gets the current alpha value.                    |
| `changed`            |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`    |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`              | `color`           |           | `string`                                        |         | Gets or sets the color value.                    |
| `colorChanged`       |                   | readonly  | `IEventEmitter<IColorChangedEventDetail>`       |         | Called when the color value changes.<br />Provides reference to `IColorChangedEventDetail` as event detail. |
| `colorFormatChanged` |                   | readonly  | `IEventEmitter<IColorFormatChangedEventDetail>` |         | Called when the color format is changed.<br />Provides reference to `IColorFormatChangedEventDetail` as event detail. |
| `connected`          |                   | readonly  | `IEventEmitter<void>`                           |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`             |           | `FlowDirection`                                 |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`           | `disabled`        |           | `boolean`                                       |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`       |                   | readonly  | `IEventEmitter<void>`                           |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `format`             | `format`          |           | `ColorEditorFormat`                             | "'hex'" | Gets or sets the color format for the inputs.    |
| `hue`                |                   | readonly  | `number`                                        |         | Gets the current hue value.                      |
| `isFocused`          | `is-focused`      |           | `boolean`                                       |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`               | `lang`            |           | `string`                                        |         | The lang property indicates the language of the element's content. |
| `paletteChanged`     |                   | readonly  | `IEventEmitter<IPaletteChangedEventDetail>`     |         | Called when custom palette colors change.<br />Provides reference to `IPaletteChangedEventDetail` as event detail. |
| `palettes`           |                   |           | `IColorPalette[]`                               |         | Gets or sets the available color palettes.       |
| `saturation`         |                   | readonly  | `number`                                        |         | Gets the current saturation value.               |
| `selectedPalette`    | `selectedPalette` |           | `string`                                        |         | Gets or sets the currently selected palette name. |
| `showAlpha`          |                   |           | `boolean`                                       | "true"  | Gets or sets whether to show the alpha slider and input. |
| `showEyeDropper`     |                   |           | `boolean`                                       | "true"  | Gets or sets whether to show the eye dropper button. |
| `showInputs`         |                   |           | `boolean`                                       | "true"  | Gets or sets whether to show the color inputs.   |
| `showPalette`        |                   |           | `boolean`                                       | "true"  | Gets or sets whether to show the color palette.  |
| `showSwatch`         |                   |           | `boolean`                                       | "true"  | Gets or sets whether to show the color swatch preview. |
| `themeName`          |                   |           | `string`                                        |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`              |                   | readonly  | `number`                                        |         | Gets the current value (brightness).             |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getDisplayColor`       | `(): string`                                     | Gets the display color for templates.            |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                | Type                      | Description                                      |
|----------------------|---------------------------|--------------------------------------------------|
| `changed`            | `PropertyChangedEvent`    | Emitted when any attribute changes before update |
| `colorChanged`       | `ColorChangedEvent`       | Fired when the color value changes               |
| `colorFormatChanged` | `ColorFormatChangedEvent` | Fired when the color format is changed           |
| `connected`          | `ConnectedEvent`          | Emitted when the element is connected to the DOM |
| `disconnected`       | `DisconnectedEvent`       | Emitted when the element is disconnected from the DOM |
| `paletteChanged`     | `PaletteChangedEvent`     | Fired when custom palette colors change          |

## Slots

| Name           | Description                                      |
|----------------|--------------------------------------------------|
| `alpha-slider` | Custom alpha slider component                    |
| `area`         | Custom color area component                      |
| `eye-dropper`  | The eye-dropper slot.                            |
| `hue-slider`   | Custom hue slider component                      |
| `inputs`       | Custom inputs component                          |
| `palette`      | Custom palette component                         |
| `style`        | Custom styles injection slot for shadow DOM styling escape hatch |
| `swatch`       | Custom color swatch component                    |

## CSS Shadow Parts

| Part                 | Description                          |
|----------------------|--------------------------------------|
| `eye-dropper-button` | The eye-dropper-button part.         |
| `inputs`             | Container for input fields           |
| `palette`            | Container for color palette          |
| `sliders`            | Container for hue and alpha sliders  |
| `tools`              | The main tools container             |
| `tools-row`          | Row container for sliders and swatch |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--color-editor-background-color`          | String | The editor background color CSS custom property. |
| `--color-editor-border-color`              | String | The editor border color CSS custom property.     |
| `--color-editor-border-radius`             | String | The editor border radius CSS custom property.    |
| `--color-editor-border-style`              | String | The editor border style CSS custom property.     |
| `--color-editor-border-width`              | String | The editor border width CSS custom property.     |
| `--color-editor-focus-ring-active-width`   | String | The editor focus ring active width CSS custom property. |
| `--color-editor-focus-ring-color`          | String | The editor focus ring color CSS custom property. |
| `--color-editor-focus-ring-inward-offset`  | String | The editor focus ring inward offset CSS custom property. |
| `--color-editor-focus-ring-outward-offset` | String | The editor focus ring outward offset CSS custom property. |
| `--color-editor-font-family`               | String | The editor font family CSS custom property.      |
| `--color-editor-font-letter-spacing`       | String | The editor font letter spacing CSS custom property. |
| `--color-editor-font-line-height`          | String | The editor font line height CSS custom property. |
| `--color-editor-font-size`                 | String | The editor font size CSS custom property.        |
| `--color-editor-font-text-decoration`      | String | The editor font text decoration CSS custom property. |
| `--color-editor-font-text-transform`       | String | The editor font text transform CSS custom property. |
| `--color-editor-font-weight`               | String | The editor font weight CSS custom property.      |
| `--color-editor-foreground-color`          | String | The editor foreground color CSS custom property. |
| `--color-editor-gap`                       | String | The editor gap CSS custom property.              |
| `--color-editor-height`                    | String | The editor height CSS custom property.           |
| `--color-editor-padding-bottom`            | String | The editor padding bottom CSS custom property.   |
| `--color-editor-padding-left`              | String | The editor padding left CSS custom property.     |
| `--color-editor-padding-right`             | String | The editor padding right CSS custom property.    |
| `--color-editor-padding-top`               | String | The editor padding top CSS custom property.      |
| `--color-editor-shadow`                    | String | The editor shadow CSS custom property.           |
| `--color-editor-shadow-blur`               | String | The editor shadow blur CSS custom property.      |
| `--color-editor-shadow-color`              | String | The editor shadow color CSS custom property.     |
| `--color-editor-shadow-offset-x`           | String | The editor shadow offset x CSS custom property.  |
| `--color-editor-shadow-offset-y`           | String | The editor shadow offset y CSS custom property.  |
| `--color-editor-shadow-spread`             | String | The editor shadow spread CSS custom property.    |
| `--color-editor-transition-duration`       | String | The editor transition duration CSS custom property. |
| `--color-editor-transition-mode`           | String | The editor transition mode CSS custom property.  |
| `--color-editor-transition-property`       | String | The editor transition property CSS custom property. |
| `--color-editor-translate`                 | String | The editor translate CSS custom property.        |
| `--color-editor-width`                     | String | The editor width CSS custom property.            |

# mosaik-color-picker

Color Picker - A user interface component for selecting colors using the ColorEditor.

**Mixins:** Themeable, DropDownable, Disableable, Valueable

## Examples

Basic usage with an initial color value:

```html
<mosaik-color-picker value="#e91e63"></mosaik-color-picker>
```

With HSL format and disabled:

```html
<mosaik-color-picker value="#1976d2" format="hsl" disabled></mosaik-color-picker>
```

## Properties

| Property            | Attribute              | Modifiers | Type                                         | Default | Description                                      |
|---------------------|------------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`           |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                        | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                  |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`             |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                        | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`  | `drop-down-distance`   |           | `number`                                     |         | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`    | `drop-down-height`     |           | `CssLength \| undefined`                     |         | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight` | `drop-down-max-height` |           | `CssLength`                                  |         | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`  | `drop-down-max-width`  |           | `CssLength \| undefined`                     |         | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement` | `drop-down-placement`  |           | `Placement`                                  |         | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`  | `drop-down-skidding`   |           | `number`                                     |         | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen` | `drop-down-stays-open` |           | `boolean`                                    |         | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`  | `drop-down-strategy`   |           | `Strategy`                                   |         | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`     | `drop-down-width`      |           | `CssLength \| undefined`                     |         | Gets or sets the `dropDownWidth` property.       |
| `format`            |                        |           | `ColorEditorFormat`                          | "'hex'" | Gets or sets the color format for the inputs.    |
| `isDropDownOpen`    | `is-drop-down-open`    |           | `boolean`                                    |         | Gets or sets the `isDropDownOpen` property.      |
| `lang`              | `lang`                 |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `palettes`          |                        |           | `IColorPalette[]`                            |         | Gets or sets the available color palettes.       |
| `selectedPalette`   |                        |           | `string`                                     |         | Gets or sets the currently selected palette name. |
| `showAlpha`         |                        |           | `boolean`                                    | "true"  | Gets or sets whether to show the alpha slider and input. |
| `showEyeDropper`    |                        |           | `boolean`                                    | "false" | Gets or sets whether to show the eye dropper button. |
| `showInputs`        |                        |           | `boolean`                                    | "true"  | Gets or sets whether to show the color inputs.   |
| `showPalette`       |                        |           | `boolean`                                    | "true"  | Gets or sets whether to show the color palette.  |
| `showSwatch`        |                        |           | `boolean`                                    | "true"  | Gets or sets whether to show the color swatch preview in the editor. |
| `themeName`         |                        |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`                |           | `string \| null`                             |         | Gets or sets the `value` property.               |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`         | `(): void`                                       | Closes the drop down.                            |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `open`          | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`        | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `colorChanged` | `ColorChangedEvent`    | Fired when the color value changes.              |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for custom trigger content.         |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                       |
|----------|-----------------------------------|
| `editor` | The color editor element.         |
| `popup`  | The floating dropdown container.  |
| `portal` | The portal part.                  |
| `swatch` | The color swatch trigger element. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--color-picker-background-color`     | String | The picker background color CSS custom property. |
| `--color-picker-border-color`         | String | The picker border color CSS custom property.     |
| `--color-picker-border-radius`        | String | The picker border radius CSS custom property.    |
| `--color-picker-border-style`         | String | The picker border style CSS custom property.     |
| `--color-picker-border-width`         | String | The picker border width CSS custom property.     |
| `--color-picker-font-family`          | String | The picker font family CSS custom property.      |
| `--color-picker-font-letter-spacing`  | String | The picker font letter spacing CSS custom property. |
| `--color-picker-font-line-height`     | String | The picker font line height CSS custom property. |
| `--color-picker-font-size`            | String | The picker font size CSS custom property.        |
| `--color-picker-font-text-decoration` | String | The picker font text decoration CSS custom property. |
| `--color-picker-font-text-transform`  | String | The picker font text transform CSS custom property. |
| `--color-picker-font-weight`          | String | The picker font weight CSS custom property.      |
| `--color-picker-foreground-color`     | String | The picker foreground color CSS custom property. |
| `--color-picker-gap`                  | String | The picker gap CSS custom property.              |
| `--color-picker-padding-bottom`       | String | The picker padding bottom CSS custom property.   |
| `--color-picker-padding-left`         | String | The picker padding left CSS custom property.     |
| `--color-picker-padding-right`        | String | The picker padding right CSS custom property.    |
| `--color-picker-padding-top`          | String | The picker padding top CSS custom property.      |
| `--color-picker-shadow`               | String | The picker shadow CSS custom property.           |
| `--color-picker-shadow-blur`          | String | The picker shadow blur CSS custom property.      |
| `--color-picker-shadow-color`         | String | The picker shadow color CSS custom property.     |
| `--color-picker-shadow-offset-x`      | String | The picker shadow offset x CSS custom property.  |
| `--color-picker-shadow-offset-y`      | String | The picker shadow offset y CSS custom property.  |
| `--color-picker-shadow-spread`        | String | The picker shadow spread CSS custom property.    |
| `--color-picker-size`                 | String | The picker size CSS custom property.             |
| `--color-picker-transition-duration`  | String | The picker transition duration CSS custom property. |
| `--color-picker-transition-mode`      | String | The picker transition mode CSS custom property.  |
| `--color-picker-transition-property`  | String | The picker transition property CSS custom property. |
| `--color-picker-translate`            | String | The picker translate CSS custom property.        |

# mosaik-color-slider

The `ColorSliderElement` element.

**Mixins:** Themeable, Disableable, Orientable, Valueable

## Examples

Basic usage with a color:

```html
<mosaik-color-slider color="#e91e63"></mosaik-color-slider>
```

Vertical orientation:

```html
<mosaik-color-slider color="#1976d2" orientation="vertical"></mosaik-color-slider>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`        | `color`       |           | `string`                                     | Gets or sets the `color` property.               |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`       |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`         | `(focusOptions?: FocusOptions): void`            |                                                  |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `change`       |                        |                                                  |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `input`        |                        |                                                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-color-swatch-group

Color Swatch Group - A grouping of color swatches.

**Mixins:** Themeable, Disableable, Sizeable, Variantable, Appearanceable

## Examples

Basic usage with swatches:

```html
<mosaik-color-swatch-group>
  <mosaik-color-swatch value="#e91e63"></mosaik-color-swatch>
  <mosaik-color-swatch value="#1976d2"></mosaik-color-swatch>
  <mosaik-color-swatch value="#388e3c"></mosaik-color-swatch>
</mosaik-color-swatch-group>
```

With size and variant applied to the group:

```html
<mosaik-color-swatch-group size="large" variant="primary">
  <mosaik-color-swatch value="#e91e63"></mosaik-color-swatch>
  <mosaik-color-swatch value="#1976d2"></mosaik-color-swatch>
</mosaik-color-swatch-group>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--color-swatch-group-background-color`     | String | The swatch group background color CSS custom property. |
| `--color-swatch-group-border-color`         | String | The swatch group border color CSS custom property. |
| `--color-swatch-group-border-radius`        | String | The swatch group border radius CSS custom property. |
| `--color-swatch-group-border-style`         | String | The swatch group border style CSS custom property. |
| `--color-swatch-group-border-width`         | String | The swatch group border width CSS custom property. |
| `--color-swatch-group-font-family`          | String | The swatch group font family CSS custom property. |
| `--color-swatch-group-font-letter-spacing`  | String | The swatch group font letter spacing CSS custom property. |
| `--color-swatch-group-font-line-height`     | String | The swatch group font line height CSS custom property. |
| `--color-swatch-group-font-size`            | String | The swatch group font size CSS custom property.  |
| `--color-swatch-group-font-text-decoration` | String | The swatch group font text decoration CSS custom property. |
| `--color-swatch-group-font-text-transform`  | String | The swatch group font text transform CSS custom property. |
| `--color-swatch-group-font-weight`          | String | The swatch group font weight CSS custom property. |
| `--color-swatch-group-foreground-color`     | String | The swatch group foreground color CSS custom property. |
| `--color-swatch-group-gap`                  | String | The swatch group gap CSS custom property.        |
| `--color-swatch-group-padding-bottom`       | String | The swatch group padding bottom CSS custom property. |
| `--color-swatch-group-padding-left`         | String | The swatch group padding left CSS custom property. |
| `--color-swatch-group-padding-right`        | String | The swatch group padding right CSS custom property. |
| `--color-swatch-group-padding-top`          | String | The swatch group padding top CSS custom property. |
| `--color-swatch-group-shadow`               | String | The swatch group shadow CSS custom property.     |
| `--color-swatch-group-shadow-blur`          | String | The swatch group shadow blur CSS custom property. |
| `--color-swatch-group-shadow-color`         | String | The swatch group shadow color CSS custom property. |
| `--color-swatch-group-shadow-offset-x`      | String | The swatch group shadow offset x CSS custom property. |
| `--color-swatch-group-shadow-offset-y`      | String | The swatch group shadow offset y CSS custom property. |
| `--color-swatch-group-shadow-spread`        | String | The swatch group shadow spread CSS custom property. |
| `--color-swatch-group-transition-duration`  | String | The swatch group transition duration CSS custom property. |
| `--color-swatch-group-transition-mode`      | String | The swatch group transition mode CSS custom property. |
| `--color-swatch-group-transition-property`  | String | The swatch group transition property CSS custom property. |
| `--color-swatch-group-translate`            | String | The swatch group translate CSS custom property.  |

# mosaik-color-swatch

Color Swatch - A user interface component for displaying colors.

**Mixins:** Themeable, Valueable, Sizeable

## Examples

Basic usage displaying a color:

```html
<mosaik-color-swatch value="#e91e63"></mosaik-color-swatch>
```

With a name and large size:

```html
<mosaik-color-swatch value="#1976d2" name="Primary Blue" size="large"></mosaik-color-swatch>
```

With a checkerboard background for semi-transparent colors:

```html
<mosaik-color-swatch value="rgba(233, 30, 99, 0.5)" has-background></mosaik-color-swatch>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasBackground` | `hasBackground` |           | `boolean`                                    | Gets or sets the `hasBackground` property.       |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`          | `name`          |           | `string \| null`                             | Gets or sets the `name` property.                |
| `size`          | `size`          |           | `Size`                                       | Gets or sets the `size` property.<br />When used inside a ColorSwatchGroup, inherits the group's size unless explicitly set. |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`         | `value`         |           | `string \| null`                             | Gets or sets the `value` property.               |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description     |
|---------|-----------------|
| `back`  | The back part.  |
| `front` | The front part. |
| `root`  | The root part.  |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--color-swatch-background-color`     | String | The swatch background color CSS custom property. |
| `--color-swatch-border-color`         | String | The swatch border color CSS custom property.     |
| `--color-swatch-border-radius`        | String | The swatch border radius CSS custom property.    |
| `--color-swatch-border-style`         | String | The swatch border style CSS custom property.     |
| `--color-swatch-border-width`         | String | The swatch border width CSS custom property.     |
| `--color-swatch-font-family`          | String | The swatch font family CSS custom property.      |
| `--color-swatch-font-letter-spacing`  | String | The swatch font letter spacing CSS custom property. |
| `--color-swatch-font-line-height`     | String | The swatch font line height CSS custom property. |
| `--color-swatch-font-size`            | String | The swatch font size CSS custom property.        |
| `--color-swatch-font-text-decoration` | String | The swatch font text decoration CSS custom property. |
| `--color-swatch-font-text-transform`  | String | The swatch font text transform CSS custom property. |
| `--color-swatch-font-weight`          | String | The swatch font weight CSS custom property.      |
| `--color-swatch-foreground-color`     | String | The swatch foreground color CSS custom property. |
| `--color-swatch-gap`                  | String | The swatch gap CSS custom property.              |
| `--color-swatch-padding-bottom`       | String | The swatch padding bottom CSS custom property.   |
| `--color-swatch-padding-left`         | String | The swatch padding left CSS custom property.     |
| `--color-swatch-padding-right`        | String | The swatch padding right CSS custom property.    |
| `--color-swatch-padding-top`          | String | The swatch padding top CSS custom property.      |
| `--color-swatch-shadow`               | String | The swatch shadow CSS custom property.           |
| `--color-swatch-shadow-blur`          | String | The swatch shadow blur CSS custom property.      |
| `--color-swatch-shadow-color`         | String | The swatch shadow color CSS custom property.     |
| `--color-swatch-shadow-offset-x`      | String | The swatch shadow offset x CSS custom property.  |
| `--color-swatch-shadow-offset-y`      | String | The swatch shadow offset y CSS custom property.  |
| `--color-swatch-shadow-spread`        | String | The swatch shadow spread CSS custom property.    |
| `--color-swatch-size`                 | String | The swatch size CSS custom property.             |
| `--color-swatch-transition-duration`  | String | The swatch transition duration CSS custom property. |
| `--color-swatch-transition-mode`      | String | The swatch transition mode CSS custom property.  |
| `--color-swatch-transition-property`  | String | The swatch transition property CSS custom property. |
| `--color-swatch-translate`            | String | The swatch translate CSS custom property.        |

# mosaik-color-thumb

Color Thumb - A user interface component used for selecting or adjusting colors.

**Mixins:** Themeable, Disableable

## Examples

Basic usage with a color:

```html
<mosaik-color-thumb color="#e91e63"></mosaik-color-thumb>
```

Open state (tooltip visible):

```html
<mosaik-color-thumb color="#1976d2" is-open></mosaik-color-thumb>
```

Disabled state:

```html
<mosaik-color-thumb color="#388e3c" disabled></mosaik-color-thumb>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`        | `color`    |           | `string`                                     | Gets or sets the `color` property.               |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isOpen`       | `isOpen`   |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description     |
|---------|-----------------|
| `inner` | The inner part. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--color-thumb-background-color`     | String | The thumb background color CSS custom property.  |
| `--color-thumb-border-color`         | String | The thumb border color CSS custom property.      |
| `--color-thumb-border-radius`        | String | The thumb border radius CSS custom property.     |
| `--color-thumb-border-style`         | String | The thumb border style CSS custom property.      |
| `--color-thumb-border-width`         | String | The thumb border width CSS custom property.      |
| `--color-thumb-font-family`          | String | The thumb font family CSS custom property.       |
| `--color-thumb-font-letter-spacing`  | String | The thumb font letter spacing CSS custom property. |
| `--color-thumb-font-line-height`     | String | The thumb font line height CSS custom property.  |
| `--color-thumb-font-size`            | String | The thumb font size CSS custom property.         |
| `--color-thumb-font-text-decoration` | String | The thumb font text decoration CSS custom property. |
| `--color-thumb-font-text-transform`  | String | The thumb font text transform CSS custom property. |
| `--color-thumb-font-weight`          | String | The thumb font weight CSS custom property.       |
| `--color-thumb-foreground-color`     | String | The thumb foreground color CSS custom property.  |
| `--color-thumb-gap`                  | String | The thumb gap CSS custom property.               |
| `--color-thumb-padding-bottom`       | String | The thumb padding bottom CSS custom property.    |
| `--color-thumb-padding-left`         | String | The thumb padding left CSS custom property.      |
| `--color-thumb-padding-right`        | String | The thumb padding right CSS custom property.     |
| `--color-thumb-padding-top`          | String | The thumb padding top CSS custom property.       |
| `--color-thumb-shadow`               | String | The thumb shadow CSS custom property.            |
| `--color-thumb-shadow-blur`          | String | The thumb shadow blur CSS custom property.       |
| `--color-thumb-shadow-color`         | String | The thumb shadow color CSS custom property.      |
| `--color-thumb-shadow-offset-x`      | String | The thumb shadow offset x CSS custom property.   |
| `--color-thumb-shadow-offset-y`      | String | The thumb shadow offset y CSS custom property.   |
| `--color-thumb-shadow-spread`        | String | The thumb shadow spread CSS custom property.     |
| `--color-thumb-size`                 | String | The thumb size CSS custom property.              |
| `--color-thumb-transition-duration`  | String | The thumb transition duration CSS custom property. |
| `--color-thumb-transition-mode`      | String | The thumb transition mode CSS custom property.   |
| `--color-thumb-transition-property`  | String | The thumb transition property CSS custom property. |
| `--color-thumb-translate`            | String | The thumb translate CSS custom property.         |

# mosaik-colorbox

Color Box - A comprehensive color selection input with picker interface and palette support.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Invalidable, Variantable, Appearanceable, DropDownable, Labelable, Focusable

## Examples

```html
<mosaik-colorbox
  label="Brand Color"
  value="#3b82f6"
  placeholder="Select a color">
</mosaik-colorbox>
```

Color box with RGB format and palette:

```html
<mosaik-colorbox
  label="Background Color"
  format="rgb"
  palette="material"
  is-clearable>
</mosaik-colorbox>
```

## Properties

| Property            | Attribute              | Modifiers | Type                                         | Default | Description                                      |
|---------------------|------------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `appearance`        | `appearance`           |           | `Appearance`                                 |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`      | `autocomplete`         |           | `boolean`                                    |         | Gets or sets the `autocomplete` property.        |
| `autofocus`         |                        |           | `boolean`                                    |         | Gets or sets the `autofocus` property.           |
| `changed`           |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`           |                        |           | `IEventEmitter<IEventDetail>`                |         | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `colorPosition`     | `colorPosition`        |           | `ColorPosition`                              |         | Gets or sets the position of the color preview relative to the input field.<br />Use 'before' to place it before the input, 'after' to place it after (default). |
| `connected`         |                        | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                  |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`             |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                        | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`  | `drop-down-distance`   |           | `number`                                     |         | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`    | `drop-down-height`     |           | `CssLength \| undefined`                     |         | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight` | `drop-down-max-height` |           | `CssLength`                                  |         | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`  | `drop-down-max-width`  |           | `CssLength \| undefined`                     |         | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement` | `drop-down-placement`  |           | `Placement`                                  |         | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`  | `drop-down-skidding`   |           | `number`                                     |         | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen` | `drop-down-stays-open` |           | `boolean`                                    |         | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`  | `drop-down-strategy`   |           | `Strategy`                                   |         | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`     | `drop-down-width`      |           | `CssLength \| undefined`                     |         | Gets or sets the `dropDownWidth` property.       |
| `editorFormat`      | `editorFormat`         |           | `ColorEditorFormat`                          | "'hex'" | Gets or sets the color format for the editor inputs. |
| `format`            | `format`               |           | `ColorFormat`                                |         | Gets or sets the color format to use for input and output.<br />Supported formats: hex, hex8, rgb, rgba, hsl, hsla, hsv, hsva, oklch, oklab, lch, lab |
| `formatter`         |                        |           | `InputFormatterFn \| null`                   |         | Gets or sets the `formatter` property.           |
| `invalid`           | `invalid`              |           | `boolean`                                    |         | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`       | `is-clearable`         |           | `boolean`                                    |         | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`    | `is-drop-down-open`    |           | `boolean`                                    |         | Gets or sets the `isDropDownOpen` property.      |
| `isFocused`         | `is-focused`           |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`             |                        |           | `string`                                     |         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`                 |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `name`              | `name`                 |           | `string`                                     |         | Gets or sets the `name` property.                |
| `palettes`          |                        |           | `IColorPalette[]`                            |         | Gets or sets the available color palettes for the editor. |
| `parser`            |                        |           | `InputParserFn \| null`                      |         | Gets or sets the `parser` property.              |
| `pattern`           | `pattern`              |           | `string`                                     |         | Gets or sets the `pattern` property.             |
| `placeholder`       | `placeholder`          |           | `string`                                     |         | Gets or sets the `placeholder` property.         |
| `readonly`          | `readonly`             |           | `boolean`                                    |         | Gets or sets the `readonly` property.            |
| `required`          | `required`             |           | `boolean`                                    |         | Gets or sets the `required` property.            |
| `selectedPalette`   | `selectedPalette`      |           | `string`                                     |         | Gets or sets the currently selected palette name in the editor. |
| `showAlpha`         | `showAlpha`            |           | `boolean`                                    | "true"  | Gets or sets whether to show the alpha slider in the editor. |
| `showEyeDropper`    | `showEyeDropper`       |           | `boolean`                                    | "false" | Gets or sets whether to show the eye dropper button in the editor. |
| `showInputs`        | `showInputs`           |           | `boolean`                                    | "true"  | Gets or sets whether to show the color inputs in the editor. |
| `showPalette`       | `showPalette`          |           | `boolean`                                    | "true"  | Gets or sets whether to show the palette section in the editor. |
| `showSwatch`        | `showSwatch`           |           | `boolean`                                    | "true"  | Gets or sets whether to show the color swatch preview in the editor. |
| `state`             | `state`                |           | `InputState`                                 |         | Gets or sets the `state` property.               |
| `swatches`          | `swatches`             |           | `string[]`                                   |         | Gets or sets the `swatches` property.            |
| `textAlign`         | `textAlign`            |           | `TextAlignment`                              |         | Determines the text alignment of the component.  |
| `themeName`         |                        |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`                |           | `string`                                     |         | Gets or sets the `value` property.               |
| `variant`           | `variant`              |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `close`                 | `(): void`                                       |                                                  |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       |                                                  |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                  | `(): void`                                       |                                                  |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `toggle`                | `(): void`                                       |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `blur`         |                        | Emitted when the element loses focus.            |
| `change`       | `ColorChangedEvent`    | Emitted when the value changes.                  |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `focus`        |                        | Emitted when the element receives focus.         |
| `input`        | `ColorChangedEvent`    | Emitted when the value changes.                  |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the input field.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input field.            |

## CSS Shadow Parts

| Part          | Description                   |
|---------------|-------------------------------|
| `clear`       | The clear part.               |
| `colorSwatch` | The color preview swatch.     |
| `focusRing`   | The focus ring indicator.     |
| `inner`       | The inner container wrapper.  |
| `input`       | The color input field.        |
| `label`       | The floating label element.   |
| `prefix`      | The prefix content container. |
| `suffix`      | The suffix content container. |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--color-box-background-color`          | Color  | The background color.                            |
| `--color-box-border-color`              | Color  | The border color.                                |
| `--color-box-border-radius`             | String | The border radius.                               |
| `--color-box-border-style`              | String | The border style.                                |
| `--color-box-border-width`              | String | The border width.                                |
| `--color-box-focus-ring-outward-offset` | String | The focus ring outward offset.                   |
| `--color-box-focus-ring-width`          | String | The box focus ring width CSS custom property.    |
| `--color-box-font-family`               | String | The font family.                                 |
| `--color-box-font-letter-spacing`       | String | The box font letter spacing CSS custom property. |
| `--color-box-font-line-height`          | String | The box font line height CSS custom property.    |
| `--color-box-font-size`                 | String | The font size.                                   |
| `--color-box-font-text-decoration`      | String | The box font text decoration CSS custom property. |
| `--color-box-font-text-transform`       | String | The box font text transform CSS custom property. |
| `--color-box-font-weight`               | String | The font weight.                                 |
| `--color-box-foreground-color`          | Color  | The foreground color.                            |
| `--color-box-gap`                       | String | The gap between elements.                        |
| `--color-box-height`                    | String | The height.                                      |
| `--color-box-padding-bottom`            | String | The padding bottom.                              |
| `--color-box-padding-left`              | String | The padding left.                                |
| `--color-box-padding-right`             | String | The padding right.                               |
| `--color-box-padding-top`               | String | The padding top.                                 |
| `--color-box-shadow`                    | String | The shadow.                                      |
| `--color-box-shadow-blur`               | String | The box shadow blur CSS custom property.         |
| `--color-box-shadow-color`              | String | The box shadow color CSS custom property.        |
| `--color-box-shadow-offset-x`           | String | The box shadow offset x CSS custom property.     |
| `--color-box-shadow-offset-y`           | String | The box shadow offset y CSS custom property.     |
| `--color-box-shadow-spread`             | String | The box shadow spread CSS custom property.       |
| `--color-box-transition-duration`       | String | The transition duration.                         |
| `--color-box-transition-mode`           | String | The box transition mode CSS custom property.     |
| `--color-box-transition-property`       | String | The box transition property CSS custom property. |
| `--color-box-translate`                 | String | The box translate CSS custom property.           |

# mosaik-combo-item

ComboItem - An individual selectable option within a combo dropdown component.

Represents a single choice that users can select from within a combo box dropdown.
Supports visual states (selected, focused, disabled) and provides value binding
for form integration and selection management.

**Mixins:** Themeable, Rippleable, Disableable, Valueable, Variantable, Focusable, Labelable

## Example

```html
<!-- Simple text option -->
<mosaik-combo-item value="option1">Option 1</mosaik-combo-item>

<!-- Option with icon prefix -->
<mosaik-combo-item value="javascript">
  <mosaik-icon slot="prefix"></mosaik-icon>
  JavaScript
</mosaik-combo-item>

<!-- Option with description -->
<mosaik-combo-item value="premium">
  Premium Plan
  <mosaik-text slot="suffix" variant="caption">$29/month</mosaik-text>
</mosaik-combo-item>

<!-- Disabled option -->
<mosaik-combo-item value="unavailable" disabled>
  <mosaik-icon slot="prefix"></mosaik-icon>
  Premium Feature (Upgrade Required)
</mosaik-combo-item>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |              | readonly  | `string`                                     | Gets the `displayText` property.<br />Falls back to text content if label is empty. |
| `icon`         |              |           | `string`                                     | Gets or sets the `icon` property.                |
| `index`        |              | readonly  | `number`                                     | Gets the index of the item.                      |
| `isActive`     | `isActive`   |           | `boolean`                                    | Gets or sets the `isActive` property.            |
| `isChecked`    | `isChecked`  |           | `boolean`                                    | Gets or sets the `isChecked` property.           |
| `isFocused`    | `is-focused` |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isSelected`   | `isSelected` |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `label`        |              |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`       | `ripple`     |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `selected`     |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`              | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`                | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `deselected`   | `DeselectedEvent`      | Called when the element is deselected.           |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Called when the element is selected.             |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `icon`  | The icon slot.                                   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                            |
|-------------|----------------------------------------|
| `checkmark` | Checkmark indicator for selected state |
| `focusRing` | The focusRing part.                    |
| `ripple`    | The ripple part.                       |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--combo-item-background-color`          | String | The item background color CSS custom property.   |
| `--combo-item-border-color`              | String | The item border color CSS custom property.       |
| `--combo-item-border-radius`             | String | Border radius for option styling                 |
| `--combo-item-border-style`              | String | The item border style CSS custom property.       |
| `--combo-item-border-width`              | String | The item border width CSS custom property.       |
| `--combo-item-focus-ring-active-width`   | String | The item focus ring active width CSS custom property. |
| `--combo-item-focus-ring-color`          | String | The item focus ring color CSS custom property.   |
| `--combo-item-focus-ring-inward-offset`  | String | The item focus ring inward offset CSS custom property. |
| `--combo-item-focus-ring-outward-offset` | String | The item focus ring outward offset CSS custom property. |
| `--combo-item-font-family`               | String | The item font family CSS custom property.        |
| `--combo-item-font-letter-spacing`       | String | The item font letter spacing CSS custom property. |
| `--combo-item-font-line-height`          | String | The item font line height CSS custom property.   |
| `--combo-item-font-size`                 | String | The item font size CSS custom property.          |
| `--combo-item-font-text-decoration`      | String | The item font text decoration CSS custom property. |
| `--combo-item-font-text-transform`       | String | The item font text transform CSS custom property. |
| `--combo-item-font-weight`               | String | The item font weight CSS custom property.        |
| `--combo-item-foreground-color`          | String | The item foreground color CSS custom property.   |
| `--combo-item-gap`                       | String | The item gap CSS custom property.                |
| `--combo-item-padding-bottom`            | String | The item padding bottom CSS custom property.     |
| `--combo-item-padding-left`              | String | The item padding left CSS custom property.       |
| `--combo-item-padding-right`             | String | The item padding right CSS custom property.      |
| `--combo-item-padding-top`               | String | The item padding top CSS custom property.        |
| `--combo-item-ripple-color`              | String | The item ripple color CSS custom property.       |
| `--combo-item-ripple-duration`           | String | The item ripple duration CSS custom property.    |
| `--combo-item-shadow`                    | String | The item shadow CSS custom property.             |
| `--combo-item-shadow-blur`               | String | The item shadow blur CSS custom property.        |
| `--combo-item-shadow-color`              | String | The item shadow color CSS custom property.       |
| `--combo-item-shadow-offset-x`           | String | The item shadow offset x CSS custom property.    |
| `--combo-item-shadow-offset-y`           | String | The item shadow offset y CSS custom property.    |
| `--combo-item-shadow-spread`             | String | The item shadow spread CSS custom property.      |
| `--combo-item-transition-duration`       | String | The item transition duration CSS custom property. |
| `--combo-item-transition-mode`           | String | The item transition mode CSS custom property.    |
| `--combo-item-transition-property`       | String | The item transition property CSS custom property. |
| `--combo-item-translate`                 | String | The item translate CSS custom property.          |

# mosaik-combo

Combo - A dropdown selection component that combines text input with a list of selectable options.

Provides users with a searchable dropdown interface for selecting from predefined options
or entering custom values. Supports single and multiple selection modes with filtering,
autocomplete functionality, and customizable dropdown positioning.

**Mixins:** Slottable, DropDownable, Appearanceable, Variantable, Labelable, Clearable, Valueable, Disableable, Invalidable, Themeable

## Example

```html
<!-- Simple dropdown selection -->
<mosaik-combo>
  <mosaik-combo-item value="us">United States</mosaik-combo-item>
  <mosaik-combo-item value="ca">Canada</mosaik-combo-item>
  <mosaik-combo-item value="uk">United Kingdom</mosaik-combo-item>
</mosaik-combo>

<!-- Multi-select combo -->
<mosaik-combo selection-mode="multiple">
  <mosaik-combo-item value="html">HTML</mosaik-combo-item>
  <mosaik-combo-item value="css">CSS</mosaik-combo-item>
  <mosaik-combo-item value="js">JavaScript</mosaik-combo-item>
  <mosaik-combo-item value="react">React</mosaik-combo-item>
  <mosaik-combo-item value="angular">Angular</mosaik-combo-item>
</mosaik-combo>

<!-- Combo with grouped options and footer -->
<mosaik-combo>
  <div slot="dropdown-header">
    <mosaik-text variant="caption">Frontend Frameworks</mosaik-text>
  </div>
  <mosaik-combo-item value="react">React</mosaik-combo-item>
  <mosaik-combo-item value="angular">Angular</mosaik-combo-item>
  <mosaik-combo-item value="vue">Vue.js</mosaik-combo-item>
</mosaik-combo>
```

## Properties

| Property            | Attribute              | Modifiers | Type                                             | Description                                      |
|---------------------|------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance`           |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`           |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`           |                        |           | `IEventEmitter<IEventDetail>`                    | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`         |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                  |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`             |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`  | `drop-down-distance`   |           | `number`                                         | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`    | `drop-down-height`     |           | `CssLength \| undefined`                         | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight` | `drop-down-max-height` |           | `CssLength`                                      | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`  | `drop-down-max-width`  |           | `CssLength \| undefined`                         | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement` | `drop-down-placement`  |           | `Placement`                                      | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`  | `drop-down-skidding`   |           | `number`                                         | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen` | `drop-down-stays-open` |           | `boolean`                                        | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`  | `drop-down-strategy`   |           | `Strategy`                                       | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`     | `drop-down-width`      |           | `CssLength \| undefined`                         | Gets or sets the `dropDownWidth` property.       |
| `intl`              |                        | readonly  | `ComboElementIntl`                               | Returns the `intl` property.                     |
| `invalid`           | `invalid`              |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`       | `is-clearable`         |           | `boolean`                                        | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`    | `is-drop-down-open`    |           | `boolean`                                        | Gets or sets the `isDropDownOpen` property.      |
| `itemsChanged`      |                        | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `label`             |                        |           | `string`                                         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`                 |           | `string`                                         | The lang property indicates the language of the element's content. |
| `placeholder`       |                        |           | `string`                                         | Gets or sets the `placeholder` property.         |
| `required`          | `required`             |           | `boolean`                                        | Determines whether the component is required or not.<br />If `true`, the component will require a value when submitted. |
| `selectedItem`      |                        |           | `TItem \| null`                                  | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectedItems`     |                        | readonly  | `TItem[]`                                        | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectionChanged`  |                        | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `selectionMode`     | `selectionMode`        |           | `SelectionMode`                                  | Gets or sets the `selectionMode` property.       |
| `textAlign`         | `textAlign`            |           | `TextAlignment`                                  | Determines the text alignment of the component.  |
| `themeName`         |                        |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`                |           | `string[] \| null`                               | Gets or sets the `value` property.               |
| `variant`           | `variant`              |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation.<br />Also clears the selected items and resets the active state. |
| `close`                | `(): void`                                       | Closes the drop down.                            |
| `deselect`             | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `resetSelection`       | `(): void`                                       | Resets the current selection.                    |
| `select`               | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`          | `(): void`                                       | Select the first item.                           |
| `selectLast`           | `(): void`                                       | Select the last item.                            |
| `selectNext`           | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious`       | `(): void`                                       | Select the previous item before current selected item/index. |
| `toggle`               | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Fired when any property changes                  |
| `cleared`          | `ClearedEvent`          | Dispatched when the selection is cleared by user action |
| `connected`        | `ConnectedEvent`        | Fired when the element is connected to the DOM   |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `itemsChanged`     | `ItemsChangedEvent`     | Fired when the slotted items collection changes  |
| `selectionChanged` | `SelectionChangedEvent` | Dispatched when the selected value(s) change     |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default content area for combo items and options |
| `prefix` | Leading content before the input (icons, labels) |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Trailing content after the input (actions, indicators) |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `empty`      | The empty part.                                  |
| `icon`       | The icon part.                                   |
| `input`      | Text input field for typing and selection display |
| `popup`      | The popup part.                                  |
| `portal`     | The portal part.                                 |
| `projection` | The projection part.                             |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--combo-focus-ring-active-width`   | String | The focus ring active width CSS custom property. |
| `--combo-focus-ring-color`          | Color  | Focus ring color for accessibility               |
| `--combo-focus-ring-inward-offset`  | String | The focus ring inward offset CSS custom property. |
| `--combo-focus-ring-outward-offset` | String | The focus ring outward offset CSS custom property. |
| `--combo-font-family`               | String | The font family CSS custom property.             |
| `--combo-font-letter-spacing`       | String | The font letter spacing CSS custom property.     |
| `--combo-font-line-height`          | String | The font line height CSS custom property.        |
| `--combo-font-size`                 | String | The font size CSS custom property.               |
| `--combo-font-text-decoration`      | String | The font text decoration CSS custom property.    |
| `--combo-font-text-transform`       | String | The font text transform CSS custom property.     |
| `--combo-font-weight`               | String | The font weight CSS custom property.             |
| `--combo-foreground-color`          | String | The foreground color CSS custom property.        |
| `--combo-gap`                       | String | The gap CSS custom property.                     |
| `--combo-padding-bottom`            | String | The padding bottom CSS custom property.          |
| `--combo-padding-left`              | String | The padding left CSS custom property.            |
| `--combo-padding-right`             | String | The padding right CSS custom property.           |
| `--combo-padding-top`               | String | The padding top CSS custom property.             |
| `--combo-shadow`                    | String | The shadow CSS custom property.                  |
| `--combo-shadow-blur`               | String | The shadow blur CSS custom property.             |
| `--combo-shadow-color`              | String | The shadow color CSS custom property.            |
| `--combo-shadow-offset-x`           | String | The shadow offset x CSS custom property.         |
| `--combo-shadow-offset-y`           | String | The shadow offset y CSS custom property.         |
| `--combo-shadow-spread`             | String | The shadow spread CSS custom property.           |
| `--combo-transition-duration`       | String | The transition duration CSS custom property.     |
| `--combo-transition-mode`           | String | The transition mode CSS custom property.         |
| `--combo-transition-property`       | String | The transition property CSS custom property.     |
| `--combo-translate`                 | String | The translate CSS custom property.               |

# mosaik-comment

Comment - A user interface component for displaying and interacting with comments.

**Mixins:** Themeable, TextFormattable

## Examples

Basic usage with slotted content:

```html
<mosaik-comment>
  <span slot="author">John Doe</span>
  <span slot="at">2 hours ago</span>
  <span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</mosaik-comment>
```

With avatar and actions:

```html
<mosaik-comment>
  <mosaik-avatar slot="avatar"></mosaik-avatar>
  <span slot="author">Jane Smith</span>
  <span slot="at">Yesterday</span>
  <span slot="content">This is a reply to your comment.</span>
</mosaik-comment>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `at`           |           |           | `string`                                     | Gets or sets the `at` property.                  |
| `author`       |           |           | `string`                                     | Gets or sets the `author` property.              |
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |           |           | `string`                                     | Gets or sets the `content` property.             |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default slot.                                |
| `actions` | The actions slot.                                |
| `at`      | The at slot.                                     |
| `author`  | The author slot.                                 |
| `avatar`  | The avatar slot.                                 |
| `content` | The content slot.                                |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `actions`    | The actions part.    |
| `at`         | The at part.         |
| `author`     | The author part.     |
| `avatar`     | The avatar part.     |
| `content`    | The content part.    |
| `inner`      | The inner part.      |
| `innerStack` | The innerStack part. |
| `nested`     | The nested part.     |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--comment-font-family`          | String | The font family CSS custom property.          |
| `--comment-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--comment-font-line-height`     | String | The font line height CSS custom property.     |
| `--comment-font-size`            | String | The font size CSS custom property.            |
| `--comment-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--comment-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--comment-font-weight`          | String | The font weight CSS custom property.          |
| `--comment-foreground-color`     | String | The foreground color CSS custom property.     |
| `--comment-gap`                  | String | The gap CSS custom property.                  |
| `--comment-inner-gap`            | String | The inner gap CSS custom property.            |
| `--comment-nested-indent`        | String | The nested indent CSS custom property.        |
| `--comment-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--comment-padding-left`         | String | The padding left CSS custom property.         |
| `--comment-padding-right`        | String | The padding right CSS custom property.        |
| `--comment-padding-top`          | String | The padding top CSS custom property.          |
| `--comment-shadow`               | String | The shadow CSS custom property.               |
| `--comment-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--comment-shadow-color`         | String | The shadow color CSS custom property.         |
| `--comment-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--comment-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--comment-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--comment-transition-duration`  | String | The transition duration CSS custom property.  |
| `--comment-transition-mode`      | String | The transition mode CSS custom property.      |
| `--comment-transition-property`  | String | The transition property CSS custom property.  |
| `--comment-translate`            | String | The translate CSS custom property.            |

# mosaik-compound-button

CompoundButton - An enhanced button component with hierarchical content support for complex interactions.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic compound button with label:

```html
<mosaik-compound-button label="Settings"></mosaik-compound-button>
```

Navigation compound button with chevron:

```html
<mosaik-compound-button label="Account Settings"
                        is-navigation
                        variant="primary"></mosaik-compound-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isNavigation`               | `is-navigation`                |           | `boolean`                                    | Gets or sets the `isNavigation` property.        |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `subLabel`                   |                                |           | `string`                                     | Gets or sets the `subLabel` property.            |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
| `label`    | Primary text content area for main button labeling |
| `overlay`  | Overlay content area for badges, notifications, or status indicators |
| `prefix`   | Leading content area displayed before the main label and icon |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `subLabel` | Secondary text content area for descriptions or additional contextual information |
| `suffix`   | Trailing content area displayed after all main content |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `button`       | The main button element container                |
| `focusRing`    | The focus indicator ring for keyboard navigation accessibility |
| `icon`         | The icon display area within the button          |
| `innerStack`   | The internal stack layout container for organizing content |
| `label`        | The primary text label display area              |
| `progressRing` | The busy state progress indicator                |
| `ripple`       | The touch feedback ripple effect container       |
| `subLabel`     | The secondary text label display area for descriptions |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--compound-button-background-color`          | String | The background fill color                        |
| `--compound-button-border-color`              | String | The border outline color                         |
| `--compound-button-border-radius`             | String | The corner rounding radius                       |
| `--compound-button-border-style`              | String | The border line style                            |
| `--compound-button-border-width`              | String | The border thickness                             |
| `--compound-button-focus-ring-active-width`   | String | The focus ring width when active (from focusRing mixin) |
| `--compound-button-focus-ring-color`          | String | The focus ring color (from focusRing mixin)      |
| `--compound-button-focus-ring-inward-offset`  | String | The focus ring inward offset (from focusRing mixin) |
| `--compound-button-focus-ring-outward-offset` | String | The focus ring outward offset (from focusRing mixin) |
| `--compound-button-font-family`               | String | The font family for button text content          |
| `--compound-button-font-letter-spacing`       | String | The letter spacing for button text               |
| `--compound-button-font-line-height`          | String | The line height for button text                  |
| `--compound-button-font-size`                 | String | The font size for primary button text            |
| `--compound-button-font-text-decoration`      | String | The text decoration style for button text        |
| `--compound-button-font-text-transform`       | String | The text transformation style for button text    |
| `--compound-button-font-weight`               | String | The font weight for button text                  |
| `--compound-button-foreground-color`          | String | The text and icon color                          |
| `--compound-button-gap`                       | String | The spacing between button content elements      |
| `--compound-button-height`                    | String | The button height                                |
| `--compound-button-icon-min-height`           | String | The minimum height for icon display area         |
| `--compound-button-icon-min-width`            | String | The minimum width for icon display area          |
| `--compound-button-min-height`                | String | The minimum button height                        |
| `--compound-button-min-width`                 | String | The minimum button width                         |
| `--compound-button-padding-bottom`            | String | The bottom padding inside the button             |
| `--compound-button-padding-left`              | String | The left padding inside the button               |
| `--compound-button-padding-right`             | String | The right padding inside the button              |
| `--compound-button-padding-top`               | String | The top padding inside the button                |
| `--compound-button-progress-ring-width`       | String | The button progress ring width CSS custom property. |
| `--compound-button-ripple-color`              | String | The ripple effect color (from ripple mixin)      |
| `--compound-button-ripple-duration`           | String | The ripple effect animation duration (from ripple mixin) |
| `--compound-button-shadow`                    | String | The drop shadow or elevation effect              |
| `--compound-button-shadow-blur`               | String | The button shadow blur CSS custom property.      |
| `--compound-button-shadow-color`              | String | The button shadow color CSS custom property.     |
| `--compound-button-shadow-offset-x`           | String | The button shadow offset x CSS custom property.  |
| `--compound-button-shadow-offset-y`           | String | The button shadow offset y CSS custom property.  |
| `--compound-button-shadow-spread`             | String | The button shadow spread CSS custom property.    |
| `--compound-button-transition-duration`       | String | The duration of hover and focus transitions      |
| `--compound-button-transition-mode`           | String | The timing function for transitions              |
| `--compound-button-transition-property`       | String | The CSS properties to animate during transitions |
| `--compound-button-translate`                 | String | The transform translation offset                 |
| `--compound-button-width`                     | String | The button width                                 |

# mosaik-content

Content - A slot observer that detects and reports content presence changes.

**Mixins:** Themeable, Slottable

## Examples

Basic usage with conditional styling:

```html
<mosaik-content id="myContent">
  <p>Some content here</p>
</mosaik-content>
<style>
  mosaik-content:not([has-content]) {
    display: none;
  }
</style>
```

Listening to content changes:

```html
<mosaik-content id="wrapper"></mosaik-content>
<script>
  const wrapper = document.querySelector('#wrapper');
  wrapper.addEventListener('contentChanged', (e) => {
    console.log('Has content:', e.detail.hasContent);
  });
</script>
```

Dynamic content with placeholder:

```html
<div class="container">
  <mosaik-content id="dynamicContent"></mosaik-content>
  <div class="placeholder" hidden>No content available</div>
</div>
<script>
  const content = document.querySelector('#dynamicContent');
  const placeholder = document.querySelector('.placeholder');
  content.addEventListener('contentChanged', (e) => {
    placeholder.hidden = e.detail.hasContent;
  });
</script>
```

## Properties

| Property         | Attribute    | Modifiers | Type                                         | Description                                      |
|------------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `contentChanged` |              | readonly  | `IEventEmitter<IContentChangedEventDetail>`  | Called when the content changes.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`            | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasContent`     | `hasContent` |           | `boolean`                                    | Gets or sets the `hasContent` property.          |
| `lang`           | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`      |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `contentChanged` | `ContentChangedEvent`  | Fired when the content presence changes          |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot for any child content   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--content-font-family`          | String | The font family CSS custom property.          |
| `--content-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--content-font-line-height`     | String | The font line height CSS custom property.     |
| `--content-font-size`            | String | The font size CSS custom property.            |
| `--content-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--content-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--content-font-weight`          | String | The font weight CSS custom property.          |
| `--content-gap`                  | String | The gap CSS custom property.                  |
| `--content-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--content-padding-left`         | String | The padding left CSS custom property.         |
| `--content-padding-right`        | String | The padding right CSS custom property.        |
| `--content-padding-top`          | String | The padding top CSS custom property.          |
| `--content-shadow`               | String | The shadow CSS custom property.               |
| `--content-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--content-shadow-color`         | String | The shadow color CSS custom property.         |
| `--content-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--content-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--content-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--content-transition-duration`  | String | The transition duration CSS custom property.  |
| `--content-transition-mode`      | String | The transition mode CSS custom property.      |
| `--content-transition-property`  | String | The transition property CSS custom property.  |
| `--content-translate`            | String | The translate CSS custom property.            |

# mosaik-cookies-consent

CookiesConsent - A configurable notification banner for managing user cookie consent and privacy preferences.

**Mixins:** Themeable, Animatable, Elevatable

## Examples

Basic cookie consent banner (shows by default):

```html
<mosaik-cookies-consent acceptable dismissable></mosaik-cookies-consent>
```

Cookie consent with only accept button:

```html
<mosaik-cookies-consent acceptable></mosaik-cookies-consent>
```

Hidden after user has already accepted:

```html
<mosaik-cookies-consent
  acceptable
  dismissable
  has-accepted-cookies>
</mosaik-cookies-consent>
```

With elevated appearance:

```html
<mosaik-cookies-consent
  acceptable
  dismissable
  elevation="bold">
</mosaik-cookies-consent>
```

With custom action buttons:

```html
<mosaik-cookies-consent>
  <mosaik-button slot="actions" variant="secondary"><span slot="label">Learn More</span></mosaik-button>
  <mosaik-button slot="actions" variant="primary"><span slot="label">Accept All</span></mosaik-button>
</mosaik-cookies-consent>
```

## Properties

| Property             | Attribute            | Modifiers | Type                                         | Description                                      |
|----------------------|----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `acceptable`         | `acceptable`         |           | `boolean`                                    | Gets or sets the `acceptable` property.<br />Controls whether the accept button is displayed in the consent banner.<br />The default value is false. |
| `accepted`           |                      | readonly  | `IEventEmitter<IEventDetail>`                | Called when the user accepts the cookies disclaimer.<br />Provides reference to `IEventDetail` as event detail. |
| `animationTarget`    |                      | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`            |                      | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`          |                      | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`                |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`       |                      | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dismissable`        | `dismissable`        |           | `boolean`                                    | Gets or sets the `dismissable` property.<br />Controls whether the dismiss button is displayed in the consent banner.<br />The default value is false. |
| `dismissed`          |                      | readonly  | `IEventEmitter<IEventDetail>`                | Called when the user dismisses the cookies disclaimer.<br />Provides reference to `IEventDetail` as event detail. |
| `elevation`          | `elevation`          |           | `ElevationWeight`                            | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `enter`              | `enter`              |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`               | `exit`               |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `hasAcceptedCookies` | `hasAcceptedCookies` |           | `boolean`                                    | Gets or sets the `hasAcceptedCookies` property.<br />Indicates whether the user has already accepted the cookies disclaimer.<br />When true, the consent banner is hidden. The default value is false. |
| `intl`               |                      | readonly  | `CookiesConsentElementIntl`                  | Returns the `intl` property.<br />Provides access to the internationalization controller for localized messages. |
| `lang`               | `lang`               |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`          |                      |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `(): Promise<boolean>`                           | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `(): Promise<boolean>`                           | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `cookiesAccepted`  | `CookiesAcceptedEvent`  | Fired when the user accepts the cookies disclaimer by clicking the accept button |
| `cookiesDismissed` | `CookiesDismissedEvent` | Fired when the user dismisses the cookies disclaimer by clicking the dismiss button |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | Custom action buttons to override or extend the default accept/dismiss buttons |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                                      |
|----------|--------------------------------------------------|
| `banner` | The banner container element displaying the cookie consent message |

## CSS Custom Properties

| Property                     | Type   | Description                                      |
|------------------------------|--------|--------------------------------------------------|
| `--cookies-consent-bottom`   | String | The distance from the bottom edge of the viewport |
| `--cookies-consent-left`     | String | The distance from the left edge of the viewport  |
| `--cookies-consent-margin`   | String | The outer spacing around the consent banner      |
| `--cookies-consent-position` | String | The positioning context for the consent banner   |
| `--cookies-consent-right`    | String | The distance from the right edge of the viewport |
| `--cookies-consent-width`    | String | The width of the consent banner                  |
| `--cookies-consent-z-index`  | String | The stacking order above other page content      |

# mosaik-data-list

Data List - A structured list component for displaying tabular data with configurable columns.

**Mixins:** Themeable, Disableable

## Examples

Basic data list with item definitions:

```html
<mosaik-data-list id="userList"></mosaik-data-list>
<script>
  const list = document.getElementById('userList');
  list.itemDefinitions = [
    { key: 'name', path: 'name' },
    { key: 'email', path: 'email' },
    { key: 'role', path: 'role' }
  ];
  list.source = [
    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
  ];
</script>
```

Data list with alternating rows:

```html
<mosaik-data-list alternating id="products"></mosaik-data-list>
<script>
  const list = document.getElementById('products');
  list.itemDefinitions = [
    { key: 'sku', path: 'sku' },
    { key: 'product', path: 'name' },
    { key: 'price', path: 'price' }
  ];
  list.source = productData;
</script>
```

## Properties

| Property          | Attribute     | Modifiers | Type                                         | Description                                      |
|-------------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alternating`     | `alternating` |           | `boolean`                                    | Gets or sets the `alternating` property.         |
| `changed`         |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `itemDefinitions` |               |           | `IDataListItemDefinition[]`                  | Gets or sets the `itemDefinitions` property.     |
| `lang`            | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `source`          |               |           | `TSource[]`                                  | Gets or sets the `source` property.              |
| `themeName`       |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when data list properties change           |
| `connected`    | `ConnectedEvent`       | Fired when the data list is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                      |
|--------|----------------------------------|
| `list` | The inner list container element |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--data-list-font-family`          | String | The list font family CSS custom property.        |
| `--data-list-font-letter-spacing`  | String | The list font letter spacing CSS custom property. |
| `--data-list-font-line-height`     | String | The list font line height CSS custom property.   |
| `--data-list-font-size`            | String | The list font size CSS custom property.          |
| `--data-list-font-text-decoration` | String | The list font text decoration CSS custom property. |
| `--data-list-font-text-transform`  | String | The list font text transform CSS custom property. |
| `--data-list-font-weight`          | String | The list font weight CSS custom property.        |
| `--data-list-gap`                  | String | The list gap CSS custom property.                |
| `--data-list-padding-bottom`       | String | The list padding bottom CSS custom property.     |
| `--data-list-padding-left`         | String | The list padding left CSS custom property.       |
| `--data-list-padding-right`        | String | The list padding right CSS custom property.      |
| `--data-list-padding-top`          | String | The list padding top CSS custom property.        |
| `--data-list-shadow`               | String | The list shadow CSS custom property.             |
| `--data-list-shadow-blur`          | String | The list shadow blur CSS custom property.        |
| `--data-list-shadow-color`         | String | The list shadow color CSS custom property.       |
| `--data-list-shadow-offset-x`      | String | The list shadow offset x CSS custom property.    |
| `--data-list-shadow-offset-y`      | String | The list shadow offset y CSS custom property.    |
| `--data-list-shadow-spread`        | String | The list shadow spread CSS custom property.      |
| `--data-list-transition-duration`  | String | The list transition duration CSS custom property. |
| `--data-list-transition-mode`      | String | The list transition mode CSS custom property.    |
| `--data-list-transition-property`  | String | The list transition property CSS custom property. |
| `--data-list-translate`            | String | The list translate CSS custom property.          |

# mosaik-data-table

DataTable - A comprehensive data presentation component for displaying structured information in rows and columns.

**Mixins:** Themeable, Disableable

## Example

```html
<!-- Data table with auto-generated columns -->
<mosaik-data-table id="userTable" auto-generate-columns></mosaik-data-table>
<script>
  document.getElementById('userTable').source = [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
  ];
</script>

<!-- Data table with alternating rows and custom columns -->
<mosaik-data-table id="productTable" alternating></mosaik-data-table>
<script>
  const table = document.getElementById('productTable');
  table.columnDefinitions = [
    { key: 'sku', header: 'SKU' },
    { key: 'name', header: 'Product' },
    { key: 'price', header: 'Price' }
  ];
  table.source = productData;
</script>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alternating`         | `alternating`         |           | `boolean`                                    | Gets or sets the `alternating` property.         |
| `autoGenerateColumns` | `autoGenerateColumns` |           | `boolean`                                    | Gets or sets the `autoGenerateColumns` property. |
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columnDefinitions`   |                       |           | `IDataTableColumnDefinition[]`               | Gets or sets the `columnDefinitions` property.   |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`            | `disabled`            |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`                | `lang`                |           | `string`                                     | The lang property indicates the language of the element's content. |
| `sorted`              | `sorted`              | readonly  | `boolean`                                    | Gets a `boolean` that indicates the table header is sorted or not.<br />Returns `true` if the table header is sorted, otherwise `false`. |
| `sortedSource`        |                       | readonly  | `object[]`                                   |                                                  |
| `source`              |                       |           | `TSource[]`                                  | Gets or sets the `source` property.              |
| `themeName`           |                       |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--data-table-font-family`          | String | The table font family CSS custom property.       |
| `--data-table-font-letter-spacing`  | String | The table font letter spacing CSS custom property. |
| `--data-table-font-line-height`     | String | The table font line height CSS custom property.  |
| `--data-table-font-size`            | String | The table font size CSS custom property.         |
| `--data-table-font-text-decoration` | String | The table font text decoration CSS custom property. |
| `--data-table-font-text-transform`  | String | The table font text transform CSS custom property. |
| `--data-table-font-weight`          | String | The table font weight CSS custom property.       |
| `--data-table-gap`                  | String | The table gap CSS custom property.               |
| `--data-table-padding-bottom`       | String | The table padding bottom CSS custom property.    |
| `--data-table-padding-left`         | String | The table padding left CSS custom property.      |
| `--data-table-padding-right`        | String | The table padding right CSS custom property.     |
| `--data-table-padding-top`          | String | The table padding top CSS custom property.       |
| `--data-table-shadow`               | String | The table shadow CSS custom property.            |
| `--data-table-shadow-blur`          | String | The table shadow blur CSS custom property.       |
| `--data-table-shadow-color`         | String | The table shadow color CSS custom property.      |
| `--data-table-shadow-offset-x`      | String | The table shadow offset x CSS custom property.   |
| `--data-table-shadow-offset-y`      | String | The table shadow offset y CSS custom property.   |
| `--data-table-shadow-spread`        | String | The table shadow spread CSS custom property.     |
| `--data-table-transition-duration`  | String | The table transition duration CSS custom property. |
| `--data-table-transition-mode`      | String | The table transition mode CSS custom property.   |
| `--data-table-transition-property`  | String | The table transition property CSS custom property. |
| `--data-table-translate`            | String | The table translate CSS custom property.         |

# DateBoxElement - Date selection input

## Description
The DateBox component provides an input field for selecting dates with integrated calendar picker, date validation, formatting, and localization support. Features include calendar popup, min/max date constraints, custom date formats, locale-aware display, keyboard navigation, and accessibility support.

## Element
- **Tag**: `mosaik-datebox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the input
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `prefix` - Prefix container
- `inner` - Inner wrapper
- `input` - The date input field
- `suffix` - Suffix container
- `calendar` - Calendar popup

## Examples

### Basic date input
```html
<mosaik-datebox label="Birth Date"></mosaik-datebox>
```

### With min/max constraints
```html
<mosaik-datebox 
    label="Appointment Date" 
    min="2024-01-01" 
    max="2024-12-31">
</mosaik-datebox>
```

### With custom format
```html
<mosaik-datebox 
    label="Event Date" 
    format="MM/DD/YYYY">
</mosaik-datebox>
```

# DateTimeBoxElement - Combined date and time picker

## Description
The DateTimeBox component provides an input field for selecting both date and time values with integrated pickers, validation, and formatting. Combines date picker functionality with time selection, supports various datetime formats, includes timezone handling, provides min/max constraints, and offers keyboard navigation.

## Element
- **Tag**: `mosaik-datetimebox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the input
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `prefix` - Prefix container
- `inner` - Inner wrapper
- `input` - The datetime input field
- `suffix` - Suffix container
- `picker` - DateTime picker popup

## Examples

### Basic datetime input
```html
<mosaik-datetimebox label="Meeting Time"></mosaik-datetimebox>
```

### With constraints
```html
<mosaik-datetimebox 
    label="Booking" 
    min="2024-01-01T09:00" 
    max="2024-12-31T17:00">
</mosaik-datetimebox>
```

### Custom format
```html
<mosaik-datetimebox 
    label="Event" 
    format="MM/DD/YYYY HH:mm">
</mosaik-datetimebox>
```

# mosaik-datebox

Date Box - A comprehensive date input control with calendar dropdown and flexible date selection capabilities.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Localeable, Invalidable, Variantable, Appearanceable, DropDownable, Labelable, Focusable

## Examples

Basic date box:

```html
<mosaik-datebox
  label="Birth Date"
  placeholder="Select a date">
</mosaik-datebox>
```

Date box with min/max range constraint:

```html
<mosaik-datebox
  label="Event Date"
  placeholder="Select event date"
  min-date="1900-01-01"
  max-date="2030-12-31">
</mosaik-datebox>
```

Date box with clearable option and primary variant:

```html
<mosaik-datebox
  label="Due Date"
  is-clearable
  variant="primary">
</mosaik-datebox>
```

## Properties

| Property               | Attribute              | Modifiers | Type                                         | Description                                      |
|------------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`           | `appearance`           |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`         | `autocomplete`         |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`            |                        |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `blackoutDates`        | `blackoutDates`        |           | `Date[]`                                     | Gets or sets the `blackoutDates` property.       |
| `changed`              |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`              |                        |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`            |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                  | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`             |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayDate`          |                        |           | `Date \| null`                               | Returns the `displayDate` property.<br />The `displayDate` property represents the initial date to display in the calendar. |
| `displayDateEnd`       |                        |           | `Date \| null`                               | Returns the `displayDateEnd` property.<br />The `displayDateEnd` property represents the end date to display in the calendar. |
| `displayDateStart`     |                        |           | `Date \| null`                               | Returns the `displayDateStart` property.<br />The `displayDateStart` property represents the start date to display in the calendar. |
| `displayValue`         |                        |           | `string`                                     | Gets or sets the `displayValue` property.        |
| `dropDownDistance`     | `drop-down-distance`   |           | `number`                                     | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`       | `drop-down-height`     |           | `CssLength \| undefined`                     | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight`    | `drop-down-max-height` |           | `CssLength`                                  | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`     | `drop-down-max-width`  |           | `CssLength \| undefined`                     | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement`    | `drop-down-placement`  |           | `Placement`                                  | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`     | `drop-down-skidding`   |           | `number`                                     | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen`    | `drop-down-stays-open` |           | `boolean`                                    | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`     | `drop-down-strategy`   |           | `Strategy`                                   | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`        | `drop-down-width`      |           | `CssLength \| undefined`                     | Gets or sets the `dropDownWidth` property.       |
| `firstDayOfWeek`       | `firstDayOfWeek`       |           | `DayOfWeek`                                  | Gets or sets the `firstDayOfWeek` property.      |
| `format`               | `format`               |           | `string`                                     | Gets or sets the `format` property.<br /><br />Supported date format specifiers:<br />- `d`   : Day of the month (1-31) without leading zero.<br />- `dd`  : Day of the month (01-31) with leading zero.<br />- `ddd` : Abbreviated name of the day of the week (e.g., Mon, Tue).<br />- `dddd`: Full name of the day of the week (e.g., Monday, Tuesday).<br />- `M`   : Month (1-12) without leading zero.<br />- `MM`  : Month (01-12) with leading zero.<br />- `MMM` : Abbreviated name of the month (e.g., Jan, Feb).<br />- `MMMM`: Full name of the month (e.g., January, February).<br />- `y`   : Year as the last two digits without leading zero (e.g., 9 for 2009).<br />- `yy`  : Year as the last two digits with leading zero (e.g., 09 for 2009).<br />- `yyy` : Year with a minimum of three digits (e.g., 009, 2009).<br />- `yyyy`: Year as a four-digit number (e.g., 2009).<br />- `-`   : Custom separator (e.g., hyphen).<br />- `/`   : Date separator (e.g., slash).<br />- `.`   : Custom separator (e.g., dot). |
| `formatter`            |                        |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`              | `invalid`              |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`          | `is-clearable`         |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`       | `is-drop-down-open`    |           | `boolean`                                    | Gets or sets the `isDropDownOpen` property.      |
| `isFocused`            | `is-focused`           |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isTodayHighlighted`   | `isTodayHighlighted`   |           | `boolean`                                    | Gets or sets the `isTodayHighlighted` property.  |
| `isWeekendHighlighted` | `isWeekendHighlighted` |           | `boolean`                                    | Gets or sets the `isWeekendHighlighted` property. |
| `label`                |                        |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                 | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`               |                        |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`        |                        |           | `CalendarMarkerHandler`                      | A handler that gets date and returns null or a tuple with circled marker data. See `CalendarMarkerData`. |
| `maxDate`              | `maxDate`              |           | `Date \| null`                               | Gets or sets the `maxDate` property.             |
| `minDate`              | `minDate`              |           | `Date \| null`                               | Gets or sets the `minDate` property.             |
| `name`                 | `name`                 |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`               |                        |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `placeholder`          | `placeholder`          |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`             | `readonly`             |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`             | `required`             |           | `boolean`                                    | Gets or sets the `required` property.            |
| `selectionMode`        | `selectionMode`        |           | `RangeSelectionMode`                         | Gets or sets the `selectionMode` property.       |
| `showAdjacent`         | `showAdjacent`         |           | `boolean`                                    | Gets or sets the `showAdjacent` property.        |
| `showWeekNumbers`      | `showWeekNumbers`      |           | `boolean`                                    | Gets or sets the `showWeekNumbers` property.     |
| `specialDates`         | `specialDates`         |           | `Date[]`                                     | Gets or sets the `specialDates` property.        |
| `state`                | `state`                |           | `InputState`                                 | Gets or sets the `state` property.               |
| `textAlign`            | `textAlign`            |           | `TextAlignment`                              | Determines the text alignment of the component.  |
| `themeName`            |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`                | `value`                |           | `Date \| null`                               | Gets or sets the `value` property.               |
| `values`               | `values`               |           | `Date[]`                                     | Gets or sets the `values` property.              |
| `variant`              | `variant`              |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                 | `view`                 |           | `CalendarView`                               | Gets or sets the `view` property.                |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       | Removes keyboard focus from the input.           |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `close`                 | `(): void`                                       | Closes the drop down.                            |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       | Sets focus on the input.                         |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                  | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `toggle`                | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the input value is cleared.           |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the input field.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input field.            |

## CSS Shadow Parts

| Part             | Description                            |
|------------------|----------------------------------------|
| `calendarButton` | The calendar dropdown toggle button.   |
| `clear`          | The clear part.                        |
| `focusRing`      | The focus ring indicator.              |
| `inner`          | The inner container wrapper.           |
| `input`          | The date input field.                  |
| `label`          | The floating label element.            |
| `picker`         | The picker part.                       |
| `popup`          | The floating calendar container.       |
| `portal`         | The portal container for the dropdown. |
| `prefix`         | The prefix content container.          |
| `suffix`         | The suffix content container.          |

## CSS Custom Properties

| Property                          | Type   | Description                                      |
|-----------------------------------|--------|--------------------------------------------------|
| `--date-box-background-color`     | Color  | The background color.                            |
| `--date-box-border-color`         | Color  | The border color.                                |
| `--date-box-border-radius`        | String | The border radius.                               |
| `--date-box-border-style`         | String | The border style.                                |
| `--date-box-border-width`         | String | The border width.                                |
| `--date-box-focus-ring-width`     | String | The box focus ring width CSS custom property.    |
| `--date-box-font-family`          | String | The font family.                                 |
| `--date-box-font-letter-spacing`  | String | The box font letter spacing CSS custom property. |
| `--date-box-font-line-height`     | String | The box font line height CSS custom property.    |
| `--date-box-font-size`            | String | The font size.                                   |
| `--date-box-font-text-decoration` | String | The box font text decoration CSS custom property. |
| `--date-box-font-text-transform`  | String | The box font text transform CSS custom property. |
| `--date-box-font-weight`          | String | The font weight.                                 |
| `--date-box-foreground-color`     | Color  | The foreground color.                            |
| `--date-box-gap`                  | String | The gap between elements.                        |
| `--date-box-height`               | String | The height.                                      |
| `--date-box-padding-bottom`       | String | The padding bottom.                              |
| `--date-box-padding-left`         | String | The padding left.                                |
| `--date-box-padding-right`        | String | The padding right.                               |
| `--date-box-padding-top`          | String | The padding top.                                 |
| `--date-box-shadow`               | String | The shadow.                                      |
| `--date-box-shadow-blur`          | String | The box shadow blur CSS custom property.         |
| `--date-box-shadow-color`         | String | The box shadow color CSS custom property.        |
| `--date-box-shadow-offset-x`      | String | The box shadow offset x CSS custom property.     |
| `--date-box-shadow-offset-y`      | String | The box shadow offset y CSS custom property.     |
| `--date-box-shadow-spread`        | String | The box shadow spread CSS custom property.       |
| `--date-box-transition-duration`  | String | The transition duration.                         |
| `--date-box-transition-mode`      | String | The box transition mode CSS custom property.     |
| `--date-box-transition-property`  | String | The box transition property CSS custom property. |
| `--date-box-translate`            | String | The box translate CSS custom property.           |

# mosaik-datetimebox

Date Time Box - A user interface component for selecting date and time values.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Localeable, Invalidable, Variantable, Appearanceable, DropDownable, Labelable, Focusable

## Examples

Basic date time picker:

```html
<mosaik-datetimebox placeholder="Select date and time" required></mosaik-datetimebox>
```

With custom format and view:

```html
<mosaik-datetimebox
  format="dd.MM.yyyy HH:mm"
  view="month">
</mosaik-datetimebox>
```

## Properties

| Property               | Attribute              | Modifiers | Type                                         | Description                                      |
|------------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`           | `appearance`           |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`         | `autocomplete`         |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`            |                        |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `blackoutDates`        | `blackoutDates`        |           | `Date[]`                                     | Gets or sets the `blackoutDates` property.       |
| `changed`              |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`              |                        |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`            |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                  | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`             |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayDate`          |                        |           | `Date \| null`                               | Returns the `displayDate` property.<br />The `displayDate` property represents the initial date to display in the calendar. |
| `displayDateEnd`       |                        |           | `Date \| null`                               | Returns the `displayDateEnd` property.<br />The `displayDateEnd` property represents the end date to display in the calendar. |
| `displayDateStart`     |                        |           | `Date \| null`                               | Returns the `displayDateStart` property.<br />The `displayDateStart` property represents the start date to display in the calendar. |
| `displayValue`         |                        |           | `string`                                     | Gets or sets the `displayValue` property.        |
| `dropDownDistance`     | `drop-down-distance`   |           | `number`                                     | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`       | `drop-down-height`     |           | `CssLength \| undefined`                     | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight`    | `drop-down-max-height` |           | `CssLength`                                  | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`     | `drop-down-max-width`  |           | `CssLength \| undefined`                     | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement`    | `drop-down-placement`  |           | `Placement`                                  | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`     | `drop-down-skidding`   |           | `number`                                     | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen`    | `drop-down-stays-open` |           | `boolean`                                    | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`     | `drop-down-strategy`   |           | `Strategy`                                   | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`        | `drop-down-width`      |           | `CssLength \| undefined`                     | Gets or sets the `dropDownWidth` property.       |
| `firstDayOfWeek`       | `firstDayOfWeek`       |           | `DayOfWeek`                                  | Gets or sets the `firstDayOfWeek` property.      |
| `format`               | `format`               |           | `string`                                     | Gets or sets the `format` property.<br /><br />Supported format specifiers:<br />- `d`   : Day of the month (1-31) without leading zero.<br />- `dd`  : Day of the month (01-31) with leading zero.<br />- `ddd` : Abbreviated name of the day of the week (e.g., Mon, Tue).<br />- `dddd`: Full name of the day of the week (e.g., Monday, Tuesday).<br />- `h`   : Hour (1-12) in 12-hour format without leading zero.<br />- `hh`  : Hour (01-12) in 12-hour format with leading zero.<br />- `H`   : Hour (0-23) in 24-hour format without leading zero.<br />- `HH`  : Hour (00-23) in 24-hour format with leading zero.<br />- `m`   : Minute (0-59) without leading zero.<br />- `mm`  : Minute (00-59) with leading zero.<br />- `M`   : Month (1-12) without leading zero.<br />- `MM`  : Month (01-12) with leading zero.<br />- `MMM` : Abbreviated name of the month (e.g., Jan, Feb).<br />- `MMMM`: Full name of the month (e.g., January, February).<br />- `s`   : Second (0-59) without leading zero.<br />- `ss`  : Second (00-59) with leading zero.<br />- `t`   : First character of the AM/PM designator (e.g., A or P).<br />- `tt`  : Full AM/PM designator (e.g., AM or PM).<br />- `y`   : Year as the last two digits without leading zero (e.g., 9 for 2009).<br />- `yy`  : Year as the last two digits with leading zero (e.g., 09 for 2009).<br />- `yyy` : Year with a minimum of three digits (e.g., 009, 2009).<br />- `yyyy`: Year as a four-digit number (e.g., 2009).<br />- `:`   : Time separator (e.g., colon).<br />- `/`   : Date separator (e.g., slash). |
| `formatter`            |                        |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`              | `invalid`              |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`          | `is-clearable`         |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`       | `is-drop-down-open`    |           | `boolean`                                    | Gets or sets the `isDropDownOpen` property.      |
| `isFocused`            | `is-focused`           |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isTodayHighlighted`   | `isTodayHighlighted`   |           | `boolean`                                    | Gets or sets the `isTodayHighlighted` property.  |
| `isWeekendHighlighted` | `isWeekendHighlighted` |           | `boolean`                                    | Gets or sets the `isWeekendHighlighted` property. |
| `label`                |                        |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                 | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`               |                        |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`        |                        |           | `CalendarMarkerHandler`                      | A handler that gets date and returns null or a tuple with circled marker data. See `CalendarMarkerData`. |
| `maxDate`              | `maxDate`              |           | `Date \| null`                               | Gets or sets the `maxDate` property.             |
| `minDate`              | `minDate`              |           | `Date \| null`                               | Gets or sets the `minDate` property.             |
| `name`                 | `name`                 |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`               |                        |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `placeholder`          | `placeholder`          |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`             | `readonly`             |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`             | `required`             |           | `boolean`                                    | Gets or sets the `required` property.            |
| `showAdjacent`         | `showAdjacent`         |           | `boolean`                                    | Gets or sets the `showAdjacent` property.        |
| `showWeekNumbers`      | `showWeekNumbers`      |           | `boolean`                                    | Gets or sets the `showWeekNumbers` property.     |
| `specialDates`         | `specialDates`         |           | `Date[]`                                     | Gets or sets the `specialDates` property.        |
| `state`                | `state`                |           | `InputState`                                 | Gets or sets the `state` property.               |
| `textAlign`            | `textAlign`            |           | `TextAlignment`                              | Determines the text alignment of the component.  |
| `themeName`            |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`                | `value`                |           | `Date \| null`                               | Gets or sets the `value` property.               |
| `values`               | `values`               |           | `Date[]`                                     | Gets or sets the `values` property.              |
| `variant`              | `variant`              |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                 | `view`                 |           | `CalendarView`                               | Gets or sets the `view` property.                |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       | Removes keyboard focus from the input.           |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `close`                 | `(): void`                                       | Closes the drop down.                            |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       | Sets focus on the input.                         |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                  | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `toggle`                | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | The prefix slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The suffix slot.                                 |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `calendar`  | The calendar part.  |
| `clear`     | The clear part.     |
| `focusRing` | The focusRing part. |
| `inner`     | The inner part.     |
| `input`     | The input part.     |
| `label`     | The label part.     |
| `picker`    | The picker part.    |
| `popup`     | The popup part.     |
| `portal`    | The portal part.    |
| `prefix`    | The prefix part.    |
| `suffix`    | The suffix part.    |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--date-time-box-background-color`     | String | The time box background color CSS custom property. |
| `--date-time-box-border-color`         | String | The time box border color CSS custom property.   |
| `--date-time-box-border-radius`        | String | The time box border radius CSS custom property.  |
| `--date-time-box-border-style`         | String | The time box border style CSS custom property.   |
| `--date-time-box-border-width`         | String | The time box border width CSS custom property.   |
| `--date-time-box-font-family`          | String | The time box font family CSS custom property.    |
| `--date-time-box-font-letter-spacing`  | String | The time box font letter spacing CSS custom property. |
| `--date-time-box-font-line-height`     | String | The time box font line height CSS custom property. |
| `--date-time-box-font-size`            | String | The time box font size CSS custom property.      |
| `--date-time-box-font-text-decoration` | String | The time box font text decoration CSS custom property. |
| `--date-time-box-font-text-transform`  | String | The time box font text transform CSS custom property. |
| `--date-time-box-font-weight`          | String | The time box font weight CSS custom property.    |
| `--date-time-box-foreground-color`     | String | The time box foreground color CSS custom property. |
| `--date-time-box-gap`                  | String | The time box gap CSS custom property.            |
| `--date-time-box-height`               | String | The time box height CSS custom property.         |
| `--date-time-box-padding-bottom`       | String | The time box padding bottom CSS custom property. |
| `--date-time-box-padding-left`         | String | The time box padding left CSS custom property.   |
| `--date-time-box-padding-right`        | String | The time box padding right CSS custom property.  |
| `--date-time-box-padding-top`          | String | The time box padding top CSS custom property.    |
| `--date-time-box-shadow`               | String | The time box shadow CSS custom property.         |
| `--date-time-box-shadow-blur`          | String | The time box shadow blur CSS custom property.    |
| `--date-time-box-shadow-color`         | String | The time box shadow color CSS custom property.   |
| `--date-time-box-shadow-offset-x`      | String | The time box shadow offset x CSS custom property. |
| `--date-time-box-shadow-offset-y`      | String | The time box shadow offset y CSS custom property. |
| `--date-time-box-shadow-spread`        | String | The time box shadow spread CSS custom property.  |
| `--date-time-box-transition-duration`  | String | The time box transition duration CSS custom property. |
| `--date-time-box-transition-mode`      | String | The time box transition mode CSS custom property. |
| `--date-time-box-transition-property`  | String | The time box transition property CSS custom property. |
| `--date-time-box-translate`            | String | The time box translate CSS custom property.      |

# mosaik-designer-canvas

DesignerCanvas - The navigable spatial interaction surface around the frame.

**Mixins:** Themeable

## Examples

Pannable and zoomable canvas with a centered artboard:

```html
<mosaik-designer-canvas>
  <mosaik-designer-frame></mosaik-designer-frame>
</mosaik-designer-canvas>
```

Canvas with custom zoom bounds:

```html
<mosaik-designer-canvas min-zoom="0.25" max-zoom="4">
  <mosaik-designer-frame></mosaik-designer-frame>
</mosaik-designer-canvas>
```

## Properties

| Property          | Attribute         | Modifiers | Type                                         | Description                                      |
|-------------------|-------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`         |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`             |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`    |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `interactionMode` | `interactionMode` |           | `DesignerCanvasInteractionMode`              | Gets or sets the `interactionMode` property.<br />Controls whether drag-to-pan is enabled and which cursor is shown.<br /><br />- `pointer`: default cursor, no drag-to-pan.<br />- `pan`: grab cursor, drag-to-pan enabled. |
| `isPanning`       |                   | readonly  | `boolean`                                    | Returns whether the canvas is currently being panned. |
| `lang`            | `lang`            |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxZoom`         | `maxZoom`         |           | `number`                                     | Gets or sets the `maxZoom` property.             |
| `minZoom`         | `minZoom`         |           | `number`                                     | Gets or sets the `minZoom` property.             |
| `panX`            |                   | readonly  | `number`                                     | Returns the current pan X offset.                |
| `panY`            |                   | readonly  | `number`                                     | Returns the current pan Y offset.                |
| `themeName`       |                   |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `zoom`            | `zoom`            |           | `number`                                     | Gets or sets the `zoom` property.<br />The current zoom level (1 = 100%). |
| `zoomChanged`     |                   | readonly  | `IEventEmitter<number>`                      | Called when the zoom level changes.              |
| `zoomLevel`       |                   | readonly  | `string`                                     | Returns the current zoom level as percentage string. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `fitToFrame`    | `(): void`                                       | Fits the frame within the visible canvas area.   |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `panBy`         | `(deltaX: number, deltaY: number): void`         | Pans the canvas by a given delta.                |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetZoom`     | `(): void`                                       | Resets zoom and pan to defaults.                 |
| `setZoom`       | `(level: number): void`                          | Sets a specific zoom level.                      |
| `zoomIn`        | `(): void`                                       | Zooms in by the zoom factor.                     |
| `zoomOut`       | `(): void`                                       | Zooms out by the zoom factor.                    |

## Events

| Event          | Type                       | Description                                      |
|----------------|----------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent`     | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`           | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`        | Emitted when the element is disconnected from the DOM |
| `zoomChanged`  | `DesignerZoomChangedEvent` | Fired when the zoom level changes                |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for exactly one mosaik-designer-frame |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `transform` | The transform layer that applies pan and zoom transformations |
| `viewport`  | The viewport layer that clips and contains the transform surface |

## CSS Custom Properties

| Property                                | Type   | Description                                    |
|-----------------------------------------|--------|------------------------------------------------|
| `--designer-canvas-background-color`    | String | Background color of the canvas surface         |
| `--designer-canvas-dot-color`           | String | Color of the dotted grid background pattern    |
| `--designer-canvas-dot-size`            | String | Size of individual grid dots                   |
| `--designer-canvas-dot-spacing`         | String | Distance between grid dots                     |
| `--designer-canvas-transition-duration` | String | Transition duration for animated state changes |
| `--designer-canvas-transition-mode`     | String | Transition timing function                     |
| `--designer-canvas-transition-property` | String | Transition properties to animate               |

# mosaik-designer-content

DesignerContent - The main workspace container inside the designer.

**Mixins:** Themeable

## Examples

Content region wrapping a pannable canvas:

```html
<mosaik-designer-content>
  <mosaik-designer-canvas>
    <mosaik-designer-frame></mosaik-designer-frame>
  </mosaik-designer-canvas>
</mosaik-designer-content>
```

Content region with before and after extension slots:

```html
<mosaik-designer-content>
  <mosaik-stack slot="before-canvas" orientation="vertical">
    <mosaik-button label="Layers"></mosaik-button>
  </mosaik-stack>
  <mosaik-designer-canvas>
    <mosaik-designer-frame></mosaik-designer-frame>
  </mosaik-designer-canvas>
  <mosaik-stack slot="after-canvas" orientation="vertical">
    <mosaik-button label="Properties"></mosaik-button>
  </mosaik-stack>
</mosaik-designer-content>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name            | Description                                      |
|-----------------|--------------------------------------------------|
|                 | Default slot for the canvas (mosaik-designer-canvas) |
| `after-canvas`  | Generic extension slot after the canvas          |
| `before-canvas` | Generic extension slot before the canvas         |
| `style`         | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                 | Type   | Description                                    |
|------------------------------------------|--------|------------------------------------------------|
| `--designer-content-transition-duration` | String | Transition duration for animated state changes |
| `--designer-content-transition-mode`     | String | Transition timing function                     |
| `--designer-content-transition-property` | String | Transition properties to animate               |

# mosaik-designer-frame

DesignerFrame - The actual design surface rendered inside the canvas.

**Mixins:** Themeable

## Examples

Artboard surface for placing design layers:

```html
<mosaik-designer-frame>
  <div>Layer content here</div>
</mosaik-designer-frame>
```

Frame with visible bounds overlay for safe area guides:

```html
<mosaik-designer-frame show-bounds></mosaik-designer-frame>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `bounds`       |              |           | `IDesignerFrameBounds \| null`               | Gets or sets the `bounds` property.<br />Defines inner frame-local bounds such as safe margins or print bounds. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `showBounds`   | `showBounds` |           | `boolean`                                    | Gets or sets the `showBounds` property.<br />Controls whether configured bounds are visually rendered. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for layer content                   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `bounds`  | The bounds overlay region for visual guides      |
| `surface` | The visible frame surface that contains slotted content |

## CSS Custom Properties

| Property                               | Type   | Description                                    |
|----------------------------------------|--------|------------------------------------------------|
| `--designer-frame-background-color`    | String | Background color of the frame surface          |
| `--designer-frame-border-color`        | String | Border color of the frame                      |
| `--designer-frame-border-width`        | String | Border width of the frame                      |
| `--designer-frame-bounds-color`        | String | Color of the bounds overlay                    |
| `--designer-frame-bounds-font-size`    | String | Font size for bounds labels                    |
| `--designer-frame-shadow`              | String | Box shadow of the frame surface                |
| `--designer-frame-transition-duration` | String | Transition duration for animated state changes |
| `--designer-frame-transition-mode`     | String | Transition timing function                     |
| `--designer-frame-transition-property` | String | Transition properties to animate               |

# mosaik-designer

Designer - The root coordination component for the design environment.

**Mixins:** Themeable

## Examples

Minimal designer workspace with a canvas and frame:

```html
<mosaik-designer>
  <mosaik-designer-content>
    <mosaik-designer-canvas>
      <mosaik-designer-frame></mosaik-designer-frame>
    </mosaik-designer-canvas>
  </mosaik-designer-content>
</mosaik-designer>
```

Designer workspace with header toolbar and footer status bar:

```html
<mosaik-designer>
  <mosaik-stack slot="header" orientation="horizontal">
    <mosaik-button label="Save"></mosaik-button>
  </mosaik-stack>
  <mosaik-designer-content>
    <mosaik-designer-canvas>
      <mosaik-designer-frame></mosaik-designer-frame>
    </mosaik-designer-canvas>
  </mosaik-designer-content>
  <mosaik-text slot="footer" text="Ready"></mosaik-text>
</mosaik-designer>
```

## Properties

| Property         | Attribute | Modifiers | Type                                         | Description                                      |
|------------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `defaultLayers`  |           |           | `unknown[] \| null`                          | Gets or sets the `defaultLayers` property.<br />Used for uncontrolled mode. Sets the initial layers. |
| `dir`            | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `frameSize`      |           |           | `IDesignerFrameSize`                         | Gets or sets the `frameSize` property.<br />Defines the size of the inner design frame. |
| `lang`           | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `layers`         |           |           | `unknown[] \| null`                          | Gets or sets the `layers` property.<br />Used for controlled mode. When set, the designer uses this as the source of truth. |
| `layersChanged`  |           | readonly  | `IEventEmitter<unknown[]>`                   | Called when the layers change via user action.   |
| `mode`           | `mode`    |           | `DesignerMode`                               | Gets or sets the `mode` property.<br />Controls the selection behavior: 'none', 'single', or 'multiple'. |
| `resolvedLayers` |           | readonly  | `unknown[]`                                  | Returns the resolved layers, respecting controlled vs uncontrolled mode. |
| `themeName`      |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `updateLayers`  | `(newLayers: unknown[]): void`                   | Updates the layers from a user action.<br />In uncontrolled mode, updates internal state directly.<br />In controlled mode, emits the change for the parent to handle. |

## Events

| Event           | Type                         | Description                                      |
|-----------------|------------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent`       | Emitted when any attribute changes before update |
| `connected`     | `ConnectedEvent`             | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`          | Emitted when the element is disconnected from the DOM |
| `layersChanged` | `DesignerLayersChangedEvent` | Fired when the layers change via user action     |

## Slots

| Name             | Description                                      |
|------------------|--------------------------------------------------|
|                  | Default slot for the primary workspace structure (mosaik-designer-content) |
| `after-content`  | Generic extension slot after the main content area |
| `before-content` | Generic extension slot before the main content area |
| `footer`         | Generic extension slot for footer content such as status bars |
| `header`         | Generic extension slot for header content such as toolbars |
| `style`          | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                         | Type   | Description                                    |
|----------------------------------|--------|------------------------------------------------|
| `--designer-transition-duration` | String | Transition duration for animated state changes |
| `--designer-transition-mode`     | String | Transition timing function                     |
| `--designer-transition-property` | String | Transition properties to animate               |

# mosaik-dialog-actions

DialogActions - Container for action buttons within a dialog.

**Mixins:** Themeable, Slottable

## Example

Dialog actions with two buttons:

```html
<mosaik-dialog-actions slot="actions">
  <mosaik-button><span slot="label">Cancel</span></mosaik-button>
  <mosaik-button variant="primary"><span slot="label">Confirm</span></mosaik-button>
</mosaik-dialog-actions>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default content slot for action buttons.     |
| `prefix` | The prefix slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The suffix slot.                                 |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `innerStack` | The innerStack part. |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--dialog-actions-font-family`          | String | The actions font family CSS custom property.     |
| `--dialog-actions-font-letter-spacing`  | String | The actions font letter spacing CSS custom property. |
| `--dialog-actions-font-line-height`     | String | The actions font line height CSS custom property. |
| `--dialog-actions-font-size`            | String | The actions font size CSS custom property.       |
| `--dialog-actions-font-text-decoration` | String | The actions font text decoration CSS custom property. |
| `--dialog-actions-font-text-transform`  | String | The actions font text transform CSS custom property. |
| `--dialog-actions-font-weight`          | String | The actions font weight CSS custom property.     |
| `--dialog-actions-gap`                  | String | The actions gap CSS custom property.             |
| `--dialog-actions-padding-bottom`       | String | The actions padding bottom CSS custom property.  |
| `--dialog-actions-padding-left`         | String | The actions padding left CSS custom property.    |
| `--dialog-actions-padding-right`        | String | The actions padding right CSS custom property.   |
| `--dialog-actions-padding-top`          | String | The actions padding top CSS custom property.     |
| `--dialog-actions-shadow`               | String | The actions shadow CSS custom property.          |
| `--dialog-actions-shadow-blur`          | String | The actions shadow blur CSS custom property.     |
| `--dialog-actions-shadow-color`         | String | The actions shadow color CSS custom property.    |
| `--dialog-actions-shadow-offset-x`      | String | The actions shadow offset x CSS custom property. |
| `--dialog-actions-shadow-offset-y`      | String | The actions shadow offset y CSS custom property. |
| `--dialog-actions-shadow-spread`        | String | The actions shadow spread CSS custom property.   |
| `--dialog-actions-transition-duration`  | String | The actions transition duration CSS custom property. |
| `--dialog-actions-transition-mode`      | String | The actions transition mode CSS custom property. |
| `--dialog-actions-transition-property`  | String | The actions transition property CSS custom property. |
| `--dialog-actions-translate`            | String | The actions translate CSS custom property.       |

# mosaik-dialog-content

DialogContent - The main content area within a dialog.

**Mixins:** Themeable, TextFormattable, Slottable

## Example

Dialog content with text:

```html
<mosaik-dialog-content slot="content">
  <p>Are you sure you want to delete this item?</p>
</mosaik-dialog-content>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for content children.               |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description           |
|---------------|-----------------------|
| `contentText` | The contentText part. |
| `scroll`      | The scroll part.      |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--dialog-content-font-family`          | String | The content font family CSS custom property.     |
| `--dialog-content-font-letter-spacing`  | String | The content font letter spacing CSS custom property. |
| `--dialog-content-font-line-height`     | String | The content font line height CSS custom property. |
| `--dialog-content-font-size`            | String | The content font size CSS custom property.       |
| `--dialog-content-font-text-decoration` | String | The content font text decoration CSS custom property. |
| `--dialog-content-font-text-transform`  | String | The content font text transform CSS custom property. |
| `--dialog-content-font-weight`          | String | The content font weight CSS custom property.     |
| `--dialog-content-gap`                  | String | The content gap CSS custom property.             |
| `--dialog-content-padding-bottom`       | String | The content padding bottom CSS custom property.  |
| `--dialog-content-padding-left`         | String | The content padding left CSS custom property.    |
| `--dialog-content-padding-right`        | String | The content padding right CSS custom property.   |
| `--dialog-content-padding-top`          | String | The content padding top CSS custom property.     |
| `--dialog-content-shadow`               | String | The content shadow CSS custom property.          |
| `--dialog-content-shadow-blur`          | String | The content shadow blur CSS custom property.     |
| `--dialog-content-shadow-color`         | String | The content shadow color CSS custom property.    |
| `--dialog-content-shadow-offset-x`      | String | The content shadow offset x CSS custom property. |
| `--dialog-content-shadow-offset-y`      | String | The content shadow offset y CSS custom property. |
| `--dialog-content-shadow-spread`        | String | The content shadow spread CSS custom property.   |
| `--dialog-content-transition-duration`  | String | The content transition duration CSS custom property. |
| `--dialog-content-transition-mode`      | String | The content transition mode CSS custom property. |
| `--dialog-content-transition-property`  | String | The content transition property CSS custom property. |
| `--dialog-content-translate`            | String | The content translate CSS custom property.       |

# mosaik-dialog-footer

DialogFooter - The footer section within a dialog.

**Mixins:** Themeable, Slottable

## Example

Dialog footer with additional info:

```html
<mosaik-dialog-footer slot="footer">
  <small>This action cannot be undone.</small>
</mosaik-dialog-footer>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot.                        |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--dialog-footer-font-family`          | String | The footer font family CSS custom property.      |
| `--dialog-footer-font-letter-spacing`  | String | The footer font letter spacing CSS custom property. |
| `--dialog-footer-font-line-height`     | String | The footer font line height CSS custom property. |
| `--dialog-footer-font-size`            | String | The footer font size CSS custom property.        |
| `--dialog-footer-font-text-decoration` | String | The footer font text decoration CSS custom property. |
| `--dialog-footer-font-text-transform`  | String | The footer font text transform CSS custom property. |
| `--dialog-footer-font-weight`          | String | The footer font weight CSS custom property.      |
| `--dialog-footer-gap`                  | String | The footer gap CSS custom property.              |
| `--dialog-footer-padding-bottom`       | String | The footer padding bottom CSS custom property.   |
| `--dialog-footer-padding-left`         | String | The footer padding left CSS custom property.     |
| `--dialog-footer-padding-right`        | String | The footer padding right CSS custom property.    |
| `--dialog-footer-padding-top`          | String | The footer padding top CSS custom property.      |
| `--dialog-footer-shadow`               | String | The footer shadow CSS custom property.           |
| `--dialog-footer-shadow-blur`          | String | The footer shadow blur CSS custom property.      |
| `--dialog-footer-shadow-color`         | String | The footer shadow color CSS custom property.     |
| `--dialog-footer-shadow-offset-x`      | String | The footer shadow offset x CSS custom property.  |
| `--dialog-footer-shadow-offset-y`      | String | The footer shadow offset y CSS custom property.  |
| `--dialog-footer-shadow-spread`        | String | The footer shadow spread CSS custom property.    |
| `--dialog-footer-transition-duration`  | String | The footer transition duration CSS custom property. |
| `--dialog-footer-transition-mode`      | String | The footer transition mode CSS custom property.  |
| `--dialog-footer-transition-property`  | String | The footer transition property CSS custom property. |
| `--dialog-footer-translate`            | String | The footer translate CSS custom property.        |

# mosaik-dialog-header-sub-text

DialogHeaderSubText - The sub-heading or label within a dialog header.

**Mixins:** Themeable, TextFormattable

## Example

Sub-text inside dialog header:

```html
<mosaik-dialog-header slot="header">
  <mosaik-dialog-header-sub-text id="subTitle" slot="subHeader"></mosaik-dialog-header-sub-text>
</mosaik-dialog-header>
<script>
  document.getElementById('subTitle').text = 'Optional subtitle';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--dialog-header-sub-text-background-color`     | String | The header sub text background color CSS custom property. |
| `--dialog-header-sub-text-border-color`         | String | The header sub text border color CSS custom property. |
| `--dialog-header-sub-text-font-family`          | String | The header sub text font family CSS custom property. |
| `--dialog-header-sub-text-font-letter-spacing`  | String | The header sub text font letter spacing CSS custom property. |
| `--dialog-header-sub-text-font-line-height`     | String | The header sub text font line height CSS custom property. |
| `--dialog-header-sub-text-font-size`            | String | The header sub text font size CSS custom property. |
| `--dialog-header-sub-text-font-text-decoration` | String | The header sub text font text decoration CSS custom property. |
| `--dialog-header-sub-text-font-text-transform`  | String | The header sub text font text transform CSS custom property. |
| `--dialog-header-sub-text-font-weight`          | String | The header sub text font weight CSS custom property. |
| `--dialog-header-sub-text-foreground-color`     | String | The header sub text foreground color CSS custom property. |
| `--dialog-header-sub-text-gap`                  | String | The header sub text gap CSS custom property.     |
| `--dialog-header-sub-text-padding-bottom`       | String | The header sub text padding bottom CSS custom property. |
| `--dialog-header-sub-text-padding-left`         | String | The header sub text padding left CSS custom property. |
| `--dialog-header-sub-text-padding-right`        | String | The header sub text padding right CSS custom property. |
| `--dialog-header-sub-text-padding-top`          | String | The header sub text padding top CSS custom property. |
| `--dialog-header-sub-text-shadow`               | String | The header sub text shadow CSS custom property.  |
| `--dialog-header-sub-text-shadow-blur`          | String | The header sub text shadow blur CSS custom property. |
| `--dialog-header-sub-text-shadow-color`         | String | The header sub text shadow color CSS custom property. |
| `--dialog-header-sub-text-shadow-offset-x`      | String | The header sub text shadow offset x CSS custom property. |
| `--dialog-header-sub-text-shadow-offset-y`      | String | The header sub text shadow offset y CSS custom property. |
| `--dialog-header-sub-text-shadow-spread`        | String | The header sub text shadow spread CSS custom property. |
| `--dialog-header-sub-text-transition-duration`  | String | The header sub text transition duration CSS custom property. |
| `--dialog-header-sub-text-transition-mode`      | String | The header sub text transition mode CSS custom property. |
| `--dialog-header-sub-text-transition-property`  | String | The header sub text transition property CSS custom property. |
| `--dialog-header-sub-text-translate`            | String | The header sub text translate CSS custom property. |

# mosaik-dialog-header-text

DialogHeaderText - The main heading within a dialog header.

**Mixins:** Themeable, TextFormattable

## Example

Title text inside dialog header:

```html
<mosaik-dialog-header slot="header">
  <mosaik-dialog-header-text id="dialogTitle" slot="header"></mosaik-dialog-header-text>
</mosaik-dialog-header>
<script>
  document.getElementById('dialogTitle').text = 'Confirm Delete';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--dialog-header-text-background-color`     | String | The header text background color CSS custom property. |
| `--dialog-header-text-border-color`         | String | The header text border color CSS custom property. |
| `--dialog-header-text-font-family`          | String | The header text font family CSS custom property. |
| `--dialog-header-text-font-letter-spacing`  | String | The header text font letter spacing CSS custom property. |
| `--dialog-header-text-font-line-height`     | String | The header text font line height CSS custom property. |
| `--dialog-header-text-font-size`            | String | The header text font size CSS custom property.   |
| `--dialog-header-text-font-text-decoration` | String | The header text font text decoration CSS custom property. |
| `--dialog-header-text-font-text-transform`  | String | The header text font text transform CSS custom property. |
| `--dialog-header-text-font-weight`          | String | The header text font weight CSS custom property. |
| `--dialog-header-text-foreground-color`     | String | The header text foreground color CSS custom property. |
| `--dialog-header-text-gap`                  | String | The header text gap CSS custom property.         |
| `--dialog-header-text-padding-bottom`       | String | The header text padding bottom CSS custom property. |
| `--dialog-header-text-padding-left`         | String | The header text padding left CSS custom property. |
| `--dialog-header-text-padding-right`        | String | The header text padding right CSS custom property. |
| `--dialog-header-text-padding-top`          | String | The header text padding top CSS custom property. |
| `--dialog-header-text-shadow`               | String | The header text shadow CSS custom property.      |
| `--dialog-header-text-shadow-blur`          | String | The header text shadow blur CSS custom property. |
| `--dialog-header-text-shadow-color`         | String | The header text shadow color CSS custom property. |
| `--dialog-header-text-shadow-offset-x`      | String | The header text shadow offset x CSS custom property. |
| `--dialog-header-text-shadow-offset-y`      | String | The header text shadow offset y CSS custom property. |
| `--dialog-header-text-shadow-spread`        | String | The header text shadow spread CSS custom property. |
| `--dialog-header-text-transition-duration`  | String | The header text transition duration CSS custom property. |
| `--dialog-header-text-transition-mode`      | String | The header text transition mode CSS custom property. |
| `--dialog-header-text-transition-property`  | String | The header text transition property CSS custom property. |
| `--dialog-header-text-translate`            | String | The header text translate CSS custom property.   |

# mosaik-dialog-header

DialogHeader - The header section within a dialog containing title and sub-title.

**Mixins:** Themeable, TextFormattable, Slottable

## Example

Dialog header with slotted title elements:

```html
<mosaik-dialog-header slot="header">
  <mosaik-dialog-header-text slot="header"></mosaik-dialog-header-text>
  <mosaik-dialog-header-sub-text slot="subHeader"></mosaik-dialog-header-sub-text>
</mosaik-dialog-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subText`      |           |           | `string`                                     | Gets or sets the `subText` property.             |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate`      | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `header`    | The header slot.                                 |
| `prefix`    | The prefix slot.                                 |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | The subHeader slot.                              |
| `suffix`    | The suffix slot.                                 |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `heading` | The heading part. |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--dialog-header-font-family`          | String | The header font family CSS custom property.      |
| `--dialog-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--dialog-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--dialog-header-font-size`            | String | The header font size CSS custom property.        |
| `--dialog-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--dialog-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--dialog-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--dialog-header-gap`                  | String | The header gap CSS custom property.              |
| `--dialog-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--dialog-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--dialog-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--dialog-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--dialog-header-shadow`               | String | The header shadow CSS custom property.           |
| `--dialog-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--dialog-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--dialog-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--dialog-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--dialog-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--dialog-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--dialog-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--dialog-header-transition-property`  | String | The header transition property CSS custom property. |
| `--dialog-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-dialog

Dialog - A modal window component for displaying focused content and user interactions.

Creates modal dialogs that overlay the main content with focus management and backdrop interaction.
Supports draggable positioning, fullscreen mode, and structured content areas for headers, content, and actions.
Provides essential modal patterns for confirmations, forms, and detailed content presentation.

**Mixins:** Themeable, Animatable, Dimensionable, Elevatable, Appearanceable, Slottable, Openable, Closeable

## Examples

Confirmation dialog:

```html
<mosaik-dialog id="confirmDialog">
  <mosaik-dialog-header slot="header">
    <h2>Confirm Delete</h2>
  </mosaik-dialog-header>
  <mosaik-dialog-content slot="content">
    <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  </mosaik-dialog-content>
  <mosaik-dialog-actions slot="actions">
    <mosaik-button onclick="closeDialog()"><span slot="label">Cancel</span></mosaik-button>
    <mosaik-button variant="danger" onclick="confirmDelete()"><span slot="label">Delete</span></mosaik-button>
  </mosaik-dialog-actions>
</mosaik-dialog>
```

Draggable dialog:

```html
<mosaik-dialog is-draggable>
  <div slot="header"><h3>Add New User</h3></div>
  <div slot="content">
    <!-- form content -->
  </div>
  <div slot="actions">
    <mosaik-button variant="primary" onclick="saveUser()"><span slot="label">Save</span></mosaik-button>
  </div>
</mosaik-dialog>
```

Fullscreen dialog:

```html
<mosaik-dialog is-full-screen>
  <div slot="header"><h1>Settings</h1></div>
  <main slot="content">
    <!-- Full settings content -->
  </main>
</mosaik-dialog>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Default        | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|----------------|--------------------------------------------------|
| `animationTarget`     |                       | readonly  | `HTMLElement`                                |                | Gets the animation target element.<br />For the dialog, animations are applied to the root (dialog) template part instead of the host element. |
| `appearance`          | `appearance`          |           | `Appearance`                                 |                | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |                | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    |                | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    |                | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |                | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        |                | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              |                | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        |                | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dragging`            | `dragging`            |           | `boolean`                                    |                | Gets or sets the `dragging` property.            |
| `elevation`           | `elevation`           |           | `ElevationWeight`                            |                | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `enter`               | `enter`               |           |                                              | "fadeSlideIn"  | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`                | `exit`                |           |                                              | "fadeSlideOut" | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    |                | Gets or sets the `hasBackdrop` property.         |
| `height`              | `height`              |           | `CssLength`                                  |                | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `isDraggable`         | `isDraggable`         |           | `boolean`                                    |                | Gets or sets the `isDraggable` property.         |
| `isFullScreen`        | `isFullScreen`        |           | `boolean`                                    |                | Gets or sets the `isFullScreen` property.        |
| `isOpen`              | `isOpen`              |           | `boolean`                                    |                | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     |                | The lang property indicates the language of the element's content. |
| `offsetX`             | `offsetX`             |           | `number`                                     |                | Gets or sets the `offsetX` property.             |
| `offsetY`             | `offsetY`             |           | `number`                                     |                | Gets or sets the `offsetY` property.             |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |                | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    |                | Gets or sets the `pressEscapeToClose` property.  |
| `themeName`           |                       |           | `string`                                     |                | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`               | `width`               |           | `CssLength`                                  |                | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the `DialogElement`.                      |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`      | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the `DialogElement`.                       |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the overlay completes its close transition (isOpen becomes false) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the overlay completes its open transition (isOpen becomes true) |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content area for main dialog body        |
| `actions` | Action buttons and controls area                 |
| `footer`  | Dialog footer section for additional information |
| `header`  | Dialog header section for titles and controls    |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                           |
|-------------|---------------------------------------|
| `backdrop`  | The semi-transparent overlay backdrop |
| `elevation` | The elevation part.                   |
| `header`    | Header section container              |
| `root`      | The root part.                        |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--dialog-background-color`     | Color  | Background color of the dialog                |
| `--dialog-border-color`         | String | The border color CSS custom property.         |
| `--dialog-border-radius`        | String | Border radius for dialog corners              |
| `--dialog-border-style`         | String | The border style CSS custom property.         |
| `--dialog-border-width`         | String | The border width CSS custom property.         |
| `--dialog-divider-height`       | String | The divider height CSS custom property.       |
| `--dialog-font-family`          | String | The font family CSS custom property.          |
| `--dialog-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--dialog-font-line-height`     | String | The font line height CSS custom property.     |
| `--dialog-font-size`            | String | The font size CSS custom property.            |
| `--dialog-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--dialog-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--dialog-font-weight`          | String | The font weight CSS custom property.          |
| `--dialog-foreground-color`     | String | The foreground color CSS custom property.     |
| `--dialog-gap`                  | String | The gap CSS custom property.                  |
| `--dialog-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--dialog-padding-left`         | String | The padding left CSS custom property.         |
| `--dialog-padding-right`        | String | The padding right CSS custom property.        |
| `--dialog-padding-top`          | String | The padding top CSS custom property.          |
| `--dialog-shadow`               | String | The shadow CSS custom property.               |
| `--dialog-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--dialog-shadow-color`         | String | The shadow color CSS custom property.         |
| `--dialog-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--dialog-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--dialog-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--dialog-transition-duration`  | String | The transition duration CSS custom property.  |
| `--dialog-transition-mode`      | String | The transition mode CSS custom property.      |
| `--dialog-transition-property`  | String | The transition property CSS custom property.  |
| `--dialog-translate`            | String | The translate CSS custom property.            |

# mosaik-disclosure

Disclosure - A component that represents a disclosure widget for revealing or hiding additional content.

**Mixins:** Themeable

## Examples

Basic usage with summary attribute:

```html
<mosaik-disclosure summary="Additional Details">
  <mosaik-text text="This content is revealed when the summary is clicked."></mosaik-text>
</mosaik-disclosure>
```

With custom summary slot content:

```html
<mosaik-disclosure>
  <mosaik-button slot="summary" label="Show More" appearance="plain"></mosaik-button>
  <mosaik-text text="Detailed content that is hidden by default."></mosaik-text>
</mosaik-disclosure>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isExpanded`   | `isExpanded` |           | `boolean`                                    | Gets or sets the `isExpanded` property.          |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `summary`      | `summary`    |           | `string`                                     | Gets or sets the `summary` property.             |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hide`          | `(): void`                                       | Hide extra content.                              |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onToggle`      | `(): void`                                       | Update the aria attr and fire `toggle` event     |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `show`          | `(): void`                                       | Show extra content.                              |
| `toggle`        | `(): void`                                       | Toggle the current(expanded/collapsed) state.    |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default slot for placing the main content inside the disclosure. |
| `end`     | The slot for placing content at the end of the disclosure. |
| `start`   | The slot for placing content at the start of the disclosure. |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |
| `summary` | The slot for placing summary content that triggers the disclosure. |

## CSS Shadow Parts

| Part      | Description                                     |
|-----------|-------------------------------------------------|
| `details` | The part representing the details content area. |
| `summary` | The part representing the summary content area. |

## CSS Custom Properties

| Property                            | Type   | Description                                   |
|-------------------------------------|--------|-----------------------------------------------|
| `--disclosure-font-family`          | String | The font family CSS custom property.          |
| `--disclosure-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--disclosure-font-line-height`     | String | The font line height CSS custom property.     |
| `--disclosure-font-size`            | String | The font size CSS custom property.            |
| `--disclosure-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--disclosure-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--disclosure-font-weight`          | String | The font weight CSS custom property.          |
| `--disclosure-gap`                  | String | The gap CSS custom property.                  |
| `--disclosure-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--disclosure-padding-left`         | String | The padding left CSS custom property.         |
| `--disclosure-padding-right`        | String | The padding right CSS custom property.        |
| `--disclosure-padding-top`          | String | The padding top CSS custom property.          |
| `--disclosure-shadow`               | String | The shadow CSS custom property.               |
| `--disclosure-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--disclosure-shadow-color`         | String | The shadow color CSS custom property.         |
| `--disclosure-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--disclosure-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--disclosure-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--disclosure-transition-duration`  | String | The transition duration CSS custom property.  |
| `--disclosure-transition-mode`      | String | The transition mode CSS custom property.      |
| `--disclosure-transition-property`  | String | The transition property CSS custom property.  |
| `--disclosure-translate`            | String | The translate CSS custom property.            |

# mosaik-dismiss

Dismiss - A close or dismiss button component for dismissible UI elements.

**Mixins:** Themeable, Variantable, Appearanceable, Sizeable, Disableable, Focusable

## Examples

Basic dismiss button:

```html
<mosaik-dismiss></mosaik-dismiss>
```

Dismiss button with specific size:

```html
<mosaik-dismiss size="small"></mosaik-dismiss>
```

Dismiss button with variant:

```html
<mosaik-dismiss variant="error"></mosaik-dismiss>
```

Disabled dismiss button:

```html
<mosaik-dismiss disabled></mosaik-dismiss>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isFocused`    | `is-focused` |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`                 | `(): void`                                       |                                                  |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description              |
|---------|--------------------------|
| `close` | The close button element |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--dismiss-font-family`          | String | The font family CSS custom property.          |
| `--dismiss-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--dismiss-font-line-height`     | String | The font line height CSS custom property.     |
| `--dismiss-font-size`            | String | The font size CSS custom property.            |
| `--dismiss-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--dismiss-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--dismiss-font-weight`          | String | The font weight CSS custom property.          |
| `--dismiss-gap`                  | String | The gap CSS custom property.                  |
| `--dismiss-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--dismiss-padding-left`         | String | The padding left CSS custom property.         |
| `--dismiss-padding-right`        | String | The padding right CSS custom property.        |
| `--dismiss-padding-top`          | String | The padding top CSS custom property.          |
| `--dismiss-shadow`               | String | The shadow CSS custom property.               |
| `--dismiss-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--dismiss-shadow-color`         | String | The shadow color CSS custom property.         |
| `--dismiss-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--dismiss-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--dismiss-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--dismiss-transition-duration`  | String | The transition duration CSS custom property.  |
| `--dismiss-transition-mode`      | String | The transition mode CSS custom property.      |
| `--dismiss-transition-property`  | String | The transition property CSS custom property.  |
| `--dismiss-translate`            | String | The translate CSS custom property.            |

# mosaik-divider

Divider - A visual separator element that creates distinct sections within layouts.

**Mixins:** Themeable, Orientable

## Examples

Horizontal divider separating content sections:

```html
<div>Section 1</div>
<mosaik-divider></mosaik-divider>
<div>Section 2</div>
```

Vertical divider in navigation menu:

```html
<nav style="display: flex; align-items: center; gap: 1rem;">
  <a href="/home">Home</a>
  <mosaik-divider orientation="vertical"></mosaik-divider>
  <a href="/about">About</a>
  <mosaik-divider orientation="vertical"></mosaik-divider>
  <a href="/contact">Contact</a>
</nav>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`    | `thickness`   |           | `number \| undefined`                        | Gets or sets the thickness property.             |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                                    |
|--------|------------------------------------------------|
| `root` | The root container for the divider SVG element |

## CSS Custom Properties

| Property                         | Type   | Description                                      |
|----------------------------------|--------|--------------------------------------------------|
| `--divider-background-color`     | String | The background color of the divider line         |
| `--divider-border-color`         | String | The border color CSS custom property.            |
| `--divider-border-radius`        | String | The border radius CSS custom property.           |
| `--divider-border-style`         | String | The border style CSS custom property.            |
| `--divider-border-width`         | String | The border width CSS custom property.            |
| `--divider-font-family`          | String | The font family for divider labels (when applicable) |
| `--divider-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--divider-font-line-height`     | String | The font line height CSS custom property.        |
| `--divider-font-size`            | String | The font size for divider labels (when applicable) |
| `--divider-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--divider-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--divider-font-weight`          | String | The font weight for divider labels (when applicable) |
| `--divider-foreground-color`     | String | The foreground/stroke color of the divider line  |
| `--divider-gap`                  | String | The spacing gap around the divider element       |
| `--divider-padding-bottom`       | String | The bottom padding inside the divider container  |
| `--divider-padding-left`         | String | The left padding inside the divider container    |
| `--divider-padding-right`        | String | The right padding inside the divider container   |
| `--divider-padding-top`          | String | The top padding inside the divider container     |
| `--divider-shadow`               | String | The shadow effect for the divider element        |
| `--divider-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--divider-shadow-color`         | String | The shadow color CSS custom property.            |
| `--divider-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--divider-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--divider-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--divider-thickness`            | String | The thickness of the divider line in pixels      |
| `--divider-transition-duration`  | String | The duration of transition animations            |
| `--divider-transition-mode`      | String | The timing function for transition animations    |
| `--divider-transition-property`  | String | The CSS properties to animate during transitions |
| `--divider-translate`            | String | The translate CSS custom property.               |

# mosaik-dock-panel

Dock Panel - A flexible layout container for docking child elements to specific edges with fill capability.

**Mixins:** Themeable, Reversible, Orientable, Fitable, Gapable

## Examples

```html
<mosaik-dock-panel>
  <header dock="top">Application Header</header>
  <nav dock="left">Navigation Sidebar</nav>
  <footer dock="bottom">Application Footer</footer>
  <main dock="fill">Main Content Area</main>
</mosaik-dock-panel>
```

```html
<mosaik-dock-panel gap="16px" orientation="vertical">
  <div dock="start">Start Panel</div>
  <div dock="end">End Panel</div>
  <div dock="fill">Center Content</div>
</mosaik-dock-panel>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Default | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`           | `fit`           |           | `Fit`                                        |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `gap`           | `gap`           |           | `Size \| CssNumber`                          |         | The `gap` represents the space between the child elements.<br />The default value is `0`, which means no gap is applied. |
| `items`         |                 | readonly  | `HTMLElement[]`                              |         | Gets or sets the `items` property.               |
| `lang`          | `lang`          |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `lastChildFill` | `lastChildFill` |           | `boolean`                                    | "true"  | The `lastChildFill` property determines whether the last child element should fill the remaining space. |
| `orientation`   | `orientation`   |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`       | `reverse`       |           | `boolean`                                    |         | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `themeName`     |                 |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for child elements with dock positioning attributes. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                     |
|-----------|-------------------------------------------------|
| `surface` | The main container surface for docked elements. |

# mosaik-dot-group

Dot Group - A grouping of dots for status indicators or visual representations.

**Mixins:** Themeable, Disableable, Sizeable, Variantable, Appearanceable

## Examples

Status indicator group:

```html
<mosaik-dot-group size="medium">
  <mosaik-dot variant="success" fill="full"></mosaik-dot>
  <mosaik-dot variant="warning" fill="half"></mosaik-dot>
  <mosaik-dot variant="error" fill="none"></mosaik-dot>
</mosaik-dot-group>
```

Rating display:

```html
<mosaik-dot-group size="large">
  <mosaik-dot variant="primary" fill="full"></mosaik-dot>
  <mosaik-dot variant="primary" fill="full"></mosaik-dot>
  <mosaik-dot variant="primary" fill="full"></mosaik-dot>
  <mosaik-dot variant="primary" fill="half"></mosaik-dot>
  <mosaik-dot variant="primary" fill="none"></mosaik-dot>
</mosaik-dot-group>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for Dot elements                    |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--dot-group-background-color`     | String | The group background color CSS custom property.  |
| `--dot-group-border-color`         | String | The group border color CSS custom property.      |
| `--dot-group-border-radius`        | String | The group border radius CSS custom property.     |
| `--dot-group-border-style`         | String | The group border style CSS custom property.      |
| `--dot-group-border-width`         | String | The group border width CSS custom property.      |
| `--dot-group-font-family`          | String | The group font family CSS custom property.       |
| `--dot-group-font-letter-spacing`  | String | The group font letter spacing CSS custom property. |
| `--dot-group-font-line-height`     | String | The group font line height CSS custom property.  |
| `--dot-group-font-size`            | String | The group font size CSS custom property.         |
| `--dot-group-font-text-decoration` | String | The group font text decoration CSS custom property. |
| `--dot-group-font-text-transform`  | String | The group font text transform CSS custom property. |
| `--dot-group-font-weight`          | String | The group font weight CSS custom property.       |
| `--dot-group-foreground-color`     | String | The group foreground color CSS custom property.  |
| `--dot-group-gap`                  | String | The group gap CSS custom property.               |
| `--dot-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--dot-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--dot-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--dot-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--dot-group-shadow`               | String | The group shadow CSS custom property.            |
| `--dot-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--dot-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--dot-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--dot-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--dot-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--dot-group-transition-duration`  | String | The group transition duration CSS custom property. |
| `--dot-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--dot-group-transition-property`  | String | The group transition property CSS custom property. |
| `--dot-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-dot

Dot - A small point or marker often used to indicate status or position.

**Mixins:** Themeable, Sizeable, Variantable, Disableable

## Examples

Basic dot status indicator:

```html
<mosaik-dot fill="full" variant="success"></mosaik-dot>
```

Different fill states:

```html
<mosaik-dot fill="full" variant="primary"></mosaik-dot>
<mosaik-dot fill="half" variant="warning"></mosaik-dot>
<mosaik-dot fill="empty" variant="error"></mosaik-dot>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fill`         | `fill`     |           | `DotFill`                                    | Gets or sets the fill state of the dot.<br />The default value is `full`, which means the dot is completely filled.<br /><br />Possible values are:<br />* `full` (default) - completely filled<br />* `half` - filled from left to right (50%)<br />* `empty` - only border, no fill |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`     |           | `Size`                                       | Gets or sets the `size` property.<br />When used inside a DotGroup, inherits the group's size unless explicitly set. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`  |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `container` | The main dot container element                   |
| `fill`      | The inner fill element that shows the fill state |

## CSS Custom Properties

| Property                     | Type   | Description                                   |
|------------------------------|--------|-----------------------------------------------|
| `--dot-background-color`     | Color  | Background color of the dot                   |
| `--dot-border-color`         | String | The border color CSS custom property.         |
| `--dot-border-radius`        | String | The border radius CSS custom property.        |
| `--dot-border-style`         | String | The border style CSS custom property.         |
| `--dot-border-width`         | String | Border width for empty and half fill states   |
| `--dot-font-family`          | String | The font family CSS custom property.          |
| `--dot-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--dot-font-line-height`     | String | The font line height CSS custom property.     |
| `--dot-font-size`            | String | The font size CSS custom property.            |
| `--dot-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--dot-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--dot-font-weight`          | String | The font weight CSS custom property.          |
| `--dot-foreground-color`     | Color  | Foreground/border color of the dot            |
| `--dot-gap`                  | String | The gap CSS custom property.                  |
| `--dot-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--dot-padding-left`         | String | The padding left CSS custom property.         |
| `--dot-padding-right`        | String | The padding right CSS custom property.        |
| `--dot-padding-top`          | String | The padding top CSS custom property.          |
| `--dot-shadow`               | String | The shadow CSS custom property.               |
| `--dot-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--dot-shadow-color`         | String | The shadow color CSS custom property.         |
| `--dot-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--dot-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--dot-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--dot-size`                 | String | Size of the dot                               |
| `--dot-transition-duration`  | String | The transition duration CSS custom property.  |
| `--dot-transition-mode`      | String | The transition mode CSS custom property.      |
| `--dot-transition-property`  | String | The transition property CSS custom property.  |
| `--dot-translate`            | String | The translate CSS custom property.            |

# mosaik-drawer-actions

DrawerActions - Container for action buttons within a drawer.

**Mixins:** Themeable, Slottable

## Example

Drawer actions with close button:

```html
<mosaik-drawer-actions slot="actions">
  <mosaik-button><span slot="label">Close</span></mosaik-button>
</mosaik-drawer-actions>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default content slot for action buttons.     |
| `prefix` | The prefix slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The suffix slot.                                 |

## CSS Shadow Parts

| Part         | Description          |
|--------------|----------------------|
| `innerStack` | The innerStack part. |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--drawer-actions-font-family`          | String | The actions font family CSS custom property.     |
| `--drawer-actions-font-letter-spacing`  | String | The actions font letter spacing CSS custom property. |
| `--drawer-actions-font-line-height`     | String | The actions font line height CSS custom property. |
| `--drawer-actions-font-size`            | String | The actions font size CSS custom property.       |
| `--drawer-actions-font-text-decoration` | String | The actions font text decoration CSS custom property. |
| `--drawer-actions-font-text-transform`  | String | The actions font text transform CSS custom property. |
| `--drawer-actions-font-weight`          | String | The actions font weight CSS custom property.     |
| `--drawer-actions-gap`                  | String | The actions gap CSS custom property.             |
| `--drawer-actions-padding-bottom`       | String | The actions padding bottom CSS custom property.  |
| `--drawer-actions-padding-left`         | String | The actions padding left CSS custom property.    |
| `--drawer-actions-padding-right`        | String | The actions padding right CSS custom property.   |
| `--drawer-actions-padding-top`          | String | The actions padding top CSS custom property.     |
| `--drawer-actions-shadow`               | String | The actions shadow CSS custom property.          |
| `--drawer-actions-shadow-blur`          | String | The actions shadow blur CSS custom property.     |
| `--drawer-actions-shadow-color`         | String | The actions shadow color CSS custom property.    |
| `--drawer-actions-shadow-offset-x`      | String | The actions shadow offset x CSS custom property. |
| `--drawer-actions-shadow-offset-y`      | String | The actions shadow offset y CSS custom property. |
| `--drawer-actions-shadow-spread`        | String | The actions shadow spread CSS custom property.   |
| `--drawer-actions-transition-duration`  | String | The actions transition duration CSS custom property. |
| `--drawer-actions-transition-mode`      | String | The actions transition mode CSS custom property. |
| `--drawer-actions-transition-property`  | String | The actions transition property CSS custom property. |
| `--drawer-actions-translate`            | String | The actions translate CSS custom property.       |

# mosaik-drawer-container

DrawerContainer - A container element that wraps a drawer and its associated page content.

**Mixins:** Themeable, Fitable

## Examples

Basic drawer container:

```html
<mosaik-drawer-container>
  <mosaik-drawer slot="drawer" position="left" mode="side"></mosaik-drawer>
  <main slot="content">Page content goes here</main>
</mosaik-drawer-container>
```

Drawer container with backdrop:

```html
<mosaik-drawer-container has-backdrop>
  <mosaik-drawer slot="drawer"></mosaik-drawer>
  <main slot="content">Page content</main>
</mosaik-drawer-container>
```

## Properties

| Property               | Attribute     | Modifiers | Type                                             | Description                                      |
|------------------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `autoSize`             | `autoSize`    |           | `boolean`                                        | Gets or sets the `autoSize` property.            |
| `changed`              |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |               | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`              |               | readonly  | `DrawerContentElement \| null`                   | Returns the `content` property.                  |
| `contentMarginChanged` |               | readonly  | `IEventEmitter<IDrawerMarginChangedEventDetail>` | Called when the content margin changed.<br />Provides reference to `IDrawerMarginChangedEventDetails` as event argument. |
| `dir`                  | `dir`         |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`         |               | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `drawer`               |               | readonly  | `DrawerElement \| null`                          | Returns the `drawer` property.                   |
| `fit`                  | `fit`         |           | `Fit`                                            | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `hasBackdrop`          | `hasBackdrop` |           | `boolean`                                        | Gets or sets the `hasBackdrop` property.         |
| `lang`                 | `lang`        |           | `string`                                         | The lang property indicates the language of the element's content. |
| `themeName`            |               |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`         | `(): void`                                       |                                                  |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `open`          | `(): void`                                       |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                  | Type                       | Description                                      |
|------------------------|----------------------------|--------------------------------------------------|
| `changed`              | `PropertyChangedEvent`     | Emitted when any attribute changes before update |
| `connected`            | `ConnectedEvent`           | Emitted when the element is connected to the DOM |
| `contentMarginChanged` | `DrawerMarginChangedEvent` | Called when the content margin changed.          |
| `disconnected`         | `DisconnectedEvent`        | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `content` | The content element.                             |
| `drawer`  | The drawer element.                              |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--drawer-container-font-family`          | String | The container font family CSS custom property.   |
| `--drawer-container-font-letter-spacing`  | String | The container font letter spacing CSS custom property. |
| `--drawer-container-font-line-height`     | String | The container font line height CSS custom property. |
| `--drawer-container-font-size`            | String | The container font size CSS custom property.     |
| `--drawer-container-font-text-decoration` | String | The container font text decoration CSS custom property. |
| `--drawer-container-font-text-transform`  | String | The container font text transform CSS custom property. |
| `--drawer-container-font-weight`          | String | The container font weight CSS custom property.   |
| `--drawer-container-gap`                  | String | The container gap CSS custom property.           |
| `--drawer-container-padding-bottom`       | String | The container padding bottom CSS custom property. |
| `--drawer-container-padding-left`         | String | The container padding left CSS custom property.  |
| `--drawer-container-padding-right`        | String | The container padding right CSS custom property. |
| `--drawer-container-padding-top`          | String | The container padding top CSS custom property.   |
| `--drawer-container-shadow`               | String | The container shadow CSS custom property.        |
| `--drawer-container-shadow-blur`          | String | The container shadow blur CSS custom property.   |
| `--drawer-container-shadow-color`         | String | The container shadow color CSS custom property.  |
| `--drawer-container-shadow-offset-x`      | String | The container shadow offset x CSS custom property. |
| `--drawer-container-shadow-offset-y`      | String | The container shadow offset y CSS custom property. |
| `--drawer-container-shadow-spread`        | String | The container shadow spread CSS custom property. |
| `--drawer-container-transition-duration`  | String | The container transition duration CSS custom property. |
| `--drawer-container-transition-mode`      | String | The container transition mode CSS custom property. |
| `--drawer-container-transition-property`  | String | The container transition property CSS custom property. |
| `--drawer-container-translate`            | String | The container translate CSS custom property.     |

# mosaik-drawer-content

DrawerContent - The main content area inside a drawer.

**Mixins:** Themeable

## Example

Drawer content with list items:

```html
<mosaik-drawer-content>
  <nav>
    <a href="/home">Home</a>
    <a href="/settings">Settings</a>
  </nav>
</mosaik-drawer-content>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`       | `opened`  |           | `boolean`                                    | Gets or sets the `opened` property.              |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content element.                     |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--drawer-content-font-family`          | String | The content font family CSS custom property.     |
| `--drawer-content-font-letter-spacing`  | String | The content font letter spacing CSS custom property. |
| `--drawer-content-font-line-height`     | String | The content font line height CSS custom property. |
| `--drawer-content-font-size`            | String | The content font size CSS custom property.       |
| `--drawer-content-font-text-decoration` | String | The content font text decoration CSS custom property. |
| `--drawer-content-font-text-transform`  | String | The content font text transform CSS custom property. |
| `--drawer-content-font-weight`          | String | The content font weight CSS custom property.     |
| `--drawer-content-gap`                  | String | The content gap CSS custom property.             |
| `--drawer-content-padding-bottom`       | String | The content padding bottom CSS custom property.  |
| `--drawer-content-padding-left`         | String | The content padding left CSS custom property.    |
| `--drawer-content-padding-right`        | String | The content padding right CSS custom property.   |
| `--drawer-content-padding-top`          | String | The content padding top CSS custom property.     |
| `--drawer-content-shadow`               | String | The content shadow CSS custom property.          |
| `--drawer-content-shadow-blur`          | String | The content shadow blur CSS custom property.     |
| `--drawer-content-shadow-color`         | String | The content shadow color CSS custom property.    |
| `--drawer-content-shadow-offset-x`      | String | The content shadow offset x CSS custom property. |
| `--drawer-content-shadow-offset-y`      | String | The content shadow offset y CSS custom property. |
| `--drawer-content-shadow-spread`        | String | The content shadow spread CSS custom property.   |
| `--drawer-content-transition-duration`  | String | The content transition duration CSS custom property. |
| `--drawer-content-transition-mode`      | String | The content transition mode CSS custom property. |
| `--drawer-content-transition-property`  | String | The content transition property CSS custom property. |
| `--drawer-content-translate`            | String | The content translate CSS custom property.       |

# mosaik-drawer-footer

DrawerFooter - The footer section within a drawer.

**Mixins:** Themeable, Slottable

## Example

Drawer footer with version info:

```html
<mosaik-drawer-footer slot="footer">
  <small>v1.0.0</small>
</mosaik-drawer-footer>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot.                        |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--drawer-footer-font-family`          | String | The footer font family CSS custom property.      |
| `--drawer-footer-font-letter-spacing`  | String | The footer font letter spacing CSS custom property. |
| `--drawer-footer-font-line-height`     | String | The footer font line height CSS custom property. |
| `--drawer-footer-font-size`            | String | The footer font size CSS custom property.        |
| `--drawer-footer-font-text-decoration` | String | The footer font text decoration CSS custom property. |
| `--drawer-footer-font-text-transform`  | String | The footer font text transform CSS custom property. |
| `--drawer-footer-font-weight`          | String | The footer font weight CSS custom property.      |
| `--drawer-footer-gap`                  | String | The footer gap CSS custom property.              |
| `--drawer-footer-padding-bottom`       | String | The footer padding bottom CSS custom property.   |
| `--drawer-footer-padding-left`         | String | The footer padding left CSS custom property.     |
| `--drawer-footer-padding-right`        | String | The footer padding right CSS custom property.    |
| `--drawer-footer-padding-top`          | String | The footer padding top CSS custom property.      |
| `--drawer-footer-shadow`               | String | The footer shadow CSS custom property.           |
| `--drawer-footer-shadow-blur`          | String | The footer shadow blur CSS custom property.      |
| `--drawer-footer-shadow-color`         | String | The footer shadow color CSS custom property.     |
| `--drawer-footer-shadow-offset-x`      | String | The footer shadow offset x CSS custom property.  |
| `--drawer-footer-shadow-offset-y`      | String | The footer shadow offset y CSS custom property.  |
| `--drawer-footer-shadow-spread`        | String | The footer shadow spread CSS custom property.    |
| `--drawer-footer-transition-duration`  | String | The footer transition duration CSS custom property. |
| `--drawer-footer-transition-mode`      | String | The footer transition mode CSS custom property.  |
| `--drawer-footer-transition-property`  | String | The footer transition property CSS custom property. |
| `--drawer-footer-translate`            | String | The footer translate CSS custom property.        |

# mosaik-drawer-header-sub-text

DrawerHeaderSubText - The sub-heading within a drawer header.

**Mixins:** Themeable, TextFormattable

## Example

Sub-text inside a drawer header:

```html
<mosaik-drawer-header slot="header">
  <mosaik-drawer-header-sub-text id="drawerSubTitle" slot="subHeader"></mosaik-drawer-header-sub-text>
</mosaik-drawer-header>
<script>
  document.getElementById('drawerSubTitle').text = 'Optional subtitle';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--drawer-header-sub-text-background-color`     | String | The header sub text background color CSS custom property. |
| `--drawer-header-sub-text-border-color`         | String | The header sub text border color CSS custom property. |
| `--drawer-header-sub-text-font-family`          | String | The header sub text font family CSS custom property. |
| `--drawer-header-sub-text-font-letter-spacing`  | String | The header sub text font letter spacing CSS custom property. |
| `--drawer-header-sub-text-font-line-height`     | String | The header sub text font line height CSS custom property. |
| `--drawer-header-sub-text-font-size`            | String | The header sub text font size CSS custom property. |
| `--drawer-header-sub-text-font-text-decoration` | String | The header sub text font text decoration CSS custom property. |
| `--drawer-header-sub-text-font-text-transform`  | String | The header sub text font text transform CSS custom property. |
| `--drawer-header-sub-text-font-weight`          | String | The header sub text font weight CSS custom property. |
| `--drawer-header-sub-text-foreground-color`     | String | The header sub text foreground color CSS custom property. |
| `--drawer-header-sub-text-gap`                  | String | The header sub text gap CSS custom property.     |
| `--drawer-header-sub-text-padding-bottom`       | String | The header sub text padding bottom CSS custom property. |
| `--drawer-header-sub-text-padding-left`         | String | The header sub text padding left CSS custom property. |
| `--drawer-header-sub-text-padding-right`        | String | The header sub text padding right CSS custom property. |
| `--drawer-header-sub-text-padding-top`          | String | The header sub text padding top CSS custom property. |
| `--drawer-header-sub-text-shadow`               | String | The header sub text shadow CSS custom property.  |
| `--drawer-header-sub-text-shadow-blur`          | String | The header sub text shadow blur CSS custom property. |
| `--drawer-header-sub-text-shadow-color`         | String | The header sub text shadow color CSS custom property. |
| `--drawer-header-sub-text-shadow-offset-x`      | String | The header sub text shadow offset x CSS custom property. |
| `--drawer-header-sub-text-shadow-offset-y`      | String | The header sub text shadow offset y CSS custom property. |
| `--drawer-header-sub-text-shadow-spread`        | String | The header sub text shadow spread CSS custom property. |
| `--drawer-header-sub-text-transition-duration`  | String | The header sub text transition duration CSS custom property. |
| `--drawer-header-sub-text-transition-mode`      | String | The header sub text transition mode CSS custom property. |
| `--drawer-header-sub-text-transition-property`  | String | The header sub text transition property CSS custom property. |
| `--drawer-header-sub-text-translate`            | String | The header sub text translate CSS custom property. |

# mosaik-drawer-header-text

DrawerHeaderText - The main heading within a drawer header.

**Mixins:** Themeable, TextFormattable

## Example

Title inside a drawer header:

```html
<mosaik-drawer-header slot="header">
  <mosaik-drawer-header-text id="drawerTitle" slot="header"></mosaik-drawer-header-text>
</mosaik-drawer-header>
<script>
  document.getElementById('drawerTitle').text = 'Navigation';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--drawer-header-text-background-color`     | String | The header text background color CSS custom property. |
| `--drawer-header-text-border-color`         | String | The header text border color CSS custom property. |
| `--drawer-header-text-font-family`          | String | The header text font family CSS custom property. |
| `--drawer-header-text-font-letter-spacing`  | String | The header text font letter spacing CSS custom property. |
| `--drawer-header-text-font-line-height`     | String | The header text font line height CSS custom property. |
| `--drawer-header-text-font-size`            | String | The header text font size CSS custom property.   |
| `--drawer-header-text-font-text-decoration` | String | The header text font text decoration CSS custom property. |
| `--drawer-header-text-font-text-transform`  | String | The header text font text transform CSS custom property. |
| `--drawer-header-text-font-weight`          | String | The header text font weight CSS custom property. |
| `--drawer-header-text-foreground-color`     | String | The header text foreground color CSS custom property. |
| `--drawer-header-text-gap`                  | String | The header text gap CSS custom property.         |
| `--drawer-header-text-padding-bottom`       | String | The header text padding bottom CSS custom property. |
| `--drawer-header-text-padding-left`         | String | The header text padding left CSS custom property. |
| `--drawer-header-text-padding-right`        | String | The header text padding right CSS custom property. |
| `--drawer-header-text-padding-top`          | String | The header text padding top CSS custom property. |
| `--drawer-header-text-shadow`               | String | The header text shadow CSS custom property.      |
| `--drawer-header-text-shadow-blur`          | String | The header text shadow blur CSS custom property. |
| `--drawer-header-text-shadow-color`         | String | The header text shadow color CSS custom property. |
| `--drawer-header-text-shadow-offset-x`      | String | The header text shadow offset x CSS custom property. |
| `--drawer-header-text-shadow-offset-y`      | String | The header text shadow offset y CSS custom property. |
| `--drawer-header-text-shadow-spread`        | String | The header text shadow spread CSS custom property. |
| `--drawer-header-text-transition-duration`  | String | The header text transition duration CSS custom property. |
| `--drawer-header-text-transition-mode`      | String | The header text transition mode CSS custom property. |
| `--drawer-header-text-transition-property`  | String | The header text transition property CSS custom property. |
| `--drawer-header-text-translate`            | String | The header text translate CSS custom property.   |

# mosaik-drawer-header

DrawerHeader - The header section within a drawer containing title and sub-title.

**Mixins:** Themeable, TextFormattable, Slottable

## Example

Drawer header with slotted title:

```html
<mosaik-drawer-header slot="header">
  <mosaik-drawer-header-text slot="header"></mosaik-drawer-header-text>
  <mosaik-drawer-header-sub-text slot="subHeader"></mosaik-drawer-header-sub-text>
</mosaik-drawer-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subText`      |           |           | `string`                                     | Gets or sets the `subText` property.<br />When used inside a Drawer, inherits the drawer's subHeader unless explicitly set. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.<br />When used inside a Drawer, inherits the drawer's header unless explicitly set. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate`      | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `header`    | The header slot.                                 |
| `prefix`    | The prefix slot.                                 |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | The subHeader slot.                              |
| `suffix`    | The suffix slot.                                 |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `heading` | The heading part. |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--drawer-header-font-family`          | String | The header font family CSS custom property.      |
| `--drawer-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--drawer-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--drawer-header-font-size`            | String | The header font size CSS custom property.        |
| `--drawer-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--drawer-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--drawer-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--drawer-header-gap`                  | String | The header gap CSS custom property.              |
| `--drawer-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--drawer-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--drawer-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--drawer-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--drawer-header-shadow`               | String | The header shadow CSS custom property.           |
| `--drawer-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--drawer-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--drawer-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--drawer-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--drawer-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--drawer-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--drawer-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--drawer-header-transition-property`  | String | The header transition property CSS custom property. |
| `--drawer-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-drawer

Drawer - A hidden side panel that slides in from the edge of the viewport.

**Mixins:** Themeable, Animatable, Dimensionable, Elevatable, Slottable, Openable, Closeable

## Examples

Basic left drawer in over mode:

```html
<mosaik-drawer position="left" mode="over" header="Navigation"></mosaik-drawer>
```

Persistent side drawer with shadow:

```html
<mosaik-drawer position="left" mode="side" has-shadow></mosaik-drawer>
```

Fullscreen drawer from the right:

```html
<mosaik-drawer position="right" mode="over" is-full-screen></mosaik-drawer>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `animationTarget`     |                       | readonly  | `HTMLElement`                                | Gets the animation target element.<br />For the drawer, animations are applied to the root template part instead of the host element. |
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `elevation`           | `elevation`           |           | `ElevationWeight`                            | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `enter`               | `enter`               |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`                | `exit`                |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    | Gets or sets the `hasBackdrop` property.         |
| `hasShadow`           | `hasShadow`           |           | `boolean`                                    | Gets or sets the `hasShadow` property.           |
| `header`              | `header`              |           | `string`                                     | Gets or sets the `header` property.              |
| `height`              | `height`              |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `isComposed`          | `isComposed`          |           | `boolean`                                    | Gets or sets the `isComposed` property.          |
| `isFullScreen`        | `isFullScreen`        |           | `boolean`                                    | Gets or sets the `isFullScreen` property.        |
| `isOpen`              | `isOpen`              |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     | The lang property indicates the language of the element's content. |
| `mode`                | `mode`                |           | `DrawerMode`                                 | Gets or sets the `mode` property.                |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `position`            | `position`            |           | `DrawerPosition`                             | Gets or sets the `position` property.            |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    | Gets or sets the `pressEscapeToClose` property.  |
| `subHeader`           | `subHeader`           |           | `string`                                     | Gets or sets the `subHeader` property.           |
| `themeName`           |                       |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`               | `width`               |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the drawer.                               |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `innerOffsetWidth`     | `(): number`                                     | Returns the inner offset width of the drawer.    |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`      | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the drawer.                                |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): Promise<void>`                              | Toggles the drawer between open and closed states. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the drawer is closed.            |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the drawer is opened.            |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default content slot.                        |
| `actions` | The actions content slot.                        |
| `footer`  | The footer content slot.                         |
| `header`  | The header content slot.                         |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                   |
|-------------|-------------------------------|
| `actions`   | The actions part.             |
| `backdrop`  | The backdrop element.         |
| `elevation` | The elevation element.        |
| `footer`    | The footer element.           |
| `header`    | The header container element. |
| `main`      | The main part.                |
| `root`      | The root container element.   |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--drawer-background-color`     | String | The background color CSS custom property.     |
| `--drawer-border-color`         | String | The border color CSS custom property.         |
| `--drawer-border-radius`        | String | The border radius CSS custom property.        |
| `--drawer-border-style`         | String | The border style CSS custom property.         |
| `--drawer-border-width`         | String | The border width CSS custom property.         |
| `--drawer-divider-height`       | String | The divider height CSS custom property.       |
| `--drawer-font-family`          | String | The font family CSS custom property.          |
| `--drawer-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--drawer-font-line-height`     | String | The font line height CSS custom property.     |
| `--drawer-font-size`            | String | The font size CSS custom property.            |
| `--drawer-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--drawer-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--drawer-font-weight`          | String | The font weight CSS custom property.          |
| `--drawer-foreground-color`     | String | The foreground color CSS custom property.     |
| `--drawer-gap`                  | String | The gap CSS custom property.                  |
| `--drawer-height`               | String | The height CSS custom property.               |
| `--drawer-line-thickness`       | String | The line thickness CSS custom property.       |
| `--drawer-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--drawer-padding-left`         | String | The padding left CSS custom property.         |
| `--drawer-padding-right`        | String | The padding right CSS custom property.        |
| `--drawer-padding-top`          | String | The padding top CSS custom property.          |
| `--drawer-shadow`               | String | The shadow CSS custom property.               |
| `--drawer-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--drawer-shadow-color`         | String | The shadow color CSS custom property.         |
| `--drawer-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--drawer-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--drawer-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--drawer-transition-duration`  | String | The transition duration CSS custom property.  |
| `--drawer-transition-mode`      | String | The transition mode CSS custom property.      |
| `--drawer-transition-property`  | String | The transition property CSS custom property.  |
| `--drawer-translate`            | String | The translate CSS custom property.            |
| `--drawer-width`                | String | The width CSS custom property.                |

# DropDownButtonElement - Button with dropdown menu for multiple actions

## Description
The Drop Down Button is a versatile user interface component that triggers a dropdown menu containing additional options or actions. When clicked, the button reveals a menu with a list of choices, providing users with multiple actions or selections in a compact and organized manner. Drop Down Buttons are commonly used in navigation bars, toolbars, and other interactive areas where a set of related options needs to be presented.

## Element
- **Tag**: `mosaik-dropdown-button`
- **Category**: Buttons

## Slots
- `icon` - The icon slot for button icon
- `label` - The label slot for button text
- `overlay` - The overlay slot (useful for badges)
- **default** - The default dropdown content slot (typically contains a mosaik-menu)

## CSS Parts
- `button` - The main button element
- `focusRing` - The focus ring indicator
- `ripple` - The touch feedback ripple effect
- `icon` - The icon display area
- `label` - The text label display area
- `progressRing` - The loading state progress indicator
- `popup` - The dropdown popup container
- `menu` - The menu content area
- `iconCaret` - The dropdown caret icon

## CSS Custom Properties
- `--drop-down-button-background-color` - Background color of the button
- `--drop-down-button-border-color` - Border color of the button
- `--drop-down-button-border-radius` - Border radius of the button
- `--drop-down-button-border-width` - Border width of the button
- `--drop-down-button-font-family` - Font family for button text
- `--drop-down-button-font-size` - Font size for button text
- `--drop-down-button-font-line-height` - Line height for button text
- `--drop-down-button-font-weight` - Font weight for button text
- `--drop-down-button-font-letter-spacing` - Letter spacing for button text
- `--drop-down-button-font-text-decoration` - Text decoration for button text
- `--drop-down-button-font-text-transform` - Text transform for button text
- `--drop-down-button-foreground-color` - Text and icon color
- `--drop-down-button-gap` - Gap between button elements
- `--drop-down-button-padding-top` - Top padding
- `--drop-down-button-padding-right` - Right padding
- `--drop-down-button-padding-bottom` - Bottom padding
- `--drop-down-button-padding-left` - Left padding
- `--drop-down-button-shadow` - Shadow effect

## Dependencies
- `mosaik-stack` - Layout container
- `mosaik-icon` - Icon display
- `mosaik-text` - Text label
- `mosaik-ripple` - Touch feedback
- `mosaik-focus-ring` - Focus indicator
- `mosaik-progress-ring` - Loading indicator
- `mosaik-floating` - Popup positioning
- `mosaik-portal` - Portal rendering
- `mosaik-menu` - Menu container (typically slotted)

## Examples

### Basic dropdown with menu
```html
<mosaik-dropdown-button label="Actions">
    <mosaik-menu>
        <mosaik-menu-item label="Edit"></mosaik-menu-item>
        <mosaik-menu-item label="Delete"></mosaik-menu-item>
        <mosaik-menu-item label="Share"></mosaik-menu-item>
    </mosaik-menu>
</mosaik-dropdown-button>
```

### With icon
```html
<mosaik-dropdown-button label="File" icon="folder-icon">
    <mosaik-menu>
        <mosaik-menu-item label="New File"></mosaik-menu-item>
        <mosaik-menu-item label="Open"></mosaik-menu-item>
        <mosaik-menu-item label="Save"></mosaik-menu-item>
    </mosaik-menu>
</mosaik-dropdown-button>
```

### Icon-only with tooltip
```html
<mosaik-dropdown-button icon="more-icon" aria-label="More options">
    <mosaik-menu>
        <mosaik-menu-item label="Settings"></mosaik-menu-item>
        <mosaik-menu-item label="Help"></mosaik-menu-item>
        <mosaik-menu-item label="Logout"></mosaik-menu-item>
    </mosaik-menu>
</mosaik-dropdown-button>
```

### With grouped menu items
```html
<mosaik-dropdown-button label="View" variant="primary">
    <mosaik-menu>
        <mosaik-menu-item-group label="Layout">
            <mosaik-menu-item label="Grid"></mosaik-menu-item>
            <mosaik-menu-item label="List"></mosaik-menu-item>
        </mosaik-menu-item-group>
        <mosaik-menu-item-group label="Sort">
            <mosaik-menu-item label="Name"></mosaik-menu-item>
            <mosaik-menu-item label="Date"></mosaik-menu-item>
        </mosaik-menu-item-group>
    </mosaik-menu>
</mosaik-dropdown-button>
```

# mosaik-drop-zone

DropZoneElement - An interactive component that defines a target area for drag-and-drop operations.

**Mixins:** Themeable, Disableable, Appearanceable, Variantable

## Example

```html
<mosaik-drop-zone>
  <p>Drag files here to upload</p>
</mosaik-drop-zone>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropZoneData` |              | readonly  | `IEventEmitter<IDropZoneDataEventDetail>`    | Called when the data is transferred to the drop zone.<br />Provides reference to `IDropZoneDataEventDetail` as event detail. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `state`        | `state`      |           | `DropZoneState`                              | Gets or sets the `state` property.               |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `dropZoneData` | `DropZoneDataEvent`    | Fired when data is transferred to the drop zone. |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for content displayed inside the drop zone. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--drop-zone-background-color`     | String | The zone background color CSS custom property.   |
| `--drop-zone-border-color`         | String | The zone border color CSS custom property.       |
| `--drop-zone-border-radius`        | String | The zone border radius CSS custom property.      |
| `--drop-zone-border-style`         | String | The zone border style CSS custom property.       |
| `--drop-zone-border-width`         | String | The zone border width CSS custom property.       |
| `--drop-zone-font-family`          | String | The zone font family CSS custom property.        |
| `--drop-zone-font-letter-spacing`  | String | The zone font letter spacing CSS custom property. |
| `--drop-zone-font-line-height`     | String | The zone font line height CSS custom property.   |
| `--drop-zone-font-size`            | String | The zone font size CSS custom property.          |
| `--drop-zone-font-text-decoration` | String | The zone font text decoration CSS custom property. |
| `--drop-zone-font-text-transform`  | String | The zone font text transform CSS custom property. |
| `--drop-zone-font-weight`          | String | The zone font weight CSS custom property.        |
| `--drop-zone-gap`                  | String | The zone gap CSS custom property.                |
| `--drop-zone-padding-bottom`       | String | The zone padding bottom CSS custom property.     |
| `--drop-zone-padding-left`         | String | The zone padding left CSS custom property.       |
| `--drop-zone-padding-right`        | String | The zone padding right CSS custom property.      |
| `--drop-zone-padding-top`          | String | The zone padding top CSS custom property.        |
| `--drop-zone-shadow`               | String | The zone shadow CSS custom property.             |
| `--drop-zone-shadow-blur`          | String | The zone shadow blur CSS custom property.        |
| `--drop-zone-shadow-color`         | String | The zone shadow color CSS custom property.       |
| `--drop-zone-shadow-offset-x`      | String | The zone shadow offset x CSS custom property.    |
| `--drop-zone-shadow-offset-y`      | String | The zone shadow offset y CSS custom property.    |
| `--drop-zone-shadow-spread`        | String | The zone shadow spread CSS custom property.      |
| `--drop-zone-transition-duration`  | String | The zone transition duration CSS custom property. |
| `--drop-zone-transition-mode`      | String | The zone transition mode CSS custom property.    |
| `--drop-zone-transition-property`  | String | The zone transition property CSS custom property. |
| `--drop-zone-translate`            | String | The zone translate CSS custom property.          |

# mosaik-dropdown-button

Drop Down Button - A button that opens a menu when clicked, allowing users to select from a list of options.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, DropDownable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic dropdown button:

```html
<mosaik-dropdown-button label="Options">
  <mosaik-menu>
    <mosaik-menu-item label="Option 1"></mosaik-menu-item>
    <mosaik-menu-item label="Option 2"></mosaik-menu-item>
  </mosaik-menu>
</mosaik-dropdown-button>
```

Dropdown button with variant and no caret:

```html
<mosaik-dropdown-button label="Actions" variant="primary" caret-visible="false">
  <mosaik-menu>
    <mosaik-menu-item label="Edit"></mosaik-menu-item>
    <mosaik-menu-item label="Delete"></mosaik-menu-item>
  </mosaik-menu>
</mosaik-dropdown-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `caretVisible`               | `caret-visible`                |           | `boolean`                                    | Gets or sets the `caretVisible` property.        |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`           | `drop-down-distance`           |           | `number`                                     | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`             | `drop-down-height`             |           | `CssLength \| undefined`                     | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight`          | `drop-down-max-height`         |           | `CssLength`                                  | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`           | `drop-down-max-width`          |           | `CssLength \| undefined`                     | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement`          | `drop-down-placement`          |           | `Placement`                                  | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`           | `drop-down-skidding`           |           | `number`                                     | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen`          | `drop-down-stays-open`         |           | `boolean`                                    | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`           | `drop-down-strategy`           |           | `Strategy`                                   | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`              | `drop-down-width`              |           | `CssLength \| undefined`                     | Gets or sets the `dropDownWidth` property.       |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isDropDownOpen`             | `is-drop-down-open`            |           | `boolean`                                    | Gets or sets the `isDropDownOpen` property.      |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`                 | `(): void`                                       | Closes the drop down.                            |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `open`                  | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`                | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default dropdown content slot.               |
| `icon`    | The icon slot.                                   |
| `label`   | The label slot.                                  |
| `overlay` | The overlay slot (useful for badges).            |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description             |
|----------------|-------------------------|
| `button`       | The button part.        |
| `focusRing`    | The focus ring part.    |
| `icon`         | The icon part.          |
| `iconCaret`    | The icon caret part.    |
| `innerStack`   | The innerStack part.    |
| `label`        | The label part.         |
| `popup`        | The popup part.         |
| `portal`       | The portal part.        |
| `progressRing` | The progress ring part. |
| `projection`   | The projection part.    |
| `ripple`       | The ripple part.        |

## CSS Custom Properties

| Property                                       | Type   | Description                                      |
|------------------------------------------------|--------|--------------------------------------------------|
| `--drop-down-button-background-color`          | Color  | The background color of the drop down button.    |
| `--drop-down-button-border-color`              | Color  | The border color of the drop down button.        |
| `--drop-down-button-border-radius`             | String | The border radius of the drop down button.       |
| `--drop-down-button-border-style`              | String | The down button border style CSS custom property. |
| `--drop-down-button-border-width`              | String | The border width of the drop down button.        |
| `--drop-down-button-focus-ring-active-width`   | String | The down button focus ring active width CSS custom property. |
| `--drop-down-button-focus-ring-color`          | String | The down button focus ring color CSS custom property. |
| `--drop-down-button-focus-ring-inward-offset`  | String | The down button focus ring inward offset CSS custom property. |
| `--drop-down-button-focus-ring-outward-offset` | String | The down button focus ring outward offset CSS custom property. |
| `--drop-down-button-font-family`               | String | The font family of the drop down button.         |
| `--drop-down-button-font-letter-spacing`       | String | The letter spacing of the drop down button font. |
| `--drop-down-button-font-line-height`          | String | The line height of the drop down button font.    |
| `--drop-down-button-font-size`                 | String | The font size of the drop down button.           |
| `--drop-down-button-font-text-decoration`      | String | The text decoration of the drop down button font. |
| `--drop-down-button-font-text-transform`       | String | The text transform of the drop down button font. |
| `--drop-down-button-font-weight`               | String | The font weight of the drop down button.         |
| `--drop-down-button-foreground-color`          | Color  | The foreground color of the drop down button.    |
| `--drop-down-button-gap`                       | String | The gap between elements in the drop down button. |
| `--drop-down-button-height`                    | String | The down button height CSS custom property.      |
| `--drop-down-button-icon-min-height`           | String | The down button icon min height CSS custom property. |
| `--drop-down-button-icon-min-width`            | String | The down button icon min width CSS custom property. |
| `--drop-down-button-line-height`               | String | The down button line height CSS custom property. |
| `--drop-down-button-min-height`                | String | The down button min height CSS custom property.  |
| `--drop-down-button-min-width`                 | String | The down button min width CSS custom property.   |
| `--drop-down-button-padding-bottom`            | String | The bottom padding of the drop down button.      |
| `--drop-down-button-padding-left`              | String | The left padding of the drop down button.        |
| `--drop-down-button-padding-right`             | String | The right padding of the drop down button.       |
| `--drop-down-button-padding-top`               | String | The top padding of the drop down button.         |
| `--drop-down-button-progress-ring-width`       | String | The down button progress ring width CSS custom property. |
| `--drop-down-button-progress-thickness`        | String | The down button progress thickness CSS custom property. |
| `--drop-down-button-ripple-color`              | Color  | The down button ripple color CSS custom property. |
| `--drop-down-button-ripple-duration`           | String | The down button ripple duration CSS custom property. |
| `--drop-down-button-shadow`                    | String | The shadow of the drop down button.              |
| `--drop-down-button-shadow-blur`               | String | The down button shadow blur CSS custom property. |
| `--drop-down-button-shadow-color`              | String | The down button shadow color CSS custom property. |
| `--drop-down-button-shadow-offset-x`           | String | The down button shadow offset x CSS custom property. |
| `--drop-down-button-shadow-offset-y`           | String | The down button shadow offset y CSS custom property. |
| `--drop-down-button-shadow-spread`             | String | The down button shadow spread CSS custom property. |
| `--drop-down-button-transform`                 | String | The down button transform CSS custom property.   |
| `--drop-down-button-transition-duration`       | String | The transition duration of the drop down button. |
| `--drop-down-button-transition-mode`           | String | The down button transition mode CSS custom property. |
| `--drop-down-button-transition-property`       | String | The down button transition property CSS custom property. |
| `--drop-down-button-translate`                 | String | The down button translate CSS custom property.   |
| `--drop-down-button-width`                     | String | The down button width CSS custom property.       |

# mosaik-elevation

Elevation - A visual effect indicating the depth of an element relative to its surroundings.

**Mixins:** Themeable, Disableable, Attachable

## Examples

Basic elevation effect:

```html
<mosaik-elevation weigh="medium">
  <div>Elevated content</div>
</mosaik-elevation>
```

High elevation for dialogs:

```html
<mosaik-elevation weigh="high">
  <div>Card with high elevation</div>
</mosaik-elevation>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`      |            | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `for`          | `for`      |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `weigh`        | `weigh`    |           | `ElevationWeight`                            | Gets or sets the `weigh` property.               |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `detach`        | `(): void`                                       | Detaches the element from its current control.   |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                           | Type   | Description                                   |
|------------------------------------|--------|-----------------------------------------------|
| `--elevation-font-family`          | String | The font family CSS custom property.          |
| `--elevation-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--elevation-font-line-height`     | String | The font line height CSS custom property.     |
| `--elevation-font-size`            | String | The font size CSS custom property.            |
| `--elevation-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--elevation-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--elevation-font-weight`          | String | The font weight CSS custom property.          |
| `--elevation-gap`                  | String | The gap CSS custom property.                  |
| `--elevation-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--elevation-padding-left`         | String | The padding left CSS custom property.         |
| `--elevation-padding-right`        | String | The padding right CSS custom property.        |
| `--elevation-padding-top`          | String | The padding top CSS custom property.          |
| `--elevation-shadow`               | String | The shadow CSS custom property.               |
| `--elevation-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--elevation-shadow-color`         | String | The shadow color CSS custom property.         |
| `--elevation-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--elevation-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--elevation-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--elevation-transition-duration`  | String | The transition duration CSS custom property.  |
| `--elevation-transition-mode`      | String | The transition mode CSS custom property.      |
| `--elevation-transition-property`  | String | The transition property CSS custom property.  |
| `--elevation-translate`            | String | The translate CSS custom property.            |

# mosaik-emoji

The `EmojiElement` element.

**Mixins:** Themeable, Sizeable

## Example

```html
<!-- Basic emoji (set unicode or emoji via JavaScript) -->
<mosaik-emoji></mosaik-emoji>

<!-- Sized emoji -->
<mosaik-emoji size="large"></mosaik-emoji>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `emoji`        |           |           | `string`                                     | Gets or sets the emoji as a rendered string.<br />Setting this will update the unicode property (normalized, hyphen-separated, uppercase hex). |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`    |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `unicode`      |           |           | `string`                                     | Gets or sets the `unicode` property.             |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toEmoji`       | `(): string`                                     | Converts the current unicode value to its emoji string. |
| `toUnicode`     | `(): string`                                     | Converts the current emoji string to a normalized unicode representation.<br />Returns an uppercase, hyphen-separated hex codepoint string (e.g., "1F469-200D-1F4BB"). |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--emoji-background-color`     | String | The background color CSS custom property.     |
| `--emoji-font-family`          | String | The font family CSS custom property.          |
| `--emoji-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--emoji-font-line-height`     | String | The font line height CSS custom property.     |
| `--emoji-font-size`            | String | The font size CSS custom property.            |
| `--emoji-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--emoji-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--emoji-font-weight`          | String | The font weight CSS custom property.          |
| `--emoji-gap`                  | String | The gap CSS custom property.                  |
| `--emoji-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--emoji-padding-left`         | String | The padding left CSS custom property.         |
| `--emoji-padding-right`        | String | The padding right CSS custom property.        |
| `--emoji-padding-top`          | String | The padding top CSS custom property.          |
| `--emoji-shadow`               | String | The shadow CSS custom property.               |
| `--emoji-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--emoji-shadow-color`         | String | The shadow color CSS custom property.         |
| `--emoji-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--emoji-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--emoji-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--emoji-transition-duration`  | String | The transition duration CSS custom property.  |
| `--emoji-transition-mode`      | String | The transition mode CSS custom property.      |
| `--emoji-transition-property`  | String | The transition property CSS custom property.  |
| `--emoji-translate`            | String | The translate CSS custom property.            |

# mosaik-empty-state

EmptyState - A user-friendly placeholder component for displaying when no content or data is available.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

No search results:

```html
<mosaik-empty-state header="No results found">
  <mosaik-button slot="actions" onclick="clearSearch()">Clear Search</mosaik-button>
</mosaik-empty-state>
```

Empty inbox:

```html
<mosaik-empty-state header="Inbox Zero!"></mosaik-empty-state>
```

Empty cart with action:

```html
<mosaik-empty-state header="Your cart is empty">
  <mosaik-button slot="actions" appearance="primary" onclick="browseProducts()">
    Browse Products
  </mosaik-button>
</mosaik-empty-state>
```

State with icon and content set via JavaScript:

```html
<mosaik-empty-state id="emptyState" header="Welcome to the app!"></mosaik-empty-state>
<script>
  const el = document.getElementById('emptyState');
  el.icon = 'star-outline';
  el.content = 'Get started by creating your first project';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |           |           | `string`                                     | Gets or sets the `content` property of the state. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`       | `header`  |           | `string`                                     | Gets or sets the `header` property.<br />The primary message displayed to users in the empty state.<br />The default value is an empty string, which means no header is displayed. |
| `icon`         |           |           | `string`                                     | Gets or sets the `icon` property.<br />The icon SVG path data for the empty state visual indicator.<br />The default value is an empty string, which displays a default glasses icon. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content area for additional empty state information or custom elements |
| `actions` | Action buttons or links for user guidance and next steps |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `content`    | The content text container for detailed explanation |
| `header`     | The header text container for primary messaging  |
| `icon`       | The icon container for visual empty state representation |
| `innerStack` | The internal stack container for action slot elements |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--empty-state-font-family`                 | String | The state font family CSS custom property.       |
| `--empty-state-font-letter-spacing`         | String | The state font letter spacing CSS custom property. |
| `--empty-state-font-line-height`            | String | The state font line height CSS custom property.  |
| `--empty-state-font-size`                   | String | The state font size CSS custom property.         |
| `--empty-state-font-text-decoration`        | String | The state font text decoration CSS custom property. |
| `--empty-state-font-text-transform`         | String | The state font text transform CSS custom property. |
| `--empty-state-font-weight`                 | String | The state font weight CSS custom property.       |
| `--empty-state-foreground-color`            | String | The text color for empty state content           |
| `--empty-state-gap`                         | String | The spacing between icon, text, and action elements |
| `--empty-state-header-font-family`          | String | The font family for header text                  |
| `--empty-state-header-font-letter-spacing`  | String | The letter spacing for header text               |
| `--empty-state-header-font-line-height`     | String | The line height for header text                  |
| `--empty-state-header-font-size`            | String | The font size for header text                    |
| `--empty-state-header-font-text-decoration` | String | The text decoration style for header text        |
| `--empty-state-header-font-text-transform`  | String | The text transformation style for header text    |
| `--empty-state-header-font-weight`          | String | The font weight for header text                  |
| `--empty-state-padding-bottom`              | String | The bottom padding inside the empty state container |
| `--empty-state-padding-left`                | String | The left padding inside the empty state container |
| `--empty-state-padding-right`               | String | The right padding inside the empty state container |
| `--empty-state-padding-top`                 | String | The top padding inside the empty state container |
| `--empty-state-shadow`                      | String | The state shadow CSS custom property.            |
| `--empty-state-shadow-blur`                 | String | The state shadow blur CSS custom property.       |
| `--empty-state-shadow-color`                | String | The state shadow color CSS custom property.      |
| `--empty-state-shadow-offset-x`             | String | The state shadow offset x CSS custom property.   |
| `--empty-state-shadow-offset-y`             | String | The state shadow offset y CSS custom property.   |
| `--empty-state-shadow-spread`               | String | The state shadow spread CSS custom property.     |
| `--empty-state-transition-duration`         | String | The state transition duration CSS custom property. |
| `--empty-state-transition-mode`             | String | The state transition mode CSS custom property.   |
| `--empty-state-transition-property`         | String | The state transition property CSS custom property. |
| `--empty-state-translate`                   | String | The state translate CSS custom property.         |

# mosaik-epg-channel

EPG Channel - A channel row entry within an Electronic Program Guide.

Represents a single broadcast channel, optionally displaying a label and visual
appearance. Placed inside a `mosaik-epg` via the `channels` slot.

**Mixins:** Localeable, Valueable, Variantable, Appearanceable, Disableable, Labelable

## Example

```html
<mosaik-epg-channel value="cnn" variant="default">CNN</mosaik-epg-channel>

<mosaik-epg-channel value="bbc" appearance="plain" disabled>BBC</mosaik-epg-channel>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |              | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `label`        |              |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`       |              |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content area for channel program items   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `root` | The root part. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--epg-channel-background-color`     | String | The channel background color CSS custom property. |
| `--epg-channel-border-color`         | String | The channel border color CSS custom property.    |
| `--epg-channel-border-radius`        | String | The channel border radius CSS custom property.   |
| `--epg-channel-border-style`         | String | The channel border style CSS custom property.    |
| `--epg-channel-border-width`         | String | The channel border width CSS custom property.    |
| `--epg-channel-font-family`          | String | The channel font family CSS custom property.     |
| `--epg-channel-font-letter-spacing`  | String | The channel font letter spacing CSS custom property. |
| `--epg-channel-font-line-height`     | String | The channel font line height CSS custom property. |
| `--epg-channel-font-size`            | String | The channel font size CSS custom property.       |
| `--epg-channel-font-text-decoration` | String | The channel font text decoration CSS custom property. |
| `--epg-channel-font-text-transform`  | String | The channel font text transform CSS custom property. |
| `--epg-channel-font-weight`          | String | The channel font weight CSS custom property.     |
| `--epg-channel-foreground-color`     | String | The channel foreground color CSS custom property. |
| `--epg-channel-gap`                  | String | The channel gap CSS custom property.             |
| `--epg-channel-padding-bottom`       | String | The channel padding bottom CSS custom property.  |
| `--epg-channel-padding-left`         | String | The channel padding left CSS custom property.    |
| `--epg-channel-padding-right`        | String | The channel padding right CSS custom property.   |
| `--epg-channel-padding-top`          | String | The channel padding top CSS custom property.     |
| `--epg-channel-shadow`               | String | The channel shadow CSS custom property.          |
| `--epg-channel-shadow-blur`          | String | The channel shadow blur CSS custom property.     |
| `--epg-channel-shadow-color`         | String | The channel shadow color CSS custom property.    |
| `--epg-channel-shadow-offset-x`      | String | The channel shadow offset x CSS custom property. |
| `--epg-channel-shadow-offset-y`      | String | The channel shadow offset y CSS custom property. |
| `--epg-channel-shadow-spread`        | String | The channel shadow spread CSS custom property.   |
| `--epg-channel-transition-duration`  | String | The channel transition duration CSS custom property. |
| `--epg-channel-transition-mode`      | String | The channel transition mode CSS custom property. |
| `--epg-channel-transition-property`  | String | The channel transition property CSS custom property. |
| `--epg-channel-translate`            | String | The channel translate CSS custom property.       |

# mosaik-epg-minimap

EPG Minimap - A compact overview panel for an Electronic Program Guide.

## Example

```html
<mosaik-epg-minimap lanes="10" visible-start="0" visible-end="5"></mosaik-epg-minimap>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `channels`     |                |           | `EpgChannelElement[]`                        | Gets or sets the `channels` property.            |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lanes`        | `lanes`        |           | `number`                                     | Gets or sets the `lanes` property.               |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `visibleEnd`   | `visibleEnd`   |           | `number`                                     | Gets or sets the `visibleEnd` property.          |
| `visibleStart` | `visibleStart` |           | `number`                                     | Gets or sets the `visibleStart` property.        |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `jumpToRow`    | `CustomEvent<number>`  |                                                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description      |
|----------|------------------|
| `marker` | The marker part. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--epg-minimap-background-color`     | String | The minimap background color CSS custom property. |
| `--epg-minimap-border-color`         | String | The minimap border color CSS custom property.    |
| `--epg-minimap-border-radius`        | String | The minimap border radius CSS custom property.   |
| `--epg-minimap-border-style`         | String | The minimap border style CSS custom property.    |
| `--epg-minimap-border-width`         | String | The minimap border width CSS custom property.    |
| `--epg-minimap-font-family`          | String | The minimap font family CSS custom property.     |
| `--epg-minimap-font-letter-spacing`  | String | The minimap font letter spacing CSS custom property. |
| `--epg-minimap-font-line-height`     | String | The minimap font line height CSS custom property. |
| `--epg-minimap-font-size`            | String | The minimap font size CSS custom property.       |
| `--epg-minimap-font-text-decoration` | String | The minimap font text decoration CSS custom property. |
| `--epg-minimap-font-text-transform`  | String | The minimap font text transform CSS custom property. |
| `--epg-minimap-font-weight`          | String | The minimap font weight CSS custom property.     |
| `--epg-minimap-foreground-color`     | String | The minimap foreground color CSS custom property. |
| `--epg-minimap-gap`                  | String | The minimap gap CSS custom property.             |
| `--epg-minimap-padding-bottom`       | String | The minimap padding bottom CSS custom property.  |
| `--epg-minimap-padding-left`         | String | The minimap padding left CSS custom property.    |
| `--epg-minimap-padding-right`        | String | The minimap padding right CSS custom property.   |
| `--epg-minimap-padding-top`          | String | The minimap padding top CSS custom property.     |
| `--epg-minimap-shadow`               | String | The minimap shadow CSS custom property.          |
| `--epg-minimap-shadow-blur`          | String | The minimap shadow blur CSS custom property.     |
| `--epg-minimap-shadow-color`         | String | The minimap shadow color CSS custom property.    |
| `--epg-minimap-shadow-offset-x`      | String | The minimap shadow offset x CSS custom property. |
| `--epg-minimap-shadow-offset-y`      | String | The minimap shadow offset y CSS custom property. |
| `--epg-minimap-shadow-spread`        | String | The minimap shadow spread CSS custom property.   |
| `--epg-minimap-transition-duration`  | String | The minimap transition duration CSS custom property. |
| `--epg-minimap-transition-mode`      | String | The minimap transition mode CSS custom property. |
| `--epg-minimap-transition-property`  | String | The minimap transition property CSS custom property. |
| `--epg-minimap-translate`            | String | The minimap translate CSS custom property.       |

# mosaik-epg-now-line

EPG Now Line - A visual indicator marking the current time on an Electronic Program Guide.

Renders a vertical line that is automatically positioned based on the current time
relative to the parent `mosaik-epg` start boundary.

**Mixins:** Boundable

## Example

```html
```html
<!-- Used inside mosaik-epg; start/end are Date
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `end`          | `end`     |           | `Date`                                       | Gets or sets the `end` property.<br />The default value is the current date and time. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `start`        | `start`   |           | `Date`                                       | Gets or sets the `start` property.<br />The default value is the current date and time. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `line` | The line part. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--epg-now-line-border-color`         | String | The now line border color CSS custom property.   |
| `--epg-now-line-border-radius`        | String | The now line border radius CSS custom property.  |
| `--epg-now-line-border-style`         | String | The now line border style CSS custom property.   |
| `--epg-now-line-border-width`         | String | The now line border width CSS custom property.   |
| `--epg-now-line-font-family`          | String | The now line font family CSS custom property.    |
| `--epg-now-line-font-letter-spacing`  | String | The now line font letter spacing CSS custom property. |
| `--epg-now-line-font-line-height`     | String | The now line font line height CSS custom property. |
| `--epg-now-line-font-size`            | String | The now line font size CSS custom property.      |
| `--epg-now-line-font-text-decoration` | String | The now line font text decoration CSS custom property. |
| `--epg-now-line-font-text-transform`  | String | The now line font text transform CSS custom property. |
| `--epg-now-line-font-weight`          | String | The now line font weight CSS custom property.    |
| `--epg-now-line-gap`                  | String | The now line gap CSS custom property.            |
| `--epg-now-line-padding-bottom`       | String | The now line padding bottom CSS custom property. |
| `--epg-now-line-padding-left`         | String | The now line padding left CSS custom property.   |
| `--epg-now-line-padding-right`        | String | The now line padding right CSS custom property.  |
| `--epg-now-line-padding-top`          | String | The now line padding top CSS custom property.    |
| `--epg-now-line-shadow`               | String | The now line shadow CSS custom property.         |
| `--epg-now-line-shadow-blur`          | String | The now line shadow blur CSS custom property.    |
| `--epg-now-line-shadow-color`         | String | The now line shadow color CSS custom property.   |
| `--epg-now-line-shadow-offset-x`      | String | The now line shadow offset x CSS custom property. |
| `--epg-now-line-shadow-offset-y`      | String | The now line shadow offset y CSS custom property. |
| `--epg-now-line-shadow-spread`        | String | The now line shadow spread CSS custom property.  |
| `--epg-now-line-transition-duration`  | String | The now line transition duration CSS custom property. |
| `--epg-now-line-transition-mode`      | String | The now line transition mode CSS custom property. |
| `--epg-now-line-transition-property`  | String | The now line transition property CSS custom property. |
| `--epg-now-line-translate`            | String | The now line translate CSS custom property.      |

# mosaik-epg-program

EPG Program - An individual program slot rendered within a channel row of an Electronic Program Guide.

Represents a single broadcast program occupying a specific time range on a given channel lane.
The `lane` attribute places the program on the correct channel row; the `header` property
(set via JavaScript) provides the program title for display.

**Mixins:** FilterableChild, Localeable, Boundable, Variantable, Appearanceable, Disableable, Focusable, Valueable

## Example

```html
<mosaik-epg-program lane="0" variant="primary">Morning News</mosaik-epg-program>

<mosaik-epg-program lane="1" disabled>Off-air</mosaik-epg-program>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |               | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `end`          | `end`         |           | `Date`                                       | Gets or sets the `end` property.<br />The default value is the current date and time. |
| `header`       |               |           | `string`                                     | Gets or sets the `header` property.              |
| `isFiltered`   | `is-filtered` |           | `boolean`                                    | Indicates whether this element is currently filtered out. |
| `isFocused`    | `is-focused`  |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lane`         | `lane`        |           | `number`                                     | Gets or sets the `lane` property.                |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`       |               |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `root`         |               | readonly  | `EpgElement`                                 |                                                  |
| `start`        | `start`       |           | `Date`                                       | Gets or sets the `start` property.<br />The default value is the current date and time. |
| `value`        | `value`       |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `select`       | `CustomEvent<this>`    |                                                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content area for program title text      |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `content`   | The content part.   |
| `focusRing` | The focusRing part. |
| `header`    | The header part.    |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--epg-program-background-color`     | String | The program background color CSS custom property. |
| `--epg-program-border-color`         | String | The program border color CSS custom property.    |
| `--epg-program-border-radius`        | String | The program border radius CSS custom property.   |
| `--epg-program-border-style`         | String | The program border style CSS custom property.    |
| `--epg-program-border-width`         | String | The program border width CSS custom property.    |
| `--epg-program-font-family`          | String | The program font family CSS custom property.     |
| `--epg-program-font-letter-spacing`  | String | The program font letter spacing CSS custom property. |
| `--epg-program-font-line-height`     | String | The program font line height CSS custom property. |
| `--epg-program-font-size`            | String | The program font size CSS custom property.       |
| `--epg-program-font-text-decoration` | String | The program font text decoration CSS custom property. |
| `--epg-program-font-text-transform`  | String | The program font text transform CSS custom property. |
| `--epg-program-font-weight`          | String | The program font weight CSS custom property.     |
| `--epg-program-foreground-color`     | String | The program foreground color CSS custom property. |
| `--epg-program-gap`                  | String | The program gap CSS custom property.             |
| `--epg-program-padding-bottom`       | String | The program padding bottom CSS custom property.  |
| `--epg-program-padding-left`         | String | The program padding left CSS custom property.    |
| `--epg-program-padding-right`        | String | The program padding right CSS custom property.   |
| `--epg-program-padding-top`          | String | The program padding top CSS custom property.     |
| `--epg-program-shadow`               | String | The program shadow CSS custom property.          |
| `--epg-program-shadow-blur`          | String | The program shadow blur CSS custom property.     |
| `--epg-program-shadow-color`         | String | The program shadow color CSS custom property.    |
| `--epg-program-shadow-offset-x`      | String | The program shadow offset x CSS custom property. |
| `--epg-program-shadow-offset-y`      | String | The program shadow offset y CSS custom property. |
| `--epg-program-shadow-spread`        | String | The program shadow spread CSS custom property.   |
| `--epg-program-transition-duration`  | String | The program transition duration CSS custom property. |
| `--epg-program-transition-mode`      | String | The program transition mode CSS custom property. |
| `--epg-program-transition-property`  | String | The program transition property CSS custom property. |
| `--epg-program-translate`            | String | The program translate CSS custom property.       |

# mosaik-epg-timeline

EPG Timeline - A time-axis header rendered above an Electronic Program Guide grid.

Displays hour/minute labels across the horizontal axis using configurable width, format,
and sidebar offset values. Typically used as an internal sub-component of `mosaik-epg`.

**Mixins:** Localeable, Disableable, Variantable, Appearanceable

## Example

```html
<mosaik-epg-timeline
  day-width="7200"
  hour-width="300"
  number-of-hours-in-day="24"
  sidebar-width="100"
  has-sidebar
  format="HH:mm">
</mosaik-epg-timeline>
```

## Properties

| Property                | Attribute               | Modifiers | Type                                         | Description                                      |
|-------------------------|-------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`            | `appearance`            |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`               |                         | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`             |                         | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dayWidth`              | `dayWidth`              |           | `number`                                     |                                                  |
| `dir`                   | `dir`                   |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`              | `disabled`              |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`          |                         | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `format`                | `format`                |           | `string`                                     |                                                  |
| `hasSidebar`            | `hasSidebar`            |           | `boolean`                                    |                                                  |
| `hourWidth`             | `hourWidth`             |           | `number`                                     |                                                  |
| `lang`                  | `lang`                  |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`                |                         |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `numberOfHoursInDay`    | `numberOfHoursInDay`    |           | `number`                                     |                                                  |
| `offsetStartHoursRange` | `offsetStartHoursRange` |           | `number`                                     |                                                  |
| `sidebarWidth`          | `sidebarWidth`          |           | `number`                                     |                                                  |
| `variant`               | `variant`               |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `container` | The container part. |
| `divider`   | The divider part.   |
| `dividers`  | The dividers part.  |
| `label`     | The label part.     |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--epg-timeline-background-color`     | String | The timeline background color CSS custom property. |
| `--epg-timeline-border-color`         | String | The timeline border color CSS custom property.   |
| `--epg-timeline-border-radius`        | String | The timeline border radius CSS custom property.  |
| `--epg-timeline-border-style`         | String | The timeline border style CSS custom property.   |
| `--epg-timeline-border-width`         | String | The timeline border width CSS custom property.   |
| `--epg-timeline-font-family`          | String | The timeline font family CSS custom property.    |
| `--epg-timeline-font-letter-spacing`  | String | The timeline font letter spacing CSS custom property. |
| `--epg-timeline-font-line-height`     | String | The timeline font line height CSS custom property. |
| `--epg-timeline-font-size`            | String | The timeline font size CSS custom property.      |
| `--epg-timeline-font-text-decoration` | String | The timeline font text decoration CSS custom property. |
| `--epg-timeline-font-text-transform`  | String | The timeline font text transform CSS custom property. |
| `--epg-timeline-font-weight`          | String | The timeline font weight CSS custom property.    |
| `--epg-timeline-foreground-color`     | String | The timeline foreground color CSS custom property. |
| `--epg-timeline-gap`                  | String | The timeline gap CSS custom property.            |
| `--epg-timeline-padding-bottom`       | String | The timeline padding bottom CSS custom property. |
| `--epg-timeline-padding-left`         | String | The timeline padding left CSS custom property.   |
| `--epg-timeline-padding-right`        | String | The timeline padding right CSS custom property.  |
| `--epg-timeline-padding-top`          | String | The timeline padding top CSS custom property.    |
| `--epg-timeline-shadow`               | String | The timeline shadow CSS custom property.         |
| `--epg-timeline-shadow-blur`          | String | The timeline shadow blur CSS custom property.    |
| `--epg-timeline-shadow-color`         | String | The timeline shadow color CSS custom property.   |
| `--epg-timeline-shadow-offset-x`      | String | The timeline shadow offset x CSS custom property. |
| `--epg-timeline-shadow-offset-y`      | String | The timeline shadow offset y CSS custom property. |
| `--epg-timeline-shadow-spread`        | String | The timeline shadow spread CSS custom property.  |
| `--epg-timeline-transition-duration`  | String | The timeline transition duration CSS custom property. |
| `--epg-timeline-transition-mode`      | String | The timeline transition mode CSS custom property. |
| `--epg-timeline-transition-property`  | String | The timeline transition property CSS custom property. |
| `--epg-timeline-translate`            | String | The timeline translate CSS custom property.      |

# mosaik-epg

EPG - An Electronic Program Guide component for displaying TV schedules in a timeline grid.

Renders a scrollable grid of channels and their time-slotted programs. Supports zooming,
a now-line indicator, a minimap overview, and timeline formatting.

**Mixins:** Filterable, Boundable, Localeable, Appearanceable, Variantable, Disableable

## Example

```html
<mosaik-epg zoom="30" show-now-line timeline-format="HH:mm">
  <mosaik-epg-channel value="bbc">BBC One</mosaik-epg-channel>
  <mosaik-epg-channel value="cnn">CNN</mosaik-epg-channel>
</mosaik-epg>
```

## Properties

| Property            | Attribute            | Modifiers | Type                                         | Description                                      |
|---------------------|----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance`         |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`           |                      | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                      | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`           |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                      | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `end`               | `end`                |           | `Date`                                       | Gets or sets the `end` property.<br />The default value is the current date and time. |
| `filter`            |                      |           | `string`                                     | Gets or sets the `filter` property.<br />The default value is an empty string, which means no filter is applied. |
| `filterMemberPath`  | `filter-member-path` |           | `string`                                     | Gets or sets the `filterMemberPath` property.<br />The member path is a dot-separated string that specifies the property to filter by.<br />The default value is an empty string, which means no specific member path is used for filtering. |
| `filterPlaceholder` |                      |           | `string`                                     | Gets or sets the `filterPlaceholder` property.<br />The default value is an empty string, which means no placeholder is shown in the filter input. |
| `isNow`             |                      |           | `boolean`                                    | Gets or sets the `isNow` property.               |
| `items`             |                      | readonly  | `(EpgChannelElement \| EpgProgramElement)[]` | Returns the `items` property.                    |
| `lang`              | `lang`               |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`            |                      |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `showFilter`        | `show-filter`        |           | `boolean`                                    | Gets or sets the `showFilter` property.<br />The default value is `false`, which means the filter input is not shown. |
| `showMinimap`       | `showMinimap`        |           | `boolean`                                    | Gets or sets the `showMinimap` property.         |
| `showNowLine`       | `showNowLine`        |           | `boolean`                                    | Gets or sets the `showNowLine` property.         |
| `start`             | `start`              |           | `Date`                                       | Gets or sets the `start` property.<br />The default value is the current date and time. |
| `timelineFormat`    | `timelineFormat`     |           | `string`                                     | Gets or sets the `timelineFormat` property.      |
| `totalWidth`        |                      | readonly  | `number`                                     | Gets or sets the `totalWidth` property.          |
| `variant`           | `variant`            |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `visibleEnd`        |                      |           | `number`                                     | Gets or sets the `visibleEnd` property.          |
| `visibleStart`      |                      |           | `number`                                     | Gets or sets the `visibleStart` property.        |
| `zoom`              | `zoom`               |           | `number`                                     | Gets or sets the `zoom` property.                |

## Methods

| Method                      | Type                                             | Description                                      |
|-----------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`                | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `dragStart`                 | `(e: MouseEvent): void`                          |                                                  |
| `emit`                      | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `nextDate`                  | `(): void`                                       |                                                  |
| `off`                       | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                        | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onMinimapJump`             | `(e: CustomEvent<number>): void`                 |                                                  |
| `onScroll`                  | `(event: Event): void`                           |                                                  |
| `onSlotChange`              | `(event: Event): void`                           |                                                  |
| `previousDate`              | `(): void`                                       |                                                  |
| `requestUpdate`             | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `scrollToNow`               | `(smooth?: boolean): void`                       |                                                  |
| `touchStart`                | `(e: TouchEvent): void`                          |                                                  |
| `updateNowButtonVisibility` | `(): void`                                       |                                                  |
| `zoomIn`                    | `(): void`                                       |                                                  |
| `zoomOut`                   | `(): void`                                       |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
|            | The default slot.                                |
| `channels` | `mosaik-epg-channel` elements for each broadcast channel row |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `toolbar`  | The toolbar slot.                                |

## CSS Shadow Parts

| Part       | Description        |
|------------|--------------------|
| `channels` | The channels part. |
| `content`  | The content part.  |
| `corner`   | The corner part.   |
| `filter`   | The filter part.   |
| `minimap`  | The minimap part.  |
| `root`     | The root part.     |
| `scroll`   | The scroll part.   |
| `timeline` | The timeline part. |
| `toolbar`  | The toolbar part.  |
| `zoomOut`  | The zoomOut part.  |

## CSS Custom Properties

| Property                     | Type   | Description                                   |
|------------------------------|--------|-----------------------------------------------|
| `--epg-background-color`     | String | The background color CSS custom property.     |
| `--epg-border-color`         | String | The border color CSS custom property.         |
| `--epg-border-radius`        | String | The border radius CSS custom property.        |
| `--epg-border-style`         | String | The border style CSS custom property.         |
| `--epg-border-width`         | String | The border width CSS custom property.         |
| `--epg-font-family`          | String | The font family CSS custom property.          |
| `--epg-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--epg-font-line-height`     | String | The font line height CSS custom property.     |
| `--epg-font-size`            | String | The font size CSS custom property.            |
| `--epg-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--epg-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--epg-font-weight`          | String | The font weight CSS custom property.          |
| `--epg-foreground-color`     | String | The foreground color CSS custom property.     |
| `--epg-gap`                  | String | The gap CSS custom property.                  |
| `--epg-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--epg-padding-left`         | String | The padding left CSS custom property.         |
| `--epg-padding-right`        | String | The padding right CSS custom property.        |
| `--epg-padding-top`          | String | The padding top CSS custom property.          |
| `--epg-shadow`               | String | The shadow CSS custom property.               |
| `--epg-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--epg-shadow-color`         | String | The shadow color CSS custom property.         |
| `--epg-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--epg-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--epg-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--epg-transition-duration`  | String | The transition duration CSS custom property.  |
| `--epg-transition-mode`      | String | The transition mode CSS custom property.      |
| `--epg-transition-property`  | String | The transition property CSS custom property.  |
| `--epg-translate`            | String | The translate CSS custom property.            |

# mosaik-error-state

ErrorState - An error handling component that displays failure states and recovery options for users.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Error state with recovery action:

```html
<mosaik-error-state code="ERR_NETWORK">
  <mosaik-button slot="actions" appearance="primary" onclick="retryConnection()">Retry</mosaik-button>
</mosaik-error-state>
```

Error state with code and support action:

```html
<mosaik-error-state code="ERR_500">
  <mosaik-button slot="actions" onclick="contactSupport()">Contact Support</mosaik-button>
  <mosaik-button slot="actions" appearance="soft" onclick="goBack()">Go Back</mosaik-button>
</mosaik-error-state>
```

Error state with header and content set via JavaScript:

```html
<mosaik-error-state id="errorState" code="ERR_404"></mosaik-error-state>
<script>
  const el = document.getElementById('errorState');
  el.header = 'Page Not Found';
  el.content = 'The requested resource could not be found.';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `code`         | `code`    |           | `string`                                     | Gets or sets the `code` property.<br />The technical error code or additional error details for debugging.<br />The default value is an empty string, which means no error code is displayed. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |           |           | `string`                                     | Gets or sets the `content` property of the state. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`       |           |           | `string`                                     | Gets or sets the `header` property.<br />The primary error message displayed to users.<br />The default value is an empty string, which means no header is displayed. |
| `icon`         |           |           | `string`                                     | Gets or sets the `icon` property.<br />The icon SVG path data for the error state visual indicator.<br />The default value is an empty string, which displays a default error circle icon. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content area for additional error information or custom content |
| `actions` | Action buttons for error recovery (retry, refresh, contact support, go back, etc.) |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `code`       | The code container for technical error details or error codes |
| `content`    | The content text container for detailed error explanation |
| `header`     | The header text container for primary error messaging |
| `icon`       | The icon container for error state visual indicators |
| `innerStack` | The internal stack container for action slot elements |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--error-state-font-family`                 | String | The state font family CSS custom property.       |
| `--error-state-font-letter-spacing`         | String | The state font letter spacing CSS custom property. |
| `--error-state-font-line-height`            | String | The state font line height CSS custom property.  |
| `--error-state-font-size`                   | String | The state font size CSS custom property.         |
| `--error-state-font-text-decoration`        | String | The state font text decoration CSS custom property. |
| `--error-state-font-text-transform`         | String | The state font text transform CSS custom property. |
| `--error-state-font-weight`                 | String | The state font weight CSS custom property.       |
| `--error-state-foreground-color`            | String | The text color for error state content           |
| `--error-state-gap`                         | String | The spacing between icon, text, and action elements |
| `--error-state-header-font-family`          | String | The font family for header text                  |
| `--error-state-header-font-letter-spacing`  | String | The letter spacing for header text               |
| `--error-state-header-font-line-height`     | String | The line height for header text                  |
| `--error-state-header-font-size`            | String | The font size for header text                    |
| `--error-state-header-font-text-decoration` | String | The text decoration style for header text        |
| `--error-state-header-font-text-transform`  | String | The text transformation style for header text    |
| `--error-state-header-font-weight`          | String | The font weight for header text                  |
| `--error-state-padding-bottom`              | String | The bottom padding inside the error state container |
| `--error-state-padding-left`                | String | The left padding inside the error state container |
| `--error-state-padding-right`               | String | The right padding inside the error state container |
| `--error-state-padding-top`                 | String | The top padding inside the error state container |
| `--error-state-shadow`                      | String | The state shadow CSS custom property.            |
| `--error-state-shadow-blur`                 | String | The state shadow blur CSS custom property.       |
| `--error-state-shadow-color`                | String | The state shadow color CSS custom property.      |
| `--error-state-shadow-offset-x`             | String | The state shadow offset x CSS custom property.   |
| `--error-state-shadow-offset-y`             | String | The state shadow offset y CSS custom property.   |
| `--error-state-shadow-spread`               | String | The state shadow spread CSS custom property.     |
| `--error-state-transition-duration`         | String | The state transition duration CSS custom property. |
| `--error-state-transition-mode`             | String | The state transition mode CSS custom property.   |
| `--error-state-transition-property`         | String | The state transition property CSS custom property. |
| `--error-state-translate`                   | String | The state translate CSS custom property.         |

# mosaik-error

Error - A visual component for displaying error messages with optional icons and animations.

**Mixins:** Themeable, Animatable

## Examples

Basic error message:

```html
<mosaik-error text="Invalid email address"></mosaik-error>
```

Error with icon:

```html
<mosaik-error text="Connection failed">
  <mosaik-icon slot="icon"></mosaik-icon>
</mosaik-error>
```

Error with text wrapping:

```html
<mosaik-error
  text="This is a longer error message that should wrap to multiple lines"
  text-overflow="wrap">
</mosaik-error>
```

Animated error appearance:

```html
<mosaik-error id="validationError" text="Required field" style="display: none;"></mosaik-error>
<script>
  const error = document.querySelector('#validationError');
  error.style.display = 'block';
  error.onEnterAnimation(); // Triggers shake animation
</script>
```

## Properties

| Property          | Attribute      | Modifiers | Type                                         | Description                                      |
|-------------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `animationTarget` |                | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`         |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`           | `enter`        |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`         |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `lang`            | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`            | `text`         |           | `string`                                     | Gets or sets the `text` property.                |
| `textOverflow`    | `textOverflow` |           | `TextOverflow`                               | Gets or sets the `textOverflow` property.        |
| `themeName`       |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `(): Promise<boolean>`                           | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `(): Promise<boolean>`                           | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `icon`  | Optional icon to display before the error text   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                |
|--------|----------------------------|
| `root` | The root container element |
| `text` | The text display element   |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--error-background-color`     | String | Background color of the error container       |
| `--error-border-color`         | String | Border color for the error outline            |
| `--error-border-radius`        | String | Corner rounding radius                        |
| `--error-border-style`         | String | Border line style                             |
| `--error-border-width`         | String | Border thickness                              |
| `--error-font-family`          | String | Font family for error text                    |
| `--error-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--error-font-line-height`     | String | The font line height CSS custom property.     |
| `--error-font-size`            | String | Font size for error text                      |
| `--error-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--error-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--error-font-weight`          | String | Font weight for error text                    |
| `--error-foreground-color`     | String | Text color                                    |
| `--error-gap`                  | String | Spacing between icon and text                 |
| `--error-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--error-padding-left`         | String | The padding left CSS custom property.         |
| `--error-padding-right`        | String | The padding right CSS custom property.        |
| `--error-padding-top`          | String | The padding top CSS custom property.          |
| `--error-shadow`               | String | Drop shadow or elevation effect               |
| `--error-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--error-shadow-color`         | String | The shadow color CSS custom property.         |
| `--error-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--error-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--error-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--error-transition-duration`  | String | Duration of animations                        |
| `--error-transition-mode`      | String | Timing function for transitions               |
| `--error-transition-property`  | String | CSS properties to transition                  |
| `--error-translate`            | String | The translate CSS custom property.            |

# mosaik-expandable

Expandable - A collapsible container that can be expanded or collapsed to reveal or hide its content.

**Mixins:** Themeable, Expandable, Animatable, Disableable

## Examples

```html
<mosaik-expandable>
  <!-- Content to be revealed or hidden -->
</mosaik-expandable>
```

Expandable with direction:

```html
<mosaik-expandable direction="down">
  <div>Collapsible section content</div>
</mosaik-expandable>
```

## Properties

| Property          | Attribute     | Modifiers | Type                                         | Description                                      |
|-------------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `animationTarget` |               | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`         |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collapsed`       |               |           | `IEventEmitter<IEventDetail>`                | Called when the element is collapsed.            |
| `connected`       |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `direction`       | `direction`   |           | `ExpandDirection`                            | Gets or sets the `direction` property.           |
| `disabled`        | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`           | `enter`       |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`        |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `expanded`        |               |           | `IEventEmitter<IEventDetail>`                | Called when the element is expanded.             |
| `isExpanded`      | `is-expanded` |           | `boolean`                                    | Whether the element is currently expanded.       |
| `lang`            | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`       |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`         |               |           | `IEventEmitter<IEventDetail>`                | Called when the element is toggled.              |

## Methods

| Method                | Type                                             | Description                                      |
|-----------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`          | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `collapse`            | `(): void`                                       | Collapses the element.                           |
| `emit`                | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`              | `(): void`                                       | Expands the element.                             |
| `off`                 | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                  | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`    | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onIsExpandedChanged` | `(prev: boolean, next: boolean): void`           | This method is invoked when the `isExpanded` property is changed.<br />Handles the animation based on the expand direction.<br /><br />**prev**: The previous value of `isExpanded`.<br />**next**: The new value of `isExpanded`. |
| `play`                | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`       | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`              | `(): void`                                       | Toggles the element between expanded and collapsed states. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `collapsed`    | `CollapsedEvent`       | Called when the element is collapsed.            |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `expanded`     | `ExpandedEvent`        | Called when the element is expanded.             |
| `toggled`      | `ToggledEvent`         | Called when the element is toggled.              |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `content` | The content part. |

## CSS Custom Properties

| Property                            | Type   | Description                                   |
|-------------------------------------|--------|-----------------------------------------------|
| `--expandable-font-family`          | String | The font family CSS custom property.          |
| `--expandable-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--expandable-font-line-height`     | String | The font line height CSS custom property.     |
| `--expandable-font-size`            | String | The font size CSS custom property.            |
| `--expandable-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--expandable-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--expandable-font-weight`          | String | The font weight CSS custom property.          |
| `--expandable-gap`                  | String | The gap CSS custom property.                  |
| `--expandable-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--expandable-padding-left`         | String | The padding left CSS custom property.         |
| `--expandable-padding-right`        | String | The padding right CSS custom property.        |
| `--expandable-padding-top`          | String | The padding top CSS custom property.          |
| `--expandable-shadow`               | String | The shadow CSS custom property.               |
| `--expandable-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--expandable-shadow-color`         | String | The shadow color CSS custom property.         |
| `--expandable-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--expandable-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--expandable-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--expandable-transition-duration`  | String | The transition duration CSS custom property.  |
| `--expandable-transition-mode`      | String | The transition mode CSS custom property.      |
| `--expandable-transition-property`  | String | The transition property CSS custom property.  |
| `--expandable-translate`            | String | The translate CSS custom property.            |

# mosaik-expander-group

ExpanderGroup - A component that represents a group of expandable items.

**Mixins:** Themeable, Disableable, Variantable, Appearanceable, Slottable

## Examples

Basic expander group with two items:

```html
<mosaik-expander-group>
  <mosaik-expander header="Expander 1">
    <mosaik-text text="Content for expander 1."></mosaik-text>
  </mosaik-expander>
  <mosaik-expander header="Expander 2">
    <mosaik-text text="Content for expander 2."></mosaik-text>
  </mosaik-expander>
</mosaik-expander-group>
```

Expander group with variant and appearance:

```html
<mosaik-expander-group appearance="outline" variant="primary">
  <mosaik-expander header="Section A" is-expanded>
    <mosaik-text text="Section A is pre-expanded."></mosaik-text>
  </mosaik-expander>
  <mosaik-expander header="Section B">
    <mosaik-text text="Section B content."></mosaik-text>
  </mosaik-expander>
</mosaik-expander-group>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Default    | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 |            | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |            | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        |            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              |            | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `direction`    | `direction`  |           | `ExpandDirection`                            |            | Gets or sets the `direction` property.           |
| `disabled`     | `disabled`   |           | `boolean`                                    |            | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        |            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     |            | The lang property indicates the language of the element's content. |
| `mode`         | `mode`       |           | `ExpansionMode`                              |            | Gets or sets the `mode` property.                |
| `stacking`     | `stacking`   |           | `ExpanderGroupStacking`                      | "'joined'" | Gets or sets the `stacking` property.<br />The `stacking` property defines how expander items are visually stacked.<br />- `'joined'` (default): Items are visually connected with no gap and flattened intermediate border-radii.<br />- `'separated'`: Items are visually separated with a gap, and each item retains its full border-radius. |
| `themeName`    |              |           | `string`                                     |            | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`      |              | readonly  | `IEventEmitter<IEventDetail>`                |            | Called when the expander item is toggled.<br />Provides reference to `IEventDetail` as event detail. |
| `variant`      | `variant`    |           | `Variant`                                    |            | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `collapse`             | `(expander: ExpanderElement): void`              |                                                  |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`               | `(expander: ExpanderElement): void`              |                                                  |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `toggled`      | `ToggledEvent`         | Fired when an expander item is changed.          |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing expander items.     |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--expander-group-background-color`     | Color  | The background-color property for the expander group. |
| `--expander-group-border-color`         | Color  | The border-color property for the expander group. |
| `--expander-group-border-radius`        | String | The border-radius property for the expander group. |
| `--expander-group-border-style`         | String | The border-style property for the expander group. |
| `--expander-group-border-width`         | String | The border-width property for the expander group. |
| `--expander-group-font-family`          | String | The font-family property for the expander group text. |
| `--expander-group-font-letter-spacing`  | String | The letter-spacing property for the expander group text. |
| `--expander-group-font-line-height`     | String | The line-height property for the expander group text. |
| `--expander-group-font-size`            | String | The font-size property for the expander group text. |
| `--expander-group-font-text-decoration` | String | The text-decoration property for the expander group text. |
| `--expander-group-font-text-transform`  | String | The text-transform property for the expander group text. |
| `--expander-group-font-weight`          | String | The font-weight property for the expander group text. |
| `--expander-group-foreground-color`     | Color  | The foreground-color property for the expander group. |
| `--expander-group-gap`                  | String | The gap between items in the expander group.     |
| `--expander-group-padding-bottom`       | String | The padding-bottom property for the expander group. |
| `--expander-group-padding-left`         | String | The padding-left property for the expander group. |
| `--expander-group-padding-right`        | String | The padding-right property for the expander group. |
| `--expander-group-padding-top`          | String | The padding-top property for the expander group. |
| `--expander-group-shadow`               | String | The group shadow CSS custom property.            |
| `--expander-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--expander-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--expander-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--expander-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--expander-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--expander-group-transition-duration`  | String | The transition duration for animations.          |
| `--expander-group-transition-mode`      | String | The transition mode for animations.              |
| `--expander-group-transition-property`  | String | The transition property for animations.          |
| `--expander-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-expander-header

ExpanderHeader - A component that represents a header within an expander element.

**Mixins:** Themeable

## Examples

Using the text attribute:

```html
<mosaik-expander-header text="Header Content"></mosaik-expander-header>
```

With custom slotted content:

```html
<mosaik-expander-header>
  <mosaik-text slot="text" text="Header Content"></mosaik-text>
</mosaik-expander-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`    |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `text`  | The slot for placing header content.             |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--expander-header-background-color`     | Color  | The background-color property for the header.    |
| `--expander-header-border-color`         | Color  | The border-color property for the header.        |
| `--expander-header-font-family`          | String | The font-family property for the header text.    |
| `--expander-header-font-letter-spacing`  | String | The letter-spacing property for the header text. |
| `--expander-header-font-line-height`     | String | The line-height property for the header text.    |
| `--expander-header-font-size`            | String | The font-size property for the header text.      |
| `--expander-header-font-text-decoration` | String | The text-decoration property for the header text. |
| `--expander-header-font-text-transform`  | String | The text-transform property for the header text. |
| `--expander-header-font-weight`          | String | The font-weight property for the header text.    |
| `--expander-header-foreground-color`     | Color  | The foreground-color property for the header.    |
| `--expander-header-gap`                  | String | The header gap CSS custom property.              |
| `--expander-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--expander-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--expander-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--expander-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--expander-header-shadow`               | String | The header shadow CSS custom property.           |
| `--expander-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--expander-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--expander-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--expander-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--expander-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--expander-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--expander-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--expander-header-transition-property`  | String | The header transition property CSS custom property. |
| `--expander-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-expander-sub-header

Expander Sub Header - A component that represents a sub-header within an expander element.

**Mixins:** Themeable

## Examples

Using the text attribute:

```html
<mosaik-expander-sub-header text="Sub Header Content"></mosaik-expander-sub-header>
```

With custom slotted content:

```html
<mosaik-expander-sub-header>
  <mosaik-text slot="text" text="Sub Header Content"></mosaik-text>
</mosaik-expander-sub-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`    |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `text`  | The slot for placing sub-header content.         |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--expander-sub-header-background-color`     | Color  | The background-color property for the sub header. |
| `--expander-sub-header-border-color`         | Color  | The border-color property for the sub header.    |
| `--expander-sub-header-font-family`          | String | The font-family property for the sub header text. |
| `--expander-sub-header-font-letter-spacing`  | String | The letter-spacing property for the sub header text. |
| `--expander-sub-header-font-line-height`     | String | The line-height property for the sub header text. |
| `--expander-sub-header-font-size`            | String | The font-size property for the sub header text.  |
| `--expander-sub-header-font-text-decoration` | String | The text-decoration property for the sub header text. |
| `--expander-sub-header-font-text-transform`  | String | The text-transform property for the sub header text. |
| `--expander-sub-header-font-weight`          | String | The font-weight property for the sub header text. |
| `--expander-sub-header-foreground-color`     | Color  | The foreground-color property for the sub header. |
| `--expander-sub-header-gap`                  | String | The sub header gap CSS custom property.          |
| `--expander-sub-header-padding-bottom`       | String | The sub header padding bottom CSS custom property. |
| `--expander-sub-header-padding-left`         | String | The sub header padding left CSS custom property. |
| `--expander-sub-header-padding-right`        | String | The sub header padding right CSS custom property. |
| `--expander-sub-header-padding-top`          | String | The sub header padding top CSS custom property.  |
| `--expander-sub-header-shadow`               | String | The sub header shadow CSS custom property.       |
| `--expander-sub-header-shadow-blur`          | String | The sub header shadow blur CSS custom property.  |
| `--expander-sub-header-shadow-color`         | String | The sub header shadow color CSS custom property. |
| `--expander-sub-header-shadow-offset-x`      | String | The sub header shadow offset x CSS custom property. |
| `--expander-sub-header-shadow-offset-y`      | String | The sub header shadow offset y CSS custom property. |
| `--expander-sub-header-shadow-spread`        | String | The sub header shadow spread CSS custom property. |
| `--expander-sub-header-transition-duration`  | String | The sub header transition duration CSS custom property. |
| `--expander-sub-header-transition-mode`      | String | The sub header transition mode CSS custom property. |
| `--expander-sub-header-transition-property`  | String | The sub header transition property CSS custom property. |
| `--expander-sub-header-translate`            | String | The sub header translate CSS custom property.    |

# mosaik-expander

Expander - A component that represents an expandable section of content.

**Mixins:** Themeable, Rippleable, Disableable, Animatable, Variantable, Appearanceable

## Examples

Basic expander with header attribute:

```html
<mosaik-expander header="Expander Header">
  <mosaik-text text="Content inside the expander."></mosaik-text>
</mosaik-expander>
```

Expander with sub-header and pre-expanded state:

```html
<mosaik-expander header="Advanced Settings" sub-header="Configure advanced options" is-expanded>
  <mosaik-text text="Advanced configuration content goes here."></mosaik-text>
</mosaik-expander>
```

## Properties

| Property          | Attribute       | Modifiers | Type                                         | Description                                      |
|-------------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `animationTarget` |                 | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `appearance`      | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `caretPosition`   | `caretPosition` |           | `CaretPosition`                              | Gets or sets the `caretPosition` property.       |
| `changed`         |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `direction`       | `direction`     |           | `ExpandDirection`                            | Gets or sets the `direction` property.<br />When used inside an ExpanderGroup, inherits the group's direction unless explicitly set. |
| `disabled`        | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`           | `enter`         |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`          |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `header`          | `header`        |           | `string`                                     | Gets or sets the `header` property.              |
| `icon`            |                 |           | `string`                                     | Gets or sets the `icon` property.                |
| `isExpanded`      | `isExpanded`    |           | `boolean`                                    | Gets or sets the `isExpanded` property.          |
| `lang`            | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`          | `ripple`        |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `subHeader`       | `subHeader`     |           | `string`                                     | Gets or sets the `subHeader` property.           |
| `themeName`       |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`         | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `collapse`         | `(): void`                                       |                                                  |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`           | `(): void`                                       |                                                  |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`           | `(): void`                                       |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `collapsed`    | `CollapsedEvent`       | Fired when the element is collapsed.             |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `expanded`     | `ExpandedEvent`        | Fired when the element is expanded.              |
| `toggled`      | `ToggledEvent`         | Fired when the element is toggled.               |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
|             | The default slot for placing main content inside the expander. |
| `actions`   | The slot for placing action elements in the expander header. |
| `header`    | The header slot.                                 |
| `icon`      | The slot for placing an icon in the expander.    |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | The slot for placing sub-header content.         |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `actions`    | The actions part.                                |
| `caret`      | The part representing the caret or indicator for expansion. |
| `expandable` | The part representing the expandable content area. |
| `focusRing`  | The focus ring part for accessibility.           |
| `heading`    | The part representing the header area.           |
| `icon`       | The part representing the icon.                  |
| `ripple`     | The ripple effect part for interaction.          |
| `root`       | The root part of the expander.                   |
| `stack`      | The stack part.                                  |
| `subHeader`  | The part representing the sub-header text.       |

## CSS Custom Properties

| Property                          | Type   | Description                                      |
|-----------------------------------|--------|--------------------------------------------------|
| `--expander-background-color`     | Color  | The background-color property for the expander.  |
| `--expander-border-color`         | Color  | The border-color property for the expander.      |
| `--expander-border-radius`        | String | The border-radius property for the expander.     |
| `--expander-border-style`         | String | The border-style property for the expander.      |
| `--expander-border-width`         | String | The border-width property for the expander.      |
| `--expander-divider-height`       | String | The height of the divider within the expander.   |
| `--expander-font-family`          | String | The font-family property for the expander text.  |
| `--expander-font-letter-spacing`  | String | The letter-spacing property for the expander text. |
| `--expander-font-line-height`     | String | The line-height property for the expander text.  |
| `--expander-font-size`            | String | The font-size property for the expander text.    |
| `--expander-font-text-decoration` | String | The text-decoration property for the expander text. |
| `--expander-font-text-transform`  | String | The text-transform property for the expander text. |
| `--expander-font-weight`          | String | The font-weight property for the expander text.  |
| `--expander-foreground-color`     | Color  | The foreground-color property for the expander.  |
| `--expander-gap`                  | String | The gap property for spacing within the expander. |
| `--expander-padding-bottom`       | String | The padding-bottom property for the expander.    |
| `--expander-padding-left`         | String | The padding-left property for the expander.      |
| `--expander-padding-right`        | String | The padding-right property for the expander.     |
| `--expander-padding-top`          | String | The padding-top property for the expander.       |
| `--expander-ripple-color`         | Color  | The ripple color CSS custom property.            |
| `--expander-ripple-duration`      | String | The ripple duration CSS custom property.         |
| `--expander-shadow`               | String | The shadow CSS custom property.                  |
| `--expander-shadow-blur`          | String | Shadow blur radius for elevation effect          |
| `--expander-shadow-color`         | String | Shadow color for elevation effect                |
| `--expander-shadow-offset-x`      | String | Horizontal shadow offset                         |
| `--expander-shadow-offset-y`      | String | Vertical shadow offset                           |
| `--expander-shadow-spread`        | String | Shadow spread radius                             |
| `--expander-transition-duration`  | String | The transition duration for the expander animations. |
| `--expander-transition-mode`      | String | The transition mode for the expander animations. |
| `--expander-transition-property`  | String | The transition property for the expander animations. |
| `--expander-translate`            | String | The translate CSS custom property.               |

# mosaik-fab-group

Floating Action Button Group - A group of Floating Action Buttons that trigger primary actions in an application.

**Mixins:** Themeable, Openable, Closeable, Disableable, Appearanceable, Variantable, Labelable, Iconable, Slottable

## Examples

Basic FAB group with trigger and action buttons:

```html
<mosaik-fab-group>
  <mosaik-fab slot="trigger" label="Menu" variant="primary"></mosaik-fab>
  <mosaik-fab label="Add"></mosaik-fab>
  <mosaik-fab label="Edit"></mosaik-fab>
  <mosaik-fab label="Delete"></mosaik-fab>
</mosaik-fab-group>
```

FAB group that opens upward:

```html
<mosaik-fab-group direction="top">
  <mosaik-fab slot="trigger" variant="primary"></mosaik-fab>
  <mosaik-fab label="Share"></mosaik-fab>
  <mosaik-fab label="Copy"></mosaik-fab>
</mosaik-fab-group>
```

## Properties

| Property       | Attribute       | Modifiers | Type                                         | Description                                      |
|----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `closeable`    | `closeable`     |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`       |                 |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `direction`    | `direction`     |           | `FabGroupDirection`                          | Gets or sets the `direction` property.           |
| `disabled`     | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |                 |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition` | `icon-position` |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`     | `icon-size`     |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isOpen`       | `is-open`       |           | `boolean`                                    | Gets or sets the `isOpen` property that allows you to show or hide the `FloatingActionButtonGroupElement` menu. |
| `label`        |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`       |                 |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `themeName`    |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Close the FAB group.                             |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `open`                 | `(): Promise<void>`                              | Opens the FAB group.                             |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): Promise<void>`                              | Toggles the FAB group.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Called when the FAB group is closed.             |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Called when the FAB group is opened.             |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default slot for FABs.                       |
| `overlay` | The overlay slot (useful for badges or additional visual elements). |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |
| `trigger` | The trigger slot for initiating the FAB group.   |

## CSS Shadow Parts

| Part   | Description                     |
|--------|---------------------------------|
| `fab`  | The FAB part within the group.  |
| `menu` | The menu part of the FAB group. |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--floating-action-button-group-font-family`     | String | The action button group font family CSS custom property. |
| `--floating-action-button-group-font-letter-spacing` | String | The action button group font letter spacing CSS custom property. |
| `--floating-action-button-group-font-line-height` | String | The action button group font line height CSS custom property. |
| `--floating-action-button-group-font-size`       | String | The action button group font size CSS custom property. |
| `--floating-action-button-group-font-text-decoration` | String | The action button group font text decoration CSS custom property. |
| `--floating-action-button-group-font-text-transform` | String | The action button group font text transform CSS custom property. |
| `--floating-action-button-group-font-weight`     | String | The action button group font weight CSS custom property. |
| `--floating-action-button-group-gap`             | String | The action button group gap CSS custom property. |
| `--floating-action-button-group-padding-bottom`  | String | The action button group padding bottom CSS custom property. |
| `--floating-action-button-group-padding-left`    | String | The action button group padding left CSS custom property. |
| `--floating-action-button-group-padding-right`   | String | The action button group padding right CSS custom property. |
| `--floating-action-button-group-padding-top`     | String | The action button group padding top CSS custom property. |
| `--floating-action-button-group-shadow`          | String | The action button group shadow CSS custom property. |
| `--floating-action-button-group-shadow-blur`     | String | The action button group shadow blur CSS custom property. |
| `--floating-action-button-group-shadow-color`    | String | The action button group shadow color CSS custom property. |
| `--floating-action-button-group-shadow-offset-x` | String | The action button group shadow offset x CSS custom property. |
| `--floating-action-button-group-shadow-offset-y` | String | The action button group shadow offset y CSS custom property. |
| `--floating-action-button-group-shadow-spread`   | String | The action button group shadow spread CSS custom property. |
| `--floating-action-button-group-transition-duration` | String | The action button group transition duration CSS custom property. |
| `--floating-action-button-group-transition-mode` | String | The action button group transition mode CSS custom property. |
| `--floating-action-button-group-transition-property` | String | The action button group transition property CSS custom property. |
| `--floating-action-button-group-translate`       | String | The action button group translate CSS custom property. |

# mosaik-fab

FloatingActionButton - A prominent circular button designed for primary actions with elevated visual prominence.

**Mixins:** Themeable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic floating action button:

```html
<mosaik-fab variant="primary"></mosaik-fab>
```

Extended floating action button with label:

```html
<mosaik-fab label="Compose"
            variant="primary"
            appearance="solid"></mosaik-fab>
```

## Properties

| Property       | Attribute       | Modifiers | Type                                         | Description                                      |
|----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |                 |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition` | `icon-position` |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`     | `icon-size`     |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`       | `is-busy`       |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isFocused`    | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`        |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`       | `ripple`        |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`         | `size`          |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`         | `type`          |           | `ButtonType`                                 | The type of the button.                          |
| `value`        | `value`         |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `icon`    | Icon content area for the primary visual action indicator |
| `label`   | Optional text label for extended floating action button variations |
| `overlay` | Overlay content area for badges, notifications, or status indicators |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `button`       | The main button element container                |
| `elevation`    | The elevation shadow effect container for visual prominence |
| `focusRing`    | The focus indicator ring for keyboard navigation accessibility |
| `icon`         | The icon display area within the button          |
| `innerStack`   | The internal stack layout container for organizing icon and label |
| `label`        | The text label display area for extended button variations |
| `progressRing` | The busy state progress indicator                |
| `ripple`       | The touch feedback ripple effect container       |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--floating-action-button-background-color`      | String | The background fill color                        |
| `--floating-action-button-border-color`          | String | The border outline color                         |
| `--floating-action-button-border-radius`         | String | The corner rounding radius for circular shape    |
| `--floating-action-button-border-style`          | String | The border line style                            |
| `--floating-action-button-border-width`          | String | The border thickness                             |
| `--floating-action-button-focus-ring-active-width` | String | The focus ring width when active (from focusRing mixin) |
| `--floating-action-button-focus-ring-color`      | String | The focus ring color (from focusRing mixin)      |
| `--floating-action-button-focus-ring-inward-offset` | String | The focus ring inward offset (from focusRing mixin) |
| `--floating-action-button-focus-ring-outward-offset` | String | The focus ring outward offset (from focusRing mixin) |
| `--floating-action-button-font-family`           | String | The font family for button text and labels       |
| `--floating-action-button-font-letter-spacing`   | String | The letter spacing for button text               |
| `--floating-action-button-font-line-height`      | String | The line height for button text                  |
| `--floating-action-button-font-size`             | String | The font size for button text                    |
| `--floating-action-button-font-text-decoration`  | String | The text decoration style for button text        |
| `--floating-action-button-font-text-transform`   | String | The text transformation style for button text    |
| `--floating-action-button-font-weight`           | String | The font weight for button text                  |
| `--floating-action-button-foreground-color`      | String | The icon and text color                          |
| `--floating-action-button-gap`                   | String | The spacing between icon and label elements      |
| `--floating-action-button-icon-min-height`       | String | The minimum height for icon display area         |
| `--floating-action-button-icon-min-width`        | String | The minimum width for icon display area          |
| `--floating-action-button-min-height`            | String | The minimum button height                        |
| `--floating-action-button-min-width`             | String | The minimum button width                         |
| `--floating-action-button-padding-bottom`        | String | The bottom padding inside the button             |
| `--floating-action-button-padding-left`          | String | The left padding inside the button               |
| `--floating-action-button-padding-right`         | String | The right padding inside the button              |
| `--floating-action-button-padding-top`           | String | The top padding inside the button                |
| `--floating-action-button-progress-ring-width`   | String | The action button progress ring width CSS custom property. |
| `--floating-action-button-ripple-color`          | String | The ripple effect color (from ripple mixin)      |
| `--floating-action-button-ripple-duration`       | String | The ripple effect animation duration (from ripple mixin) |
| `--floating-action-button-shadow`                | String | The drop shadow or elevation effect              |
| `--floating-action-button-shadow-blur`           | String | The action button shadow blur CSS custom property. |
| `--floating-action-button-shadow-color`          | String | The action button shadow color CSS custom property. |
| `--floating-action-button-shadow-offset-x`       | String | The action button shadow offset x CSS custom property. |
| `--floating-action-button-shadow-offset-y`       | String | The action button shadow offset y CSS custom property. |
| `--floating-action-button-shadow-spread`         | String | The action button shadow spread CSS custom property. |
| `--floating-action-button-transition-duration`   | String | The duration of hover and focus transitions      |
| `--floating-action-button-transition-mode`       | String | The timing function for transitions              |
| `--floating-action-button-transition-property`   | String | The CSS properties to animate during transitions |
| `--floating-action-button-translate`             | String | The action button translate CSS custom property. |

# mosaik-file-picker

File Picker - A user interface component that allows users to select files from their device.

**Mixins:** Themeable, Disableable

## Example

```html
<mosaik-file-picker>
  <button>Select File</button>
</mosaik-file-picker>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `accept`       |             |           | `string[]`                                   | Gets or sets the `accept` property.              |
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `directory`    | `directory` |           | `boolean`                                    | Gets or sets the `directory` property.           |
| `disabled`     | `disabled`  |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `filesPicked`  |             | readonly  | `IEventEmitter<IFilesPickedEventDetail>`     | Called when files are picked.<br />Provides reference to `IEventDetail` as event detail. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `multiple`     | `multiple`  |           | `boolean`                                    | Gets or sets the `multiple` property.            |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `pick`          | `(): void`                                       |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `filesPicked`  | `FilesPickedEvent`     | Fired when one or multiple files are selected by the user. |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for custom trigger content (e.g., a button or icon). |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `file` | The file part. |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--file-picker-background-color`     | String | The picker background color CSS custom property. |
| `--file-picker-border-color`         | String | The picker border color CSS custom property.     |
| `--file-picker-border-radius`        | String | The picker border radius CSS custom property.    |
| `--file-picker-border-style`         | String | The picker border style CSS custom property.     |
| `--file-picker-border-width`         | String | The picker border width CSS custom property.     |
| `--file-picker-font-family`          | String | The picker font family CSS custom property.      |
| `--file-picker-font-letter-spacing`  | String | The picker font letter spacing CSS custom property. |
| `--file-picker-font-line-height`     | String | The picker font line height CSS custom property. |
| `--file-picker-font-size`            | String | The picker font size CSS custom property.        |
| `--file-picker-font-text-decoration` | String | The picker font text decoration CSS custom property. |
| `--file-picker-font-text-transform`  | String | The picker font text transform CSS custom property. |
| `--file-picker-font-weight`          | String | The picker font weight CSS custom property.      |
| `--file-picker-foreground-color`     | String | The picker foreground color CSS custom property. |
| `--file-picker-gap`                  | String | The picker gap CSS custom property.              |
| `--file-picker-padding-bottom`       | String | The picker padding bottom CSS custom property.   |
| `--file-picker-padding-left`         | String | The picker padding left CSS custom property.     |
| `--file-picker-padding-right`        | String | The picker padding right CSS custom property.    |
| `--file-picker-padding-top`          | String | The picker padding top CSS custom property.      |
| `--file-picker-shadow`               | String | The picker shadow CSS custom property.           |
| `--file-picker-shadow-blur`          | String | The picker shadow blur CSS custom property.      |
| `--file-picker-shadow-color`         | String | The picker shadow color CSS custom property.     |
| `--file-picker-shadow-offset-x`      | String | The picker shadow offset x CSS custom property.  |
| `--file-picker-shadow-offset-y`      | String | The picker shadow offset y CSS custom property.  |
| `--file-picker-shadow-spread`        | String | The picker shadow spread CSS custom property.    |
| `--file-picker-transition-duration`  | String | The picker transition duration CSS custom property. |
| `--file-picker-transition-mode`      | String | The picker transition mode CSS custom property.  |
| `--file-picker-transition-property`  | String | The picker transition property CSS custom property. |
| `--file-picker-translate`            | String | The picker translate CSS custom property.        |

# mosaik-file-upload-item

File Upload Item - A subcomponent that represents a single file within a file upload list.

**Mixins:** Themeable

## Example

```html
<mosaik-file-upload-item view="list">
  <span slot="label">document.pdf</span>
  <button slot="actions">Remove</button>
</mosaik-file-upload-item>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `controlled`   | `controlled` |           | `boolean`                                    | Gets or sets the `controlled` property.          |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `file`         |              |           | `IFileInfo \| null`                          | Gets or sets the `file` property.                |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `view`         | `view`       |           | `FileUploadView`                             | Gets or sets the `view` property.                |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onDelete`      | `(e: Event): void`                               |                                                  |
| `onSave`        | `(e: Event): void`                               |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | The slot for custom action content (e.g., remove or retry buttons). |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `actions`   | The actions part.   |
| `extension` | The extension part. |
| `name`      | The name part.      |
| `size`      | The size part.      |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--file-upload-item-background-color`     | String | The upload item background color CSS custom property. |
| `--file-upload-item-border-color`         | String | The upload item border color CSS custom property. |
| `--file-upload-item-border-radius`        | String | The upload item border radius CSS custom property. |
| `--file-upload-item-border-style`         | String | The upload item border style CSS custom property. |
| `--file-upload-item-border-width`         | String | The upload item border width CSS custom property. |
| `--file-upload-item-font-family`          | String | The upload item font family CSS custom property. |
| `--file-upload-item-font-letter-spacing`  | String | The upload item font letter spacing CSS custom property. |
| `--file-upload-item-font-line-height`     | String | The upload item font line height CSS custom property. |
| `--file-upload-item-font-size`            | String | The upload item font size CSS custom property.   |
| `--file-upload-item-font-text-decoration` | String | The upload item font text decoration CSS custom property. |
| `--file-upload-item-font-text-transform`  | String | The upload item font text transform CSS custom property. |
| `--file-upload-item-font-weight`          | String | The upload item font weight CSS custom property. |
| `--file-upload-item-foreground-color`     | String | The upload item foreground color CSS custom property. |
| `--file-upload-item-gap`                  | String | The upload item gap CSS custom property.         |
| `--file-upload-item-padding-bottom`       | String | The upload item padding bottom CSS custom property. |
| `--file-upload-item-padding-left`         | String | The upload item padding left CSS custom property. |
| `--file-upload-item-padding-right`        | String | The upload item padding right CSS custom property. |
| `--file-upload-item-padding-top`          | String | The upload item padding top CSS custom property. |
| `--file-upload-item-shadow`               | String | The upload item shadow CSS custom property.      |
| `--file-upload-item-shadow-blur`          | String | The upload item shadow blur CSS custom property. |
| `--file-upload-item-shadow-color`         | String | The upload item shadow color CSS custom property. |
| `--file-upload-item-shadow-offset-x`      | String | The upload item shadow offset x CSS custom property. |
| `--file-upload-item-shadow-offset-y`      | String | The upload item shadow offset y CSS custom property. |
| `--file-upload-item-shadow-spread`        | String | The upload item shadow spread CSS custom property. |
| `--file-upload-item-transition-duration`  | String | The upload item transition duration CSS custom property. |
| `--file-upload-item-transition-mode`      | String | The upload item transition mode CSS custom property. |
| `--file-upload-item-transition-property`  | String | The upload item transition property CSS custom property. |
| `--file-upload-item-translate`            | String | The upload item translate CSS custom property.   |

# mosaik-file-upload

File Upload - A comprehensive file upload control with drag-and-drop support and multiple view modes.

**Mixins:** Themeable, Disableable, Appearanceable, Variantable, Invalidable, Valueable

## Examples

```html
<mosaik-file-upload multiple auto-upload></mosaik-file-upload>
```

Table view with 10 MB size limit (`max-size` is in bytes):

```html
<mosaik-file-upload view="table" max-size="10485760"></mosaik-file-upload>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `accept`       |              |           | `string[]`                                   | Gets or sets the `accept` property.              |
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autoUpload`   | `autoUpload` |           | `boolean`                                    | Gets or sets the `autoUpload` property.          |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `directory`    | `directory`  |           | `boolean`                                    | Gets or sets the `directory` property.           |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fileAdded`    |              | readonly  | `IEventEmitter<IFileAddEventDetail>`         | Called when a file is added.<br />Provides reference to `IEventDetail` as event detail. |
| `fileFailed`   |              | readonly  | `IEventEmitter<IFileErrorEventDetail>`       | Called when a file upload fails.<br />Provides reference to `IEventDetail` as event detail. |
| `fileRemoved`  |              | readonly  | `IEventEmitter<IFileRemoveEventDetail>`      | Called when a file is deleted.<br />Provides reference to `IEventDetail` as event detail. |
| `filesChanged` |              | readonly  | `IEventEmitter<IFilesChangedEventDetail>`    | Called when the files are changed.<br />Provides reference to `IEventDetail` as event detail. |
| `intl`         |              | readonly  | `FileUploadElementIntl`                      |                                                  |
| `invalid`      | `invalid`    |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isDragging`   |              |           | `boolean`                                    |                                                  |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxSize`      | `maxSize`    |           | `number`                                     | Gets or sets the `maxSize` property.             |
| `multiple`     | `multiple`   |           | `boolean`                                    | Gets or sets the `multiple` property.            |
| `placeholder`  |              |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `strategy`     |              |           | `IUploadStrategy \| null`                    | Gets or sets the `strategy` property.            |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`      |           | `IFileInfo[]`                                | Gets or sets the `value` property.               |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`         | `view`       |           | `FileUploadView`                             | Gets or sets the `view` property.                |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `add`           | `(value?: File \| File[] \| FileList \| undefined): void` |                                                  |
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `checkValidity` | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `delete`        | `(fileInfo: IFileInfo): void`                    |                                                  |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`         | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `save`          | `(fileInfo: IFileInfo): Promise<void>`           |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `fileAdded`    | `FileAddEvent`         | Fired when a file is added to the upload list.   |
| `fileFailed`   | `FileErrorEvent`       | Fired when a file upload fails.                  |
| `fileRemoved`  | `FileRemoveEvent`      | Fired when a file is removed from the upload list. |
| `filesChanged` | `FilesChangedEvent`    | Fired when the set of files has changed.         |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | The actions slot.                                |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                       |
|-------------|-----------------------------------|
| `actions`   | The actions part.                 |
| `dropZone`  | The drag-and-drop zone container. |
| `extension` | The extension part.               |
| `name`      | The name part.                    |
| `size`      | The size part.                    |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--file-upload-background-color`     | Color  | The background color.                            |
| `--file-upload-border-color`         | Color  | The border color.                                |
| `--file-upload-border-radius`        | String | The border radius.                               |
| `--file-upload-border-style`         | String | The border style.                                |
| `--file-upload-border-width`         | String | The border width.                                |
| `--file-upload-font-family`          | String | The upload font family CSS custom property.      |
| `--file-upload-font-letter-spacing`  | String | The upload font letter spacing CSS custom property. |
| `--file-upload-font-line-height`     | String | The upload font line height CSS custom property. |
| `--file-upload-font-size`            | String | The upload font size CSS custom property.        |
| `--file-upload-font-text-decoration` | String | The upload font text decoration CSS custom property. |
| `--file-upload-font-text-transform`  | String | The upload font text transform CSS custom property. |
| `--file-upload-font-weight`          | String | The upload font weight CSS custom property.      |
| `--file-upload-foreground-color`     | Color  | The foreground color.                            |
| `--file-upload-gap`                  | String | The upload gap CSS custom property.              |
| `--file-upload-padding-bottom`       | String | The upload padding bottom CSS custom property.   |
| `--file-upload-padding-left`         | String | The upload padding left CSS custom property.     |
| `--file-upload-padding-right`        | String | The upload padding right CSS custom property.    |
| `--file-upload-padding-top`          | String | The upload padding top CSS custom property.      |
| `--file-upload-shadow`               | String | The shadow.                                      |
| `--file-upload-shadow-blur`          | String | The upload shadow blur CSS custom property.      |
| `--file-upload-shadow-color`         | String | The upload shadow color CSS custom property.     |
| `--file-upload-shadow-offset-x`      | String | The upload shadow offset x CSS custom property.  |
| `--file-upload-shadow-offset-y`      | String | The upload shadow offset y CSS custom property.  |
| `--file-upload-shadow-spread`        | String | The upload shadow spread CSS custom property.    |
| `--file-upload-transition-duration`  | String | The upload transition duration CSS custom property. |
| `--file-upload-transition-mode`      | String | The upload transition mode CSS custom property.  |
| `--file-upload-transition-property`  | String | The upload transition property CSS custom property. |
| `--file-upload-translate`            | String | The upload translate CSS custom property.        |

# mosaik-flip

Flip - A UI element that can be flipped by 180 degrees when activated.

**Mixins:** Themeable, Disableable

## Example

```html
<mosaik-flip>
    <!-- swipe content -->
    <div slot="front">Front</div>
    <!-- back content -->
    <div slot="back">Back</div>
</mosaik-flip>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `side`         | `side`     |           | `FlipSide`                                   | Gets or sets the `isFlipped` property.           |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`        | `(): void`                                       | Toggles the flip state of the element.           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `back`  | the back slot.                                   |
| `front` | the front slot.                                  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description     |
|---------|-----------------|
| `back`  | The back part.  |
| `front` | The front part. |
| `root`  | The root part.  |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--flip-font-family`          | String | The font family CSS custom property.          |
| `--flip-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--flip-font-line-height`     | String | The font line height CSS custom property.     |
| `--flip-font-size`            | String | The font size CSS custom property.            |
| `--flip-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--flip-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--flip-font-weight`          | String | The font weight CSS custom property.          |
| `--flip-gap`                  | String | The gap CSS custom property.                  |
| `--flip-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--flip-padding-left`         | String | The padding left CSS custom property.         |
| `--flip-padding-right`        | String | The padding right CSS custom property.        |
| `--flip-padding-top`          | String | The padding top CSS custom property.          |
| `--flip-shadow`               | String | The shadow CSS custom property.               |
| `--flip-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--flip-shadow-color`         | String | The shadow color CSS custom property.         |
| `--flip-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--flip-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--flip-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--flip-transition-duration`  | String | The transition duration CSS custom property.  |
| `--flip-transition-mode`      | String | The transition mode CSS custom property.      |
| `--flip-transition-property`  | String | The transition property CSS custom property.  |
| `--flip-translate`            | String | The translate CSS custom property.            |

# FloatingActionButtonGroupElement - Group of expandable FABs

## Description
The Floating Action Button Group is a UI component that organizes multiple Floating Action Buttons (FABs) into a cohesive group. This component is designed to provide users with multiple primary actions in a compact and accessible format. Each button within the group can trigger a different action, making it ideal for applications that require multiple high-priority actions to be easily accessible.

## Element
- **Tag**: `mosaik-fab-group`
- **Category**: Buttons

## Slots
- `trigger` - The trigger slot for initiating the FAB group expansion
- **default** - The default slot for child FABs
- `overlay` - The overlay slot (useful for badges or additional visual elements)

## CSS Parts
- `fab` - The FAB part within the group
- `menu` - The menu part of the FAB group

## CSS Custom Properties
- `--fab-group-font-family` - Font family of the FAB group
- `--fab-group-font-size` - Font size of the FAB group
- `--fab-group-font-line-height` - Line height of the FAB group
- `--fab-group-font-weight` - Font weight of the FAB group
- `--fab-group-font-letter-spacing` - Letter spacing of the FAB group
- `--fab-group-font-text-decoration` - Text decoration of the FAB group
- `--fab-group-font-text-transform` - Text transform of the FAB group
- `--fab-group-transition-duration` - Transition duration for expand/collapse
- `--fab-group-transition-mode` - Transition animation mode
- `--fab-group-transition-property` - Transition CSS properties

## Dependencies
- `mosaik-fab` - The Floating Action Button component

## Events
- `opened` - Dispatched when the FAB group is opened
- `closed` - Dispatched when the FAB group is closed

## Examples

### Basic FAB group
```html
<mosaik-fab-group>
    <mosaik-fab slot="trigger" icon="add-icon"></mosaik-fab>
    <mosaik-fab label="Create Post" icon="post-icon"></mosaik-fab>
    <mosaik-fab label="Upload Photo" icon="photo-icon"></mosaik-fab>
    <mosaik-fab label="Add Video" icon="video-icon"></mosaik-fab>
</mosaik-fab-group>
```

### Vertical FAB group
```html
<mosaik-fab-group direction="vertical">
    <mosaik-fab slot="trigger" icon="menu-icon"></mosaik-fab>
    <mosaik-fab label="Edit" icon="edit-icon"></mosaik-fab>
    <mosaik-fab label="Share" icon="share-icon"></mosaik-fab>
    <mosaik-fab label="Delete" icon="delete-icon"></mosaik-fab>
</mosaik-fab-group>
```

### Horizontal FAB group
```html
<mosaik-fab-group direction="horizontal">
    <mosaik-fab slot="trigger" icon="add-icon"></mosaik-fab>
    <mosaik-fab icon="file-icon"></mosaik-fab>
    <mosaik-fab icon="folder-icon"></mosaik-fab>
    <mosaik-fab icon="link-icon"></mosaik-fab>
</mosaik-fab-group>
```

### FAB group with variants
```html
<mosaik-fab-group variant="primary">
    <mosaik-fab slot="trigger" icon="actions-icon"></mosaik-fab>
    <mosaik-fab label="Action 1" icon="icon-1" variant="secondary"></mosaik-fab>
    <mosaik-fab label="Action 2" icon="icon-2" variant="success"></mosaik-fab>
    <mosaik-fab label="Action 3" icon="icon-3" variant="warning"></mosaik-fab>
</mosaik-fab-group>
```

### Programmatic control
```javascript
const fabGroup = document.querySelector('mosaik-fab-group');

// Open the group
fabGroup.open();

// Close the group
fabGroup.close();

// Listen for events
fabGroup.addEventListener('opened', () => {
    console.log('FAB group opened');
});

fabGroup.addEventListener('closed', () => {
    console.log('FAB group closed');
});
```

# FloatingActionButtonElement - Prominent circular button for primary actions

## Description
Creates a distinctive, floating circular button optimized for triggering the most important action on a screen. Features elevated styling, ripple effects, and optional labeling to draw user attention to critical functionality like creating content, composing messages, or initiating workflows.

## Element
- **Tag**: `mosaik-fab`
- **Category**: Buttons

## Slots
- `icon` - Icon content area for the primary visual indicator
- `label` - Optional text label for extended floating action buttons
- `overlay` - Overlay content area for badges, notifications, or status indicators

## CSS Parts
- `button` - Main button element container
- `focusRing` - Focus ring indicator for accessibility
- `ripple` - Ripple effect animation container
- `icon` - Icon content styling container
- `label` - Text label styling container
- `progressRing` - Loading state progress indicator
- `elevation` - Shadow and elevation styling container

## CSS Custom Properties
- `--fab-font-family` - Font family for button text and label
- `--fab-font-size` - Font size for button text
- `--fab-font-line-height` - Line height for button text
- `--fab-font-weight` - Font weight for button text
- `--fab-font-letter-spacing` - Letter spacing for button text
- `--fab-font-text-decoration` - Text decoration for button text
- `--fab-font-text-transform` - Text transform for button text
- `--fab-padding-top` - Top padding for button content
- `--fab-padding-right` - Right padding for button content
- `--fab-padding-bottom` - Bottom padding for button content
- `--fab-padding-left` - Left padding for button content
- `--fab-gap` - Gap between icon and label elements
- `--fab-elevation` - Elevation shadow level for the button
- `--fab-background-color` - Background color for the button
- `--fab-border-radius` - Border radius for circular styling

## Dependencies
- `mosaik-ripple` - For interactive ripple effects on user interaction
- `mosaik-stack` - For layout management of icon and label
- `mosaik-icon` - For displaying primary action icons
- `mosaik-elevation` - For creating elevated shadow effects
- `mosaik-focus-ring` - For accessibility focus indicators
- `mosaik-text` - For optional text labels
- `mosaik-progress-ring` - For loading state visualization

## Examples

### Primary action FAB
```html
<mosaik-fab onclick="createNew()">
    <mosaik-icon slot="icon" data="plus"></mosaik-icon>
</mosaik-fab>
```

### Extended FAB with label
```html
<mosaik-fab label="Compose" variant="primary">
    <mosaik-icon slot="icon" data="edit-icon"></mosaik-icon>
</mosaik-fab>
```

### FAB with different variants
```html
<mosaik-fab variant="secondary">
    <mosaik-icon slot="icon" data="share-icon"></mosaik-icon>
</mosaik-fab>

<mosaik-fab variant="success">
    <mosaik-icon slot="icon" data="check-icon"></mosaik-icon>
</mosaik-fab>
```

### FAB with notification badge
```html
<mosaik-fab>
    <mosaik-icon slot="icon" data="mail-icon"></mosaik-icon>
    <mosaik-badge slot="overlay" value="5" variant="error"></mosaik-badge>
</mosaik-fab>
```

### Loading state FAB
```html
<mosaik-fab is-busy="true">
    <mosaik-icon slot="icon" data="save-icon"></mosaik-icon>
</mosaik-fab>
```

# mosaik-floating-trigger

FloatingTrigger - A convenience wrapper that manages trigger-floating element interactions automatically.

**Mixins:** Themeable

## Examples

Basic dropdown trigger:

```html
<mosaik-floating-trigger>
  <mosaik-button label="Open Menu"></mosaik-button>
  <mosaik-floating slot="floating" placement="bottom-start">
    <mosaik-menu>
      <mosaik-menu-item label="Option 1"></mosaik-menu-item>
      <mosaik-menu-item label="Option 2"></mosaik-menu-item>
    </mosaik-menu>
  </mosaik-floating>
</mosaik-floating-trigger>
```

Popover with custom trigger:

```html
<mosaik-floating-trigger>
  <div class="custom-trigger">Click for more info</div>
  <mosaik-floating slot="floating" placement="top">
    <mosaik-card>
      <p>Additional information here</p>
    </mosaik-card>
  </mosaik-floating>
</mosaik-floating-trigger>
```

Icon button with dropdown:

```html
<mosaik-floating-trigger>
  <mosaik-button icon="more-vertical" appearance="plain"></mosaik-button>
  <mosaik-floating slot="floating" placement="bottom-end">
    <mosaik-list>
      <mosaik-list-item>Edit</mosaik-list-item>
      <mosaik-list-item>Delete</mosaik-list-item>
    </mosaik-list>
  </mosaik-floating>
</mosaik-floating-trigger>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`  | `(event: Event): void`                           |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
|            | The trigger element that activates the floating content (typically a button) |
| `floating` | The floating element to show/hide (typically mosaik-floating) |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--floating-trigger-font-family`          | String | The trigger font family CSS custom property.     |
| `--floating-trigger-font-letter-spacing`  | String | The trigger font letter spacing CSS custom property. |
| `--floating-trigger-font-line-height`     | String | The trigger font line height CSS custom property. |
| `--floating-trigger-font-size`            | String | The trigger font size CSS custom property.       |
| `--floating-trigger-font-text-decoration` | String | The trigger font text decoration CSS custom property. |
| `--floating-trigger-font-text-transform`  | String | The trigger font text transform CSS custom property. |
| `--floating-trigger-font-weight`          | String | The trigger font weight CSS custom property.     |
| `--floating-trigger-gap`                  | String | The trigger gap CSS custom property.             |
| `--floating-trigger-padding-bottom`       | String | The trigger padding bottom CSS custom property.  |
| `--floating-trigger-padding-left`         | String | The trigger padding left CSS custom property.    |
| `--floating-trigger-padding-right`        | String | The trigger padding right CSS custom property.   |
| `--floating-trigger-padding-top`          | String | The trigger padding top CSS custom property.     |
| `--floating-trigger-shadow`               | String | The trigger shadow CSS custom property.          |
| `--floating-trigger-shadow-blur`          | String | The trigger shadow blur CSS custom property.     |
| `--floating-trigger-shadow-color`         | String | The trigger shadow color CSS custom property.    |
| `--floating-trigger-shadow-offset-x`      | String | The trigger shadow offset x CSS custom property. |
| `--floating-trigger-shadow-offset-y`      | String | The trigger shadow offset y CSS custom property. |
| `--floating-trigger-shadow-spread`        | String | The trigger shadow spread CSS custom property.   |
| `--floating-trigger-transition-duration`  | String | The trigger transition duration CSS custom property. |
| `--floating-trigger-transition-mode`      | String | The trigger transition mode CSS custom property. |
| `--floating-trigger-transition-property`  | String | The trigger transition property CSS custom property. |
| `--floating-trigger-translate`            | String | The trigger translate CSS custom property.       |

# mosaik-floating

Floating - A sophisticated positioning component for tooltips, dropdowns, popovers, and floating UI elements.

**Mixins:** Themeable, Animatable, Elevatable

## Examples

Basic floating element with anchor (set via JavaScript):

```html
<button id="trigger">Hover me</button>
<mosaik-floating id="floating" placement="bottom">
  <div>Floating content</div>
</mosaik-floating>
<script>
  document.querySelector('#floating').anchor = document.querySelector('#trigger');
</script>
```

Floating with flip behavior:

```html
<mosaik-floating
  id="floating2"
  placement="top"
  flip
  active>
  <div>This will flip to bottom if no space above</div>
</mosaik-floating>
<script>
  document.querySelector('#floating2').anchor = document.querySelector('#myButton');
</script>
```

Auto-sizing floating element:

```html
<mosaik-floating
  id="floating3"
  auto-size="both"
  placement="bottom-start"
  active>
  <mosaik-list>...</mosaik-list>
</mosaik-floating>
<script>
  document.querySelector('#floating3').anchor = document.querySelector('#container');
</script>
```

Programmatic control:

```html
<mosaik-floating id="dropdown" placement="bottom-end">
  <div>Dropdown content</div>
</mosaik-floating>
<script>
  const floating = document.querySelector('#dropdown');
  floating.anchor = document.querySelector('#trigger');
  floating.active = true;
</script>
```

## Properties

| Property                 | Attribute                | Modifiers | Type                                         | Default   | Description                                      |
|--------------------------|--------------------------|-----------|----------------------------------------------|-----------|--------------------------------------------------|
| `active`                 | `active`                 |           | `boolean`                                    |           | Gets or sets the `active` property.<br />Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn<br />down and the popup will be hidden. |
| `activeChanged`          |                          | readonly  | `IEventEmitter<IEventDetail>`                |           | Called when the active state of the popup changes.<br />Provides reference to `IEventDetail` as event detail. |
| `anchor`                 |                          |           | `string \| Element \| null`                  |           | Gets or sets the `anchor` property.<br />The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a<br />reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead. |
| `animationTarget`        |                          | readonly  | `HTMLElement`                                |           | Gets the animation target element.<br />Animations are applied to the body element within the floating container. |
| `arrow`                  |                          |           | `boolean`                                    |           | Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and<br />`--arrow-color` custom properties. For additional customizations, you can also target the arrow using<br />`::part(arrow)` in your stylesheet. |
| `arrowPadding`           | `arrowPadding`           |           | `number`                                     |           | The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,<br />this will prevent it from overflowing the corners. |
| `arrowPlacement`         | `arrowPlacement`         |           | `FloatingArrowPlacement`                     |           | The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the<br />anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will<br />align the arrow to the start, end, or center of the popover instead. |
| `autoSize`               | `autoSize`               |           | `FloatingAutoSize`                           |           | When set, this will cause the popup to automatically resize itself to prevent it from overflowing. |
| `autoSizeBoundary`       |                          |           | `Element \| Element[] \| null`               |           | The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By<br />default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can<br />change the boundary by passing a reference to one or more elements to this property. |
| `autoSizePadding`        | `autoSizePadding`        |           | `number`                                     |           | The amount of padding, in pixels, to exceed before the auto-size behavior will occur. |
| `changed`                |                          | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |           | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`              |                          | readonly  | `IEventEmitter<void>`                        |           | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                    | `dir`                    |           | `FlowDirection`                              |           | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`           |                          | readonly  | `IEventEmitter<void>`                        |           | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `distance`               |                          |           | `number`                                     |           | The distance in pixels from which to offset the panel away from its anchor. |
| `elevation`              | `elevation`              |           | `string`                                     | "Regular" | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `enter`                  | `enter`                  |           | `IAnimationReferenceMetadata \| null`        |           | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`                   | `exit`                   |           | `IAnimationReferenceMetadata \| null`        |           | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `flip`                   | `flip`                   |           | `boolean`                                    |           | When set, placement of the popup will flip to the opposite site to keep it in view. You can use<br />`flipFallbackPlacements` to further configure how the fallback placement is determined. |
| `flipBoundary`           |                          |           | `Element \| Element[] \| null`               |           | The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By<br />default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can<br />change the boundary by passing a reference to one or more elements to this property. |
| `flipFallbackPlacements` | `flipFallbackPlacements` |           | `Placement[]`                                |           | If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a<br />string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip<br />fallback strategy will be used instead. |
| `flipFallbackStrategy`   | `flipFallbackStrategy`   |           | `FloatingFlipFallbackStrategy`               |           | When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether<br />the popup should be positioned using the best available fit based on available space or as it was initially<br />preferred. |
| `flipPadding`            | `flipPadding`            |           | `number`                                     |           | The amount of padding, in pixels, to exceed before the flip behavior will occur. |
| `height`                 | `height`                 |           | `CssLength \| undefined`                     |           | The height of the popup.                         |
| `isFullScreen`           | `isFullScreen`           |           | `boolean`                                    |           | Gets or sets the `isFullScreen` property.        |
| `isVisible`              |                          | readonly  | `boolean`                                    |           | Gets whether the floating element is currently visible.<br />This is separate from `active` to allow exit animations to complete before hiding. |
| `lang`                   | `lang`                   |           | `string`                                     |           | The lang property indicates the language of the element's content. |
| `maxHeight`              | `maxHeight`              |           | `CssLength \| undefined`                     |           | The maximum height of the popup. If the content is taller than this value, it will scroll vertically. |
| `maxWidth`               | `maxWidth`               |           | `CssLength \| undefined`                     |           | The maximum width of the popup. When the popup's width exceeds this value, it will be clipped. |
| `placement`              | `placement`              |           | `Placement`                                  |           | The preferred placement of the popup. Note that the actual placement will vary as configured to keep the<br />panel inside of the viewport. |
| `repositioned`           |                          | readonly  | `IEventEmitter<IEventDetail>`                |           | Called when the popup is repositioned.<br />Provides reference to `this` as event argument. |
| `shift`                  | `shift`                  |           | `boolean`                                    |           | Moves the popup along the axis to keep it in view when clipped. |
| `shiftBoundary`          |                          |           | `Element \| Element[] \| null`               |           | The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By<br />default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can<br />change the boundary by passing a reference to one or more elements to this property. |
| `shiftPadding`           | `shiftPadding`           |           | `number`                                     |           | The amount of padding, in pixels, to exceed before the shift behavior will occur. |
| `skidding`               |                          |           | `number`                                     |           | The distance in pixels from which to offset the panel along its anchor. |
| `strategy`               | `strategy`               |           | `Strategy`                                   |           | Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is<br />clipped, using a `fixed` position strategy can often workaround it. |
| `sync`                   | `sync`                   |           | `FloatingSync`                               |           | Syncs the popup's width or height to that of the anchor element. |
| `themeName`              |                          |           | `string`                                     |           | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`                  | `width`                  |           | `CssLength \| undefined`                     |           | The width of the popup.                          |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`                | `(): void`                                       | Closes the popup.                                |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getScrollableElement` | `(): HTMLElement`                                | Returns the scrollable element.                  |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `open`                 | `(): void`                                       | Opens the popup.                                 |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` |                                                  |
| `reposition`           | `(): void`                                       | Forces the popup to recalculate and reposition itself. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `activeChanged` | `ActiveChangedEvent`   | Fired when the active state changes              |
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `repositioned`  | `RepositionEvent`      | Fired when the element is repositioned           |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default content slot for floating content    |
| `anchor` | The anchor slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `arrow`     | The optional arrow pointing to the anchor element |
| `body`      | The main floating container element              |
| `elevation` | The elevation part.                              |

## CSS Custom Properties

| Property                          | Type   | Description                                  |
|-----------------------------------|--------|----------------------------------------------|
| `--floating-arrow-padding-offset` | String | Padding offset for arrow positioning         |
| `--floating-arrow-size`           | String | Size of the arrow indicator                  |
| `--floating-arrow-size-diagonal`  | String | Diagonal size calculation for arrow          |
| `--floating-background-color`     | String | Background color of the floating element     |
| `--floating-border-color`         | String | Border color of the floating outline         |
| `--floating-border-radius`        | String | Corner rounding radius                       |
| `--floating-border-style`         | String | Border line style                            |
| `--floating-border-width`         | String | Border thickness                             |
| `--floating-font-family`          | String | Font family for floating content             |
| `--floating-font-letter-spacing`  | String | Letter spacing for floating content          |
| `--floating-font-line-height`     | String | Line height for floating content             |
| `--floating-font-size`            | String | Font size for floating content               |
| `--floating-font-text-decoration` | String | Text decoration style                        |
| `--floating-font-text-transform`  | String | Text transformation style                    |
| `--floating-font-weight`          | String | Font weight for floating content             |
| `--floating-foreground-color`     | String | Text color for floating content              |
| `--floating-gap`                  | String | Spacing between floating elements            |
| `--floating-padding-bottom`       | String | Bottom padding inside the floating element   |
| `--floating-padding-left`         | String | Left padding inside the floating element     |
| `--floating-padding-right`        | String | Right padding inside the floating element    |
| `--floating-padding-top`          | String | Top padding inside the floating element      |
| `--floating-shadow`               | String | The shadow CSS custom property.              |
| `--floating-shadow-blur`          | String | The shadow blur CSS custom property.         |
| `--floating-shadow-color`         | String | The shadow color CSS custom property.        |
| `--floating-shadow-offset-x`      | String | The shadow offset x CSS custom property.     |
| `--floating-shadow-offset-y`      | String | The shadow offset y CSS custom property.     |
| `--floating-shadow-spread`        | String | The shadow spread CSS custom property.       |
| `--floating-transition-duration`  | String | The transition duration CSS custom property. |
| `--floating-transition-mode`      | String | The transition mode CSS custom property.     |
| `--floating-transition-property`  | String | The transition property CSS custom property. |
| `--floating-translate`            | String | The translate CSS custom property.           |

# mosaik-flow-board-column-composer

FlowBoardColumnComposer - A composer for creating new columns in a FlowBoard.

**Mixins:** Themeable, Slottable

## Example

Basic usage with simple form:

```html
<mosaik-flow-board-column-composer id="composer" slot="append">
  <mosaik-button slot="trigger" label="Add Column"></mosaik-button>
  <div slot="form">
    <mosaik-textbox id="title" placeholder="Enter column name…"></mosaik-textbox>
    <mosaik-button id="create" label="Create"></mosaik-button>
  </div>
</mosaik-flow-board-column-composer>

<script>
  document.getElementById('create').addEventListener('click', () => {
    const composer = document.getElementById('composer');
    const title = document.getElementById('title').value;
    composer.create({ title });
  });
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `open`         | `open`    |           | `boolean`                                    | Gets or sets whether the composer form is open.  |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): void`                                       | Closes the composer form.                        |
| `create`               | `(data: unknown): boolean`                       | Creates a new column with the provided data.<br />Emits flowBoardBeforeColumnCreate (cancelable) and flowBoardColumnCreate events.<br /><br />**data**: The data for the new column (completely user-defined) |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `handleFormKeydown`    | `(evt: KeyboardEvent): void`                     | Handles keyboard events in the form.<br />Pressing Escape closes the form.<br /><br />**evt**: The keyboard event. |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): void`                                       | Toggles the composer between open and closed state. |

## Events

| Event                         | Type                               | Description                                      |
|-------------------------------|------------------------------------|--------------------------------------------------|
| `changed`                     | `PropertyChangedEvent`             | Emitted when any attribute changes before update |
| `connected`                   | `ConnectedEvent`                   | Emitted when the element is connected to the DOM |
| `disconnected`                | `DisconnectedEvent`                | Emitted when the element is disconnected from the DOM |
| `flowBoardBeforeColumnCreate` | `FlowBoardBeforeColumnCreateEvent` | Fired before column creation (cancelable)        |
| `flowBoardColumnCreate`       | `FlowBoardColumnCreateEvent`       | Fired when column is created with user-defined data |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `form`    | The form content for creating new columns (completely user-defined) |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |
| `trigger` | The trigger element that opens the form (e.g., "Add another list" button) |

## CSS Shadow Parts

| Part        | Description                 |
|-------------|-----------------------------|
| `container` | The main container element  |
| `form`      | The form section wrapper    |
| `trigger`   | The trigger section wrapper |

## CSS Custom Properties

| Property                          | Type   | Description                        |
|-----------------------------------|--------|------------------------------------|
| `--flow-board-composer-gap`       | String | Gap between form elements          |
| `--flow-board-composer-min-width` | String | Minimum width of the composer area |
| `--flow-board-composer-padding`   | String | Padding inside the container       |

# mosaik-flow-board-column-item-composer

FlowBoardColumnItemComposer - A composer for creating new items in a FlowBoard column.

**Mixins:** Themeable, Slottable

## Example

Basic usage with simple form:

```html
<mosaik-flow-board-column-item-composer id="composer" slot="footer">
  <mosaik-button slot="trigger" label="Add item"></mosaik-button>
  <div slot="form">
    <mosaik-textbox id="title" placeholder="Enter title…"></mosaik-textbox>
    <mosaik-button id="add" label="Add"></mosaik-button>
  </div>
</mosaik-flow-board-column-item-composer>

<script>
  document.getElementById('add').addEventListener('click', () => {
    const composer = document.getElementById('composer');
    const title = document.getElementById('title').value;
    composer.create({ title });
  });
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columnKey`    |           | readonly  | `string`                                     | Gets the column key from the parent column (via inheritance).<br />Useful for identifying which column the item is being added to. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `open`         | `open`    |           | `boolean`                                    | Gets or sets whether the composer form is open.  |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): void`                                       | Closes the composer form.                        |
| `create`               | `(data: unknown): boolean`                       | Creates a new item with the provided data.<br />Emits flowBoardBeforeItemCreate (cancelable) and flowBoardItemCreate events.<br /><br />**data**: The data for the new item (completely user-defined) |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `handleFormKeydown`    | `(evt: KeyboardEvent): void`                     | Handles keyboard events in the form.<br />Pressing Escape closes the form.<br /><br />**evt**: The keyboard event. |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): void`                                       | Toggles the composer between open and closed state. |

## Events

| Event                       | Type                             | Description                                      |
|-----------------------------|----------------------------------|--------------------------------------------------|
| `changed`                   | `PropertyChangedEvent`           | Emitted when any attribute changes before update |
| `connected`                 | `ConnectedEvent`                 | Emitted when the element is connected to the DOM |
| `disconnected`              | `DisconnectedEvent`              | Emitted when the element is disconnected from the DOM |
| `flowBoardBeforeItemCreate` | `FlowBoardBeforeItemCreateEvent` | Fired before item creation (cancelable)          |
| `flowBoardItemCreate`       | `FlowBoardItemCreateEvent`       | Fired when item is created with user-defined data |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `form`    | The form content for creating new items (completely user-defined) |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |
| `trigger` | The trigger element that opens the form (e.g., "Add another item" button) |

## CSS Shadow Parts

| Part        | Description                 |
|-------------|-----------------------------|
| `container` | The main container element  |
| `form`      | The form section wrapper    |
| `trigger`   | The trigger section wrapper |

## CSS Custom Properties

| Property                        | Type   | Description               |
|---------------------------------|--------|---------------------------|
| `--flow-board-composer-gap`     | String | Gap between form elements |
| `--flow-board-composer-padding` | String | Padding for the composer  |

# mosaik-flow-board-column-item

FlowBoardColumnItem - An item within a FlowBoard column.

Represents a draggable/reorderable item in a FlowBoard column.
Supports pinning, activation events, and custom slot content.

**Mixins:** Themeable, Rippleable, Slottable, Focusable, Disableable, Variantable, Valueable, Appearanceable

## Example

```html
<mosaik-flow-board-column-item item-key="task-1" draggable reorderable>
  <div slot="title">Task Title</div>
  <div slot="subtitle">Project Name</div>
  <div slot="meta"><mark>High</mark></div>
  <div slot="footer"><mosaik-avatar size="xs"></mosaik-avatar></div>
</mosaik-flow-board-column-item>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `canDrag`      |               | readonly  | `boolean`                                    | Whether the item can currently be dragged.<br />Returns true only if draggable, reorderable, and not pinned. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columnKey`    |               | readonly  | `string`                                     | Gets the column key from the parent column.      |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `draggable`    | `draggable`   |           | `boolean`                                    | Gets or sets whether the item can be dragged.<br />This attribute must be present along with `reorderable` for the item to be movable. |
| `isFocused`    | `is-focused`  |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `itemKey`      | `item-key`    |           | `string`                                     | Gets or sets the unique key for the item.<br />If not provided, a key will be generated on connect. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `pinned`       | `pinned`      |           | `boolean`                                    | Gets or sets whether the item is pinned (fixed at top of column).<br />Pinned items cannot be dragged and always render before non-pinned items. |
| `reorderable`  | `reorderable` |           | `boolean`                                    | Gets or sets whether the item can be reordered.  |
| `ripple`       | `ripple`      |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`       |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `activate`              | `(trigger: "click" \| "keyboard"): void`         | Activates the item, triggering the appropriate events.<br /><br />**trigger**: The trigger for the activation. |
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`    | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `pin`                   | `(): void`                                       | Pins the item, making it fixed at the top of the column. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `unpin`                 | `(): void`                                       | Unpins the item, allowing it to be reordered with other items. |

## Events

| Event                          | Type                                | Description                                      |
|--------------------------------|-------------------------------------|--------------------------------------------------|
| `changed`                      | `PropertyChangedEvent`              | Emitted when any attribute changes before update |
| `connected`                    | `ConnectedEvent`                    | Emitted when the element is connected to the DOM |
| `disconnected`                 | `DisconnectedEvent`                 | Emitted when the element is disconnected from the DOM |
| `flowBoardBeforeItemActivate`  | `FlowBoardBeforeItemActivateEvent`  | Fired before item activation                     |
| `flowBoardBeforeItemPinChange` | `FlowBoardBeforeItemPinChangeEvent` | Fired before pin state changes                   |
| `flowBoardItemActivate`        | `FlowBoardItemActivateEvent`        | Fired when item is activated                     |
| `flowBoardItemPinChange`       | `FlowBoardItemPinChangeEvent`       | Fired when pin state changes                     |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
| `actions`  | Action buttons or links related to the item      |
| `footer`   | Footer content with actions or avatars           |
| `meta`     | Additional metadata like price or status         |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `subtitle` | The subtitle content of the item                 |
| `title`    | The title content of the item                    |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `container`  | The main container element                       |
| `footer`     | The footer section                               |
| `header`     | The header section containing title and subtitle |
| `meta`       | The meta information section                     |
| `subtitle`   | The subtitle section                             |
| `title`      | The title section                                |
| `titleGroup` | The wrapper around title and subtitle for layout purposes |

## CSS Custom Properties

| Property                             | Type   | Description                  |
|--------------------------------------|--------|------------------------------|
| `--flow-board-item-background-color` | Color  | Background color of the item |
| `--flow-board-item-border-radius`    | String | Border radius of the item    |
| `--flow-board-item-gap`              | String | Gap between sections         |
| `--flow-board-item-padding`          | String | Internal padding             |

# mosaik-flow-board-column

FlowBoardColumn - A column in a FlowBoard.

Represents a single column in a FlowBoard, containing items and optional header/footer.
Supports reordering, pinning, and empty state rendering.

**Mixins:** Themeable, Slottable

## Example

```html
<mosaik-flow-board-column column-key="todo" reorderable>
  <div slot="title">To Do</div>
  <mosaik-flow-board-column-item item-key="task-1">
    <span slot="title">Task 1</span>
  </mosaik-flow-board-column-item>
  <mosaik-flow-board-column-item item-key="task-2">
    <span slot="title">Task 2</span>
  </mosaik-flow-board-column-item>
  <mosaik-flow-board-column-item-composer slot="footer"></mosaik-flow-board-column-item-composer>
</mosaik-flow-board-column>
```

## Properties

| Property        | Attribute     | Modifiers | Type                                         | Description                                      |
|-----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `canDrag`       |               | readonly  | `boolean`                                    | Whether the column can currently be dragged.<br />Returns true only if reorderable, not pinned, and drag is enabled on the board. |
| `changed`       |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columnKey`     | `column-key`  |           | `string`                                     | Gets or sets the unique key for the column.<br />If not provided, a key will be generated on connect. |
| `connected`     |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`  |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasItems`      |               | readonly  | `boolean`                                    | Whether the column has any items in the default slot. |
| `isDragEnabled` |               | readonly  | `boolean`                                    | Whether drag and drop is enabled from the parent board. |
| `lang`          | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `pinned`        | `pinned`      |           | `boolean`                                    | Gets or sets whether the column is pinned (fixed position).<br />Pinned columns cannot be dragged and their index is preserved during reordering. |
| `reorderable`   | `reorderable` |           | `boolean`                                    | Gets or sets whether the column can be reordered.<br />Column can only be dragged if this is true, board has dragdrop, and column is not pinned. |
| `themeName`     |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getItems`             | `(): FlowBoardColumnItemElement[]`               | Gets all item elements in this column.           |
| `getNonPinnedItems`    | `(): FlowBoardColumnItemElement[]`               | Gets the non-pinned items in this column.        |
| `getPinnedItems`       | `(): FlowBoardColumnItemElement[]`               | Gets the pinned items in this column.            |
| `getSlotAssignments`   | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `handleSlotChange`     | `(): void`                                       | Handles slot changes to update empty state.      |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `setPinned`            | `(pinned: boolean): void`                        | Sets the pinned state with event support.<br /><br />**pinned**: The new pinned state. |

## Events

| Event                            | Type                                  | Description                                      |
|----------------------------------|---------------------------------------|--------------------------------------------------|
| `changed`                        | `PropertyChangedEvent`                | Emitted when any attribute changes before update |
| `connected`                      | `ConnectedEvent`                      | Emitted when the element is connected to the DOM |
| `disconnected`                   | `DisconnectedEvent`                   | Emitted when the element is disconnected from the DOM |
| `flowBoardBeforeColumnPinChange` | `FlowBoardBeforeColumnPinChangeEvent` | Fired before pin state changes                   |
| `flowBoardColumnPinChange`       | `FlowBoardColumnPinChangeEvent`       | Fired when pin state changes                     |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default slot for FlowBoardColumnItem elements    |
| `actions` | Action buttons for the column                    |
| `empty`   | Content to show when the column has no items     |
| `footer`  | Footer content (usually contains a composer)     |
| `meta`    | Metadata content (badges, counts, KPIs)          |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |
| `title`   | The title content of the column header           |

## CSS Shadow Parts

| Part        | Description                    |
|-------------|--------------------------------|
| `actions`   | The actions wrapper            |
| `body`      | The main body containing items |
| `container` | The main container element     |
| `empty`     | The empty state container      |
| `footer`    | The footer section             |
| `header`    | The column header section      |
| `meta`      | The meta information wrapper   |
| `title`     | The title wrapper              |

## CSS Custom Properties

| Property                               | Type   | Description                    |
|----------------------------------------|--------|--------------------------------|
| `--flow-board-column-background-color` | Color  | Background color of the column |
| `--flow-board-column-border-radius`    | String | Border radius of the column    |
| `--flow-board-column-gap`              | String | Gap between items              |
| `--flow-board-column-max-width`        | String | Maximum width of the column    |
| `--flow-board-column-min-width`        | String | Minimum width of the column    |
| `--flow-board-column-padding`          | String | Internal padding               |

# mosaik-flow-board

FlowBoard - A Kanban-style board container for organizing columns and items.

**Mixins:** Themeable, Sizeable, Gapable, Slottable, Focusable

## Example

Basic board with columns:

```html
<mosaik-flow-board dragdrop display-mode="tasks">
  <mosaik-flow-board-column column-key="todo">
    <span slot="title">To Do</span>
    <mosaik-flow-board-column-item item-key="item-1">
      <span slot="title">Task 1</span>
    </mosaik-flow-board-column-item>
  </mosaik-flow-board-column>
  <mosaik-flow-board-column-composer slot="append"></mosaik-flow-board-column-composer>
</mosaik-flow-board>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayMode`  | `display-mode` |           | `FlowBoardDisplayMode`                       | Gets or sets the display mode affecting density and layout. |
| `dragdrop`     | `dragdrop`     |           | `boolean`                                    | Gets or sets whether drag and drop is enabled.   |
| `gap`          | `gap`          |           | `Size \| CssNumber`                          | The `gap` represents the space between the child elements.<br />The default value is `0`, which means no gap is applied. |
| `isFocused`    | `is-focused`   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `scrollMode`   | `scroll-mode`  |           | `FlowBoardScrollMode`                        | Gets or sets the scroll mode for the board.      |
| `size`         | `size`         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getColumnByKey`        | `(columnKey: string): FlowBoardColumnElement \| undefined` | Gets a column by its key.<br /><br />**columnKey**: The column key to find. |
| `getColumns`            | `(): FlowBoardColumnElement[]`                   | Gets all column elements in the board.           |
| `getSlotAssignments`    | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `moveItem`              | `(itemKey: string, fromColumnKey: string, toColumnKey: string, toIndex?: number \| undefined): boolean` | Moves an item between columns programmatically.<br /><br />**itemKey**: The key of the item to move.<br />**fromColumnKey**: The source column key.<br />**toColumnKey**: The target column key.<br />**toIndex**: Optional target index in the target column. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onDefaultSlotChange`   | `(_event: Event): void`                          | Handles default slot changes to update column references. |
| `onSlotChanges`         | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `reorderColumn`         | `(columnKey: string, newIndex: number): boolean` | Reorders a column to a new index.<br /><br />**columnKey**: The key of the column to reorder.<br />**newIndex**: The target index. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `startColumnDrag`       | `(column: FlowBoardColumnElement, event: PointerEvent): void` | Initiates a column drag operation.<br />Called by child column elements when drag starts.<br /><br />**column**: The column to drag.<br />**event**: The pointer event. |
| `startItemDrag`         | `(item: FlowBoardColumnItemElement, event: PointerEvent): void` | Initiates an item drag operation.<br />Called by child item elements when drag starts.<br /><br />**item**: The item to drag.<br />**event**: The pointer event. |

## Events

| Event                          | Type                                | Description                                      |
|--------------------------------|-------------------------------------|--------------------------------------------------|
| `changed`                      | `PropertyChangedEvent`              | Emitted when any attribute changes before update |
| `connected`                    | `ConnectedEvent`                    | Emitted when the element is connected to the DOM |
| `disconnected`                 | `DisconnectedEvent`                 | Emitted when the element is disconnected from the DOM |
| `flowBoardBeforeColumnReorder` | `FlowBoardBeforeColumnReorderEvent` | Before column reorder (cancelable)               |
| `flowBoardBeforeItemMove`      | `FlowBoardBeforeItemMoveEvent`      | Before item move between columns (cancelable)    |
| `flowBoardBeforeItemReorder`   | `FlowBoardBeforeItemReorderEvent`   | Before item reorder within column (cancelable)   |
| `flowBoardColumnReorder`       | `FlowBoardColumnReorderEvent`       | After column reorder                             |
| `flowBoardDragStart`           | `FlowBoardDragStartEvent`           | When a drag operation starts (column or item)    |
| `flowBoardItemMove`            | `FlowBoardItemMoveEvent`            | After item move between columns                  |
| `flowBoardItemReorder`         | `FlowBoardItemReorderEvent`         | After item reorder within column                 |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default slot for mosaik-flow-board-column elements |
| `append` | Slot for add column action (mosaik-flow-board-column-composer) |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description                       |
|------------|-----------------------------------|
| `append`   | The append slot container         |
| `columns`  | The columns container             |
| `viewport` | The scrollable viewport container |

## CSS Custom Properties

| Property                        | Type   | Description                   |
|---------------------------------|--------|-------------------------------|
| `--flow-board-background-color` | Color  | Background color of the board |
| `--flow-board-gap`              | String | Gap between columns           |
| `--flow-board-padding`          | String | Padding around the viewport   |

# mosaik-focus-ring

Focus Ring - A visible indicator that highlights the currently focused element, aiding accessibility.

**Mixins:** Themeable, Attachable, Variantable

## Example

```html
<mosaik-focus-ring visible for="button"></mosaik-focus-ring>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`      |              | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `controlled`   | `controlled` |           | `"auto" \| "manual"`                         | Gets or sets the `controlled` property.          |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `for`          | `for`        |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `inward`       | `inward`     |           | `boolean`                                    | Gets or sets the `inward` property.              |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `visible`      | `visible`    |           | `boolean`                                    | Gets or sets the `visible` property.             |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `detach`        | `(): void`                                       | Detaches the element from its current control.   |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--focus-ring-active-width`         | String | The active width.                                |
| `--focus-ring-blur`                 | String | The blur amount.                                 |
| `--focus-ring-border-color`         | Color  | The border color.                                |
| `--focus-ring-border-radius`        | String | The border radius.                               |
| `--focus-ring-border-style`         | String | The border style.                                |
| `--focus-ring-border-width`         | String | The border width.                                |
| `--focus-ring-color`                | Color  | The color.                                       |
| `--focus-ring-font-family`          | String | The ring font family CSS custom property.        |
| `--focus-ring-font-letter-spacing`  | String | The ring font letter spacing CSS custom property. |
| `--focus-ring-font-line-height`     | String | The ring font line height CSS custom property.   |
| `--focus-ring-font-size`            | String | The ring font size CSS custom property.          |
| `--focus-ring-font-text-decoration` | String | The ring font text decoration CSS custom property. |
| `--focus-ring-font-text-transform`  | String | The ring font text transform CSS custom property. |
| `--focus-ring-font-weight`          | String | The ring font weight CSS custom property.        |
| `--focus-ring-gap`                  | String | The ring gap CSS custom property.                |
| `--focus-ring-inward-offset`        | String | The inward offset.                               |
| `--focus-ring-outward-offset`       | String | The outward offset.                              |
| `--focus-ring-padding-bottom`       | String | The ring padding bottom CSS custom property.     |
| `--focus-ring-padding-left`         | String | The ring padding left CSS custom property.       |
| `--focus-ring-padding-right`        | String | The ring padding right CSS custom property.      |
| `--focus-ring-padding-top`          | String | The ring padding top CSS custom property.        |
| `--focus-ring-shadow`               | String | The shadow.                                      |
| `--focus-ring-shadow-blur`          | String | The ring shadow blur CSS custom property.        |
| `--focus-ring-shadow-color`         | String | The ring shadow color CSS custom property.       |
| `--focus-ring-shadow-offset-x`      | String | The ring shadow offset x CSS custom property.    |
| `--focus-ring-shadow-offset-y`      | String | The ring shadow offset y CSS custom property.    |
| `--focus-ring-shadow-spread`        | String | The ring shadow spread CSS custom property.      |
| `--focus-ring-shape`                | String | The shape.                                       |
| `--focus-ring-transition-duration`  | String | The transition duration.                         |
| `--focus-ring-transition-mode`      | String | The transition mode.                             |
| `--focus-ring-transition-property`  | String | The transition property.                         |
| `--focus-ring-translate`            | String | The ring translate CSS custom property.          |
| `--focus-ring-width`                | String | The width.                                       |
| `--focus-ring-x`                    | String | The x position.                                  |
| `--focus-ring-y`                    | String | The y position.                                  |

# mosaik-font-editor

A font editor component that allows users to browse, search, and select fonts
from various providers with filtering by alphabet, category, and search text.

**Mixins:** Disableable, Themeable

## Example

```html
<!-- Basic font editor -->
<mosaik-font-editor></mosaik-font-editor>

<!-- Font editor with custom preview text -->
<mosaik-font-editor preview-text="The quick brown fox"></mosaik-font-editor>

<!-- Disabled font editor -->
<mosaik-font-editor disabled></mosaik-font-editor>
```

## Properties

| Property             | Attribute          | Modifiers | Type                                         | Description                                      |
|----------------------|--------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `availableLetters`   |                    | readonly  | `readonly string[]`                          | Gets the available letters for filtering.        |
| `changed`            |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collections`        |                    |           | `IFontCollection[]`                          | Gets or sets the font collections.               |
| `connected`          |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`              |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`           | `disabled`         |           | `boolean`                                    | Whether the component is disabled.               |
| `disconnected`       |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fontChanged`        |                    | readonly  | `IEventEmitter<IFontChangedEventDetail>`     | Called when the selected font changes.<br />Provides reference to `IFontChangedEventDetail` as event detail. |
| `fonts`              |                    | readonly  | `readonly IFont[]`                           | Gets the fonts currently displayed.              |
| `lang`               | `lang`             |           | `string`                                     | The lang property indicates the language of the element's content. |
| `loading`            |                    | readonly  | `boolean`                                    | Gets whether the component is loading.           |
| `previewText`        | `previewText`      |           | `string`                                     | Gets or sets the text to display in the preview. |
| `providers`          |                    |           | `IFontProvider[]`                            | Gets or sets the available font providers.       |
| `searchText`         | `searchText`       |           | `string`                                     | Gets or sets the current search text.            |
| `selected`           |                    | readonly  | `IEventEmitter<IFontSelectedEventDetail>`    | Called when a font is selected.<br />Provides reference to `IFontSelectedEventDetail` as event detail. |
| `selectedCategory`   | `selectedCategory` |           | `FontCategory \| null`                       | Gets or sets the selected category filter.       |
| `selectedFont`       |                    |           | `IFont \| null`                              | Gets or sets the currently selected font.        |
| `selectedLetter`     | `selectedLetter`   |           | `string \| null`                             | Gets or sets the selected starting letter filter. |
| `showAlphabetFilter` |                    |           | `boolean`                                    | Gets or sets whether to show the alphabet filter. |
| `showCategoryFilter` |                    |           | `boolean`                                    | Gets or sets whether to show the category filter. |
| `showCollections`    |                    |           | `boolean`                                    | Gets or sets whether to show the collections panel. |
| `showPreview`        |                    |           | `boolean`                                    | Gets or sets whether to show the preview section. |
| `showSearch`         |                    |           | `boolean`                                    | Gets or sets whether to show the search input.   |
| `themeName`          |                    |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `addProvider`      | `(provider: IFontProvider): void`                | Adds a font provider.<br /><br />**provider**: The provider to add. |
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `filterByCategory` | `(category: FontCategory \| null): void`         | Filters fonts by category.<br /><br />**category**: The category to filter by, or null for all. |
| `filterByLetter`   | `(letter: string \| null): void`                 | Filters fonts by letter.<br /><br />**letter**: The letter to filter by, or null for all. |
| `filterBySearch`   | `(text: string): void`                           | Filters fonts by search text.<br /><br />**text**: The search text. |
| `loadFont`         | `(font: IFont): void`                            | Loads a font for preview.<br /><br />**font**: The font to load. |
| `loadFonts`        | `(): Promise<void>`                              | Loads fonts from all providers.                  |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `removeProvider`   | `(providerId: string): void`                     | Removes a font provider.<br /><br />**providerId**: The ID of the provider to remove. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `selectFont`       | `(font: IFont): void`                            | Selects a font.<br /><br />**font**: The font to select. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `fontChanged`  | `FontChangedEvent`     | Fired when the selected font changes             |
| `fontSelected` | `FontSelectedEvent`    | Fired when a font is selected                    |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part              | Description                      |
|-------------------|----------------------------------|
| `alphabet`        | The alphabet filter container    |
| `alphabet-button` | An alphabet filter button        |
| `categories`      | The category filter container    |
| `empty`           | The empty state message          |
| `filters`         | The filters container            |
| `font-category`   | The font category in a list item |
| `font-item`       | A font list item                 |
| `font-name`       | The font name in a list item     |
| `list-container`  | The font list container          |
| `loading`         | The loading indicator            |
| `preview`         | The preview section              |
| `preview-text`    | The preview text                 |
| `root`            | The root container               |
| `search`          | The search input                 |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--font-editor-alphabet-button-background-color` | String | The editor alphabet button background color CSS custom property. |
| `--font-editor-alphabet-button-background-color-active` | String | The editor alphabet button background color active CSS custom property. |
| `--font-editor-alphabet-button-background-color-hover` | String | The editor alphabet button background color hover CSS custom property. |
| `--font-editor-alphabet-button-border-radius`    | String | The editor alphabet button border radius CSS custom property. |
| `--font-editor-alphabet-button-foreground-color` | String | The editor alphabet button foreground color CSS custom property. |
| `--font-editor-alphabet-button-foreground-color-active` | String | The editor alphabet button foreground color active CSS custom property. |
| `--font-editor-alphabet-button-foreground-color-disabled` | String | The editor alphabet button foreground color disabled CSS custom property. |
| `--font-editor-alphabet-button-foreground-color-hover` | String | The editor alphabet button foreground color hover CSS custom property. |
| `--font-editor-alphabet-button-size`             | String | The editor alphabet button size CSS custom property. |
| `--font-editor-background-color`                 | String | The editor background color CSS custom property. |
| `--font-editor-border-color`                     | String | The editor border color CSS custom property.     |
| `--font-editor-border-radius`                    | String | The editor border radius CSS custom property.    |
| `--font-editor-border-style`                     | String | The editor border style CSS custom property.     |
| `--font-editor-border-width`                     | String | The editor border width CSS custom property.     |
| `--font-editor-focus-ring-active-width`          | String | The editor focus ring active width CSS custom property. |
| `--font-editor-focus-ring-color`                 | String | The editor focus ring color CSS custom property. |
| `--font-editor-focus-ring-inward-offset`         | String | The editor focus ring inward offset CSS custom property. |
| `--font-editor-focus-ring-outward-offset`        | String | The editor focus ring outward offset CSS custom property. |
| `--font-editor-font-category-font-size`          | String | The editor font category font size CSS custom property. |
| `--font-editor-font-category-foreground-color`   | String | The editor font category foreground color CSS custom property. |
| `--font-editor-font-family`                      | String | The editor font family CSS custom property.      |
| `--font-editor-font-item-background-color`       | String | The editor font item background color CSS custom property. |
| `--font-editor-font-item-background-color-hover` | String | The editor font item background color hover CSS custom property. |
| `--font-editor-font-item-background-color-selected` | String | The editor font item background color selected CSS custom property. |
| `--font-editor-font-item-border-radius`          | String | The editor font item border radius CSS custom property. |
| `--font-editor-font-item-padding`                | String | The editor font item padding CSS custom property. |
| `--font-editor-font-letter-spacing`              | String | The editor font letter spacing CSS custom property. |
| `--font-editor-font-line-height`                 | String | The editor font line height CSS custom property. |
| `--font-editor-font-name-font-size`              | String | The editor font name font size CSS custom property. |
| `--font-editor-font-size`                        | String | The editor font size CSS custom property.        |
| `--font-editor-font-text-decoration`             | String | The editor font text decoration CSS custom property. |
| `--font-editor-font-text-transform`              | String | The editor font text transform CSS custom property. |
| `--font-editor-font-weight`                      | String | The editor font weight CSS custom property.      |
| `--font-editor-foreground-color`                 | String | The editor foreground color CSS custom property. |
| `--font-editor-gap`                              | String | The editor gap CSS custom property.              |
| `--font-editor-height`                           | String | The editor height CSS custom property.           |
| `--font-editor-list-height`                      | String | The editor list height CSS custom property.      |
| `--font-editor-padding-bottom`                   | String | The editor padding bottom CSS custom property.   |
| `--font-editor-padding-left`                     | String | The editor padding left CSS custom property.     |
| `--font-editor-padding-right`                    | String | The editor padding right CSS custom property.    |
| `--font-editor-padding-top`                      | String | The editor padding top CSS custom property.      |
| `--font-editor-preview-background-color`         | String | The editor preview background color CSS custom property. |
| `--font-editor-preview-border-radius`            | String | The editor preview border radius CSS custom property. |
| `--font-editor-preview-font-size`                | String | The editor preview font size CSS custom property. |
| `--font-editor-preview-min-height`               | String | The editor preview min height CSS custom property. |
| `--font-editor-shadow`                           | String | The editor shadow CSS custom property.           |
| `--font-editor-shadow-blur`                      | String | The editor shadow blur CSS custom property.      |
| `--font-editor-shadow-color`                     | String | The editor shadow color CSS custom property.     |
| `--font-editor-shadow-offset-x`                  | String | The editor shadow offset x CSS custom property.  |
| `--font-editor-shadow-offset-y`                  | String | The editor shadow offset y CSS custom property.  |
| `--font-editor-shadow-spread`                    | String | The editor shadow spread CSS custom property.    |
| `--font-editor-transition-duration`              | String | The editor transition duration CSS custom property. |
| `--font-editor-transition-mode`                  | String | The editor transition mode CSS custom property.  |
| `--font-editor-transition-property`              | String | The editor transition property CSS custom property. |
| `--font-editor-translate`                        | String | The editor translate CSS custom property.        |
| `--font-editor-width`                            | String | The editor width CSS custom property.            |

# mosaik-footer-item-group

FooterItemGroup - A collapsible group container for organizing footer links and content.

**Mixins:** Themeable

## Examples

Basic footer group with links:

```html
<mosaik-footer>
  <mosaik-footer-item-group slot="start">
    <span slot="header">Products</span>
    <mosaik-footer-item><a href="/product-a">Product A</a></mosaik-footer-item>
    <mosaik-footer-item><a href="/product-b">Product B</a></mosaik-footer-item>
    <mosaik-footer-item><a href="/pricing">Pricing</a></mosaik-footer-item>
  </mosaik-footer-item-group>
</mosaik-footer>
```

Expandable footer group with slotted header:

```html
<mosaik-footer-item-group>
  <span slot="header">Resources</span>
  <mosaik-footer-item><a href="/docs">Documentation</a></mosaik-footer-item>
  <mosaik-footer-item><a href="/tutorials">Tutorials</a></mosaik-footer-item>
  <mosaik-footer-item><a href="/api">API Reference</a></mosaik-footer-item>
</mosaik-footer-item-group>
```

Multiple groups in footer:

```html
<mosaik-footer>
  <div slot="start">
    <mosaik-footer-item-group>
      <span slot="header">Company</span>
      <mosaik-footer-item><a href="/about">About Us</a></mosaik-footer-item>
      <mosaik-footer-item><a href="/careers">Careers</a></mosaik-footer-item>
    </mosaik-footer-item-group>
  </div>
  <div slot="end">
    <mosaik-footer-item-group>
      <span slot="header">Support</span>
      <mosaik-footer-item><a href="/help">Help Center</a></mosaik-footer-item>
      <mosaik-footer-item><a href="/contact">Contact</a></mosaik-footer-item>
    </mosaik-footer-item-group>
  </div>
</mosaik-footer>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `header`       |           |           | `string`                                     | Gets or sets the `header` property.              |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `open`         |           |           | `boolean`                                    | Gets or sets the `open` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`        | `(): void`                                       |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for FooterItemElement children or other content |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--footer-item-group-font-family`          | String | The item group font family CSS custom property.  |
| `--footer-item-group-font-letter-spacing`  | String | The item group font letter spacing CSS custom property. |
| `--footer-item-group-font-line-height`     | String | The item group font line height CSS custom property. |
| `--footer-item-group-font-size`            | String | The item group font size CSS custom property.    |
| `--footer-item-group-font-text-decoration` | String | The item group font text decoration CSS custom property. |
| `--footer-item-group-font-text-transform`  | String | The item group font text transform CSS custom property. |
| `--footer-item-group-font-weight`          | String | The item group font weight CSS custom property.  |
| `--footer-item-group-gap`                  | String | The item group gap CSS custom property.          |
| `--footer-item-group-padding-bottom`       | String | The item group padding bottom CSS custom property. |
| `--footer-item-group-padding-left`         | String | The item group padding left CSS custom property. |
| `--footer-item-group-padding-right`        | String | The item group padding right CSS custom property. |
| `--footer-item-group-padding-top`          | String | The item group padding top CSS custom property.  |
| `--footer-item-group-shadow`               | String | The item group shadow CSS custom property.       |
| `--footer-item-group-shadow-blur`          | String | The item group shadow blur CSS custom property.  |
| `--footer-item-group-shadow-color`         | String | The item group shadow color CSS custom property. |
| `--footer-item-group-shadow-offset-x`      | String | The item group shadow offset x CSS custom property. |
| `--footer-item-group-shadow-offset-y`      | String | The item group shadow offset y CSS custom property. |
| `--footer-item-group-shadow-spread`        | String | The item group shadow spread CSS custom property. |
| `--footer-item-group-transition-duration`  | String | The item group transition duration CSS custom property. |
| `--footer-item-group-transition-mode`      | String | The item group transition mode CSS custom property. |
| `--footer-item-group-transition-property`  | String | The item group transition property CSS custom property. |
| `--footer-item-group-translate`            | String | The item group translate CSS custom property.    |

# mosaik-footer-item

FooterItem - A wrapper for individual items within a footer group with list semantics.

**Mixins:** Themeable

## Examples

Basic footer item with link:

```html
<mosaik-footer-item>
  <a href="/about">About Us</a>
</mosaik-footer-item>
```

Footer items in a group:

```html
<mosaik-footer-item-group header="Help">
  <mosaik-footer-item><a href="/faq">FAQ</a></mosaik-footer-item>
  <mosaik-footer-item><a href="/support">Support</a></mosaik-footer-item>
  <mosaik-footer-item><a href="/contact">Contact</a></mosaik-footer-item>
</mosaik-footer-item-group>
```

Footer item with custom content:

```html
<mosaik-footer-item>
  <button onclick="openModal()">Feedback</button>
</mosaik-footer-item>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for link or content (typically an anchor tag) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--footer-item-font-family`          | String | The item font family CSS custom property.        |
| `--footer-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--footer-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--footer-item-font-size`            | String | The item font size CSS custom property.          |
| `--footer-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--footer-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--footer-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--footer-item-gap`                  | String | The item gap CSS custom property.                |
| `--footer-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--footer-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--footer-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--footer-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--footer-item-shadow`               | String | The item shadow CSS custom property.             |
| `--footer-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--footer-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--footer-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--footer-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--footer-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--footer-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--footer-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--footer-item-transition-property`  | String | The item transition property CSS custom property. |
| `--footer-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-footer

Footer - A semantic footer component for page-level or section-level navigation and information.

**Mixins:** Themeable

## Examples

Basic footer with slotted brand and auto-generated copyright:

```html
<mosaik-footer breakpoint="768px">
  <div slot="brand">Acme Inc</div>
  <nav slot="start">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  <nav slot="end">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</mosaik-footer>
```

Footer with custom copyright and branding:

```html
<mosaik-footer>
  <div slot="copyright">© 2024 My Company. All rights reserved.</div>
  <div slot="brand">
    <img src="logo.svg" alt="Company Logo">
  </div>
  <nav slot="start">
    <mosaik-footer-item-group>
      <mosaik-footer-item><a href="/product-a">Product A</a></mosaik-footer-item>
      <mosaik-footer-item><a href="/product-b">Product B</a></mosaik-footer-item>
    </mosaik-footer-item-group>
  </nav>
</mosaik-footer>
```

Full-featured footer with all sections:

```html
<mosaik-footer>
  <div slot="top">
    <p>Join our newsletter for updates</p>
    <input type="email" placeholder="Email">
  </div>
  <div slot="brand">Mosaik Design System</div>
  <nav slot="start">
    <h3>Resources</h3>
    <a href="/docs">Documentation</a>
    <a href="/examples">Examples</a>
  </nav>
  <nav slot="end">
    <h3>Connect</h3>
    <a href="/twitter">Twitter</a>
    <a href="/github">GitHub</a>
  </nav>
  <div slot="bottom">
    <small>Built with the Mosaik team</small>
  </div>
</mosaik-footer>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `brand`        |              |           | `string`                                     | Gets or sets the `brand` property.               |
| `breakpoint`   | `breakpoint` |           | `string`                                     | Gets or sets the `breakpoint` property.          |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `copyright`    |              |           | `string`                                     | Gets or sets the `copyright` property.           |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `bottom` | Full-width content area below the main footer section |
| `brand`  | The brand slot.                                  |
| `end`    | Right/end column content (additional links, social media, etc.) |
| `start`  | Left/start column content (navigation links, etc.) |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `top`    | Full-width content area above the main footer section |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--footer-background-color`     | String | The background color CSS custom property.     |
| `--footer-border-color`         | String | The border color CSS custom property.         |
| `--footer-border-radius`        | String | The border radius CSS custom property.        |
| `--footer-border-style`         | String | The border style CSS custom property.         |
| `--footer-border-width`         | String | The border width CSS custom property.         |
| `--footer-font-family`          | String | The font family CSS custom property.          |
| `--footer-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--footer-font-line-height`     | String | The font line height CSS custom property.     |
| `--footer-font-size`            | String | The font size CSS custom property.            |
| `--footer-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--footer-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--footer-font-weight`          | String | The font weight CSS custom property.          |
| `--footer-foreground-color`     | String | The foreground color CSS custom property.     |
| `--footer-gap`                  | String | The gap CSS custom property.                  |
| `--footer-inset`                | String | The inset CSS custom property.                |
| `--footer-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--footer-padding-left`         | String | The padding left CSS custom property.         |
| `--footer-padding-right`        | String | The padding right CSS custom property.        |
| `--footer-padding-top`          | String | The padding top CSS custom property.          |
| `--footer-shadow`               | String | The shadow CSS custom property.               |
| `--footer-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--footer-shadow-color`         | String | The shadow color CSS custom property.         |
| `--footer-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--footer-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--footer-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--footer-transition-duration`  | String | The transition duration CSS custom property.  |
| `--footer-transition-mode`      | String | The transition mode CSS custom property.      |
| `--footer-transition-property`  | String | The transition property CSS custom property.  |
| `--footer-translate`            | String | The translate CSS custom property.            |

# mosaik-form-field

Form Field - A component that represents a form field with associated label, hints, and validation messages.

**Mixins:** Themeable, Disableable, Labelable, FormAssociated

## Examples

Basic form field with a text box:

```html
<mosaik-form-field label="Username" name="username" hint="Enter your desired username">
  <mosaik-textbox></mosaik-textbox>
</mosaik-form-field>
```

Required form field with error message:

```html
<mosaik-form-field label="Email" name="email" required hint="We'll never share your email">
  <mosaik-textbox></mosaik-textbox>
</mosaik-form-field>
```

## Properties

| Property            | Attribute  | Modifiers | Type                                         | Description                                      |
|---------------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `accessor`          |            |           | `ElementValueAccessorFn<any> \| null`        | Gets or sets the `accessor` property.            |
| `changed`           |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `error`             | `error`    |           | `string`                                     | Gets or sets the `error` property.               |
| `form`              |            |           | `HTMLFormElement \| null`                    | Gets or sets the `form` property.                |
| `hint`              | `hint`     |           | `string`                                     | Gets or sets the `hint` property.                |
| `info`              | `info`     |           | `string`                                     | Gets or sets the `info` property.                |
| `internals`         |            | readonly  | `ElementInternals`                           | The internals object of the element.             |
| `invalid`           | `invalid`  |           | `boolean`                                    | Gets or sets the `invalid` property.             |
| `label`             |            |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `labels`            |            | readonly  | `NodeList`                                   | The labels this element is associated with.      |
| `lang`              | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`              | `name`     |           | `string`                                     | Gets or sets the `name` property.                |
| `required`          | `required` |           | `boolean`                                    | Gets or sets the `required` property.            |
| `themeName`         |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `validationMessage` |            |           | `string`                                     | Gets or sets the `validationMessage` property.   |
| `validators`        |            |           | `ElementValidatorFn[]`                       |                                                  |
| `validity`          |            | readonly  | `ValidityState`                              |                                                  |
| `willValidate`      |            | readonly  | `boolean`                                    |                                                  |

## Methods

| Method                     | Type                                             | Description                                      |
|----------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`               | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `checkValidity`            | `(): boolean`                                    | Returns true if internals's target element has no validity problems; false otherwise.<br />Fires an invalid event at the element in the latter case. |
| `emit`                     | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `formAssociatedCallback`   | `((form: HTMLFormElement \| null): void) \| undefined` | Called when the browser associates the element with a form element,<br />or disassociates the element from a form element. |
| `formDisabledCallback`     | `((disabled: boolean): void) \| undefined`       | Called after the disabled state of the element changes,<br />either because the disabled attribute of this element was added or removed;<br />or because the disabled state changed on a `<fieldset>` that's an ancestor of this element. |
| `formResetCallback`        | `((): void) \| undefined`                        | Called after the form is reset.<br />The element should reset itself to some kind of default state. |
| `formStateRestoreCallback` | `((state: FormRestoreState \| null, reason: FormRestoreReason): void) \| undefined` | Called in one of two circumstances:<br />  - When the browser restores the state of the element (for example, after a navigation, or when the browser restarts). The `mode` argument is `"restore"` in this case.<br />  - When the browser's input-assist features such as form autofilling sets a value. The `mode` argument is `"autocomplete"` in this case. |
| `getFormState`             | `(): FormValue \| null`                          | Gets the current form state of a component. Defaults to the component's `[formValue]`.<br /><br />Use this when the state of an element is different from its value, such as<br />checkboxes (internal boolean state and a user string value). |
| `getFormValue`             | `(): FormValue \| null`                          | Gets the current form value of a component.      |
| `off`                      | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                       | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`             | `(event: Event): void`                           |                                                  |
| `reportValidity`           | `(): boolean`                                    | Returns true if internals's target element has no validity problems; otherwise, returns false.<br />Fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user. |
| `requestUpdate`            | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `invalid`      | `Event`                | Emitted when validation fails (native form validation event) |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default slot for the form field control.     |
| `actions` | Slot for additional information or helper text.  |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                                      |
|----------|--------------------------------------------------|
| `detail` | The part representing detailed information or additional text related to the form field. |
| `error`  | The part representing error messages related to the form field. |
| `hint`   | The part representing hints or suggestions for the form field. |
| `label`  | The part representing the label associated with the form field. |
| `root`   | The root part.                                   |
| `tip`    | The tip part.                                    |
| `title`  | The title part.                                  |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--form-field-background-color`     | String | The field background color CSS custom property.  |
| `--form-field-font-family`          | String | The field font family CSS custom property.       |
| `--form-field-font-letter-spacing`  | String | The field font letter spacing CSS custom property. |
| `--form-field-font-line-height`     | String | The field font line height CSS custom property.  |
| `--form-field-font-size`            | String | The field font size CSS custom property.         |
| `--form-field-font-text-decoration` | String | The field font text decoration CSS custom property. |
| `--form-field-font-text-transform`  | String | The field font text transform CSS custom property. |
| `--form-field-font-weight`          | String | The field font weight CSS custom property.       |
| `--form-field-gap`                  | String | The field gap CSS custom property.               |
| `--form-field-padding-bottom`       | String | The field padding bottom CSS custom property.    |
| `--form-field-padding-left`         | String | The field padding left CSS custom property.      |
| `--form-field-padding-right`        | String | The field padding right CSS custom property.     |
| `--form-field-padding-top`          | String | The field padding top CSS custom property.       |
| `--form-field-shadow`               | String | The field shadow CSS custom property.            |
| `--form-field-shadow-blur`          | String | The field shadow blur CSS custom property.       |
| `--form-field-shadow-color`         | String | The field shadow color CSS custom property.      |
| `--form-field-shadow-offset-x`      | String | The field shadow offset x CSS custom property.   |
| `--form-field-shadow-offset-y`      | String | The field shadow offset y CSS custom property.   |
| `--form-field-shadow-spread`        | String | The field shadow spread CSS custom property.     |
| `--form-field-transition-duration`  | String | The field transition duration CSS custom property. |
| `--form-field-transition-mode`      | String | The field transition mode CSS custom property.   |
| `--form-field-transition-property`  | String | The field transition property CSS custom property. |
| `--form-field-translate`            | String | The field translate CSS custom property.         |

# mosaik-form

Form - A structured container for collecting and validating user input data.

**Mixins:** Themeable, Slottable

## Examples

Basic user registration form:

```html
<mosaik-form>
  <mosaik-form-field label="Full Name" name="fullName" required>
    <mosaik-textbox></mosaik-textbox>
  </mosaik-form-field>
  <mosaik-form-field label="Email" name="email" required>
    <mosaik-textbox></mosaik-textbox>
  </mosaik-form-field>
  <mosaik-button type="submit" label="Register" variant="primary"></mosaik-button>
</mosaik-form>
```

Form with validation disabled:

```html
<mosaik-form novalidate>
  <mosaik-form-field label="Username" name="username">
    <mosaik-textbox></mosaik-textbox>
  </mosaik-form-field>
  <mosaik-button type="submit" label="Submit"></mosaik-button>
  <mosaik-button type="reset" label="Reset"></mosaik-button>
</mosaik-form>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `autocomplete` | `autocomplete` |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`         | `name`         |           | `string`                                     | Gets or sets the `name` property.                |
| `novalidate`   | `novalidate`   |           | `boolean`                                    | Gets or sets the `novalidate` property.          |
| `reseted`      |                | readonly  | `IEventEmitter<IFormResetEventDetail>`       | Called when the form is reseted.<br />Provides reference to `IEventDetail` as event detail. |
| `submitted`    |                | readonly  | `IEventEmitter<IFormSubmitEventDetail>`      | Called when the form is submitted.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Checks the validity of the form.<br />It returns `true` if the form is valid, otherwise it returns `false`. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `reportValidity`       | `(): boolean`                                    | Reports the validity of the form.<br />It returns `true` if the form is valid, otherwise it returns `false`. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the form.                                 |
| `submit`               | `(): boolean`                                    | Submits the form. It returns `true` if the form is valid, otherwise it returns `false`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `formReset`    | `FormResetEvent`       | Fired when the form is reset to initial values   |
| `submitted`    | `FormSubmitEvent`      | Fired when the form is submitted with collected form data |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content area for form controls, form fields, and layout elements |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                     |
|--------|---------------------------------|
| `form` | The main form container element |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--form-background-color`     | String | The background color of the form container    |
| `--form-font-family`          | String | The font family CSS custom property.          |
| `--form-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--form-font-line-height`     | String | The font line height CSS custom property.     |
| `--form-font-size`            | String | The font size CSS custom property.            |
| `--form-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--form-font-text-trans`      | String | The font text trans CSS custom property.      |
| `--form-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--form-font-weight`          | String | The font weight CSS custom property.          |
| `--form-gap`                  | String | The gap CSS custom property.                  |
| `--form-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--form-padding-left`         | String | The padding left CSS custom property.         |
| `--form-padding-right`        | String | The padding right CSS custom property.        |
| `--form-padding-top`          | String | The padding top CSS custom property.          |
| `--form-shadow`               | String | The shadow CSS custom property.               |
| `--form-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--form-shadow-color`         | String | The shadow color CSS custom property.         |
| `--form-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--form-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--form-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--form-transition-duration`  | String | The transition duration CSS custom property.  |
| `--form-transition-mode`      | String | The transition mode CSS custom property.      |
| `--form-transition-property`  | String | The transition property CSS custom property.  |
| `--form-translate`            | String | The translate CSS custom property.            |

# mosaik-ghost

Ghost - An invisible positioned placeholder element for drag-and-drop and positional references.

**Mixins:** Themeable, Dimensionable

## Examples

Basic positioned ghost element:

```html
<mosaik-ghost top="100px" left="50px" width="200px" height="150px"></mosaik-ghost>
```

Drag-and-drop drop indicator:

```html
<div class="drop-zone">
  <mosaik-ghost id="dropIndicator" style="display: none;"></mosaik-ghost>
  <div class="items">...</div>
</div>
<script>
  const ghost = document.querySelector('#dropIndicator');
  dropZone.addEventListener('dragover', (e) => {
    ghost.style.display = 'block';
    ghost.top = e.clientY + 'px';
    ghost.left = e.clientX + 'px';
  });
</script>
```

Layout measurement reference:

```html
<mosaik-ghost id="layoutAnchor" top="0" left="0" width="100%" height="auto"></mosaik-ghost>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `height`       | `height`  |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `left`         | `left`    |           | `CssLength`                                  | Gets or sets the `left` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `top`          | `top`     |           | `CssLength`                                  | Gets or sets the `top` property.                 |
| `width`        | `width`   |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot (typically empty or used for hidden reference content) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--ghost-background-color`     | String | Background color of the ghost element         |
| `--ghost-border-color`         | String | Border color for the ghost outline            |
| `--ghost-border-radius`        | String | Corner rounding radius                        |
| `--ghost-border-style`         | String | Border line style                             |
| `--ghost-border-width`         | String | Border thickness                              |
| `--ghost-font-family`          | String | The font family CSS custom property.          |
| `--ghost-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--ghost-font-line-height`     | String | The font line height CSS custom property.     |
| `--ghost-font-size`            | String | The font size CSS custom property.            |
| `--ghost-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--ghost-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--ghost-font-weight`          | String | The font weight CSS custom property.          |
| `--ghost-gap`                  | String | The gap CSS custom property.                  |
| `--ghost-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--ghost-padding-left`         | String | The padding left CSS custom property.         |
| `--ghost-padding-right`        | String | The padding right CSS custom property.        |
| `--ghost-padding-top`          | String | The padding top CSS custom property.          |
| `--ghost-shadow`               | String | The shadow CSS custom property.               |
| `--ghost-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--ghost-shadow-color`         | String | The shadow color CSS custom property.         |
| `--ghost-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--ghost-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--ghost-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--ghost-transition-duration`  | String | Duration of visual transitions                |
| `--ghost-transition-mode`      | String | Timing function for transitions               |
| `--ghost-transition-property`  | String | CSS properties to transition                  |
| `--ghost-translate`            | String | The translate CSS custom property.            |

# mosaik-grid-item

Grid Item - An element within a grid layout, organized in rows and columns.

**Mixins:** Themeable

## Example

Item spanning two columns in a content layout:

```html
<mosaik-grid column-definitions="* * *" row-definitions="auto auto" gap="16">
  <mosaik-grid-item column="1" row="1" column-span="2">Wide Content</mosaik-grid-item>
  <mosaik-grid-item column="3" row="1">Aside</mosaik-grid-item>
  <mosaik-grid-item column="1" row="2" column-span="3">Full-Width Footer</mosaik-grid-item>
</mosaik-grid>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `column`       | `column`      |           | `number`                                     | Gets or sets the `column` property.              |
| `columnSpan`   | `column-span` |           | `number`                                     | Gets or sets the `columnSpan` property.          |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `row`          | `row`         |           | `number`                                     | Gets or sets the `row` property.                 |
| `rowSpan`      | `row-span`    |           | `number`                                     | Gets or sets the `rowSpan` property.             |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method               | Type                                             | Description                                      |
|----------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`         | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`               | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `invalidatePosition` | `(): void`                                       | Re-evaluates and applies the CSS `grid-area` placement of this item.<br /><br />Called by the parent `GridElement` when `columnDefinitions` or<br />`rowDefinitions` change so that out-of-bounds positions are clamped<br />to `auto`, preventing CSS Grid from creating implicit tracks. |
| `off`                | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                 | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`      | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-grid

Grid - A layout system that arranges elements in a structured grid pattern.

**Mixins:** Alignable, Themeable

## Examples

Dashboard with a fixed sidebar and a flexible main content area:

```html
<mosaik-grid column-definitions="240 *" row-definitions="auto *" gap="16">
  <mosaik-grid-item column="1" row="1" row-span="2">Sidebar</mosaik-grid-item>
  <mosaik-grid-item column="2" row="1">Header</mosaik-grid-item>
  <mosaik-grid-item column="2" row="2">Main Content</mosaik-grid-item>
</mosaik-grid>
```

Equal-width card layout with consistent spacing:

```html
<mosaik-grid column-definitions="* * *" row-definitions="auto" gap="24">
  <mosaik-grid-item column="1" row="1">Card 1</mosaik-grid-item>
  <mosaik-grid-item column="2" row="1">Card 2</mosaik-grid-item>
  <mosaik-grid-item column="3" row="1">Card 3</mosaik-grid-item>
</mosaik-grid>
```

## Properties

| Property              | Attribute              | Modifiers | Type                                         | Description                                      |
|-----------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columnDefinitions`   | `column-definitions`   |           | `ColumnDefinitions`                          | Gets or sets the `columnDefinitions` property.<br /><br />Specifies the number of columns and their widths using `GridLength` sizing.<br />The array length defines the number of columns; each element defines the sizing of one column track.<br /><br />**Accepted forms**<br />- Array of `ColumnDefinitionInput` entries (JavaScript property binding).<br />- Space-separated string of grid-length tokens (HTML attribute), e.g. `"* 2* auto 120"`.<br /><br />**Accepted element / token forms**<br />- `number` - fixed width in pixels/DIPs (e.g. `120`).<br />- `string` - `"auto"`, `"*"`, `"n*"`, or a numeric string (e.g. `"2*"`).<br />- `IColumnDefinition` - `{ width, minWidth?, maxWidth? }` (array form only).<br /><br />CSS units (`px`, `em`, `%`, `fr`, …) are **not** supported and will<br />throw. Negative values are rejected. |
| `connected`           |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `gap`                 | `gap`                  |           | `GridLayoutGap`                              | Gets or sets the `gap` property.<br /><br />Specifies the spacing between grid tracks (rows and columns).<br /><br />**Accepted forms**<br />- `number` - uniform gap in pixels on both axes (e.g. `16`).<br />- `CssLength` string - uniform gap with a CSS unit (e.g. `'1rem'`, `'8px'`).<br />- `IGridLayoutGap` object - separate gap per axis (`{ rows, columns }`) (JS only).<br /><br />When set via HTML attribute, the value is parsed as a CSS length<br />string (e.g. `gap="16"`, `gap="1rem"`).<br /><br />Negative values are rejected. |
| `horizontalAlignment` | `horizontal-alignment` |           | `HorizontalAlignment`                        | Gets or sets the `horizontalAlignment` property.<br />The default value is `stretch`. |
| `items`               |                        | readonly  | `HTMLElement[]`                              | Gets or sets the `items` property.               |
| `lang`                | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `rowDefinitions`      | `row-definitions`      |           | `RowDefinitions`                             | Gets or sets the `rowDefinitions` property.<br /><br />Specifies the number of rows and their heights using `GridLength` sizing.<br />The array length defines the number of rows; each element defines the sizing of one row track.<br /><br />**Accepted forms**<br />- Array of `RowDefinitionInput` entries (JavaScript property binding).<br />- Space-separated string of grid-length tokens (HTML attribute), e.g. `"auto * 2* 100"`.<br /><br />**Accepted element / token forms**<br />- `number` - fixed height in pixels/DIPs (e.g. `100`).<br />- `string` - `"auto"`, `"*"`, `"n*"`, or a numeric string (e.g. `"2*"`).<br />- `IRowDefinition` - `{ height, minHeight?, maxHeight? }` (array form only).<br /><br />CSS units (`px`, `em`, `%`, `fr`, …) are **not** supported and will<br />throw. Negative values are rejected. |
| `themeName`           |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `verticalAlignment`   | `vertical-alignment`   |           | `VerticalAlignment`                          | Gets or sets the `verticalAlignment` property.<br />The default value is `stretch`. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for grid items.                 |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-helmet

Helmet - A document head manager for dynamically updating meta tags, title, and other head elements.

## Examples

Set page title and meta description:

```html
<mosaik-helmet>
  <title>My Page Title - My Site</title>
  <meta name="description" content="This page contains important information about our product.">
</mosaik-helmet>
```

Social media meta tags:

```html
<mosaik-helmet>
  <title>Article Title</title>
  <meta property="og:title" content="Article Title">
  <meta property="og:description" content="Article description for social sharing">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta name="twitter:card" content="summary_large_image">
</mosaik-helmet>
```

Include external stylesheets and scripts:

```html
<mosaik-helmet>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <script src="https://cdn.example.com/library.js" async></script>
</mosaik-helmet>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-hint

Hint - Supplementary text providing guidance, context, or additional information.

**Mixins:** Themeable, TextFormattable

## Examples

Basic hint for an input field:

```html
<label for="username">Username</label>
<input id="username" type="text">
<mosaik-hint text="Must be 3-20 characters, alphanumeric only"></mosaik-hint>
```

Hint with custom wrapping and alignment:

```html
<mosaik-hint
  id="wrappedHint"
  text="This is a longer explanation that might need to wrap to multiple lines."
  text-overflow="wrap">
</mosaik-hint>
<script>
  document.getElementById('wrappedHint').alignment = 'center';
</script>
```

Truncated hint with ellipsis:

```html
<mosaik-hint
  text="This is a very long hint that will be truncated with an ellipsis if it exceeds the available space"
  text-overflow="truncate">
</mosaik-hint>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment`    |           | `TextAlignment`                              | Gets or sets the `alignment` property.<br /><br />Possible values are:<br />* `center` - centers the text horizontally within the element<br />* `justify` - stretches the text to fill the width of the element, adjusting spacing as needed<br />* `left` - aligns the text to the left edge of the element (default)<br />* `right` - aligns the text to the right edge of the element |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |                |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`         |           | `string`                                     | Gets or sets the `text` property.                |
| `textOverflow` | `textOverflow` |           | `TextOverflow`                               | Gets or sets the `textOverflow` property.        |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                    |
|--------|--------------------------------|
| `root` | The root part.                 |
| `text` | The rendered hint text element |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--hint-background-color`     | String | The background color CSS custom property.     |
| `--hint-border-color`         | String | The border color CSS custom property.         |
| `--hint-border-radius`        | String | The border radius CSS custom property.        |
| `--hint-border-style`         | String | The border style CSS custom property.         |
| `--hint-border-width`         | String | The border width CSS custom property.         |
| `--hint-font-family`          | String | The font family CSS custom property.          |
| `--hint-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--hint-font-line-height`     | String | The font line height CSS custom property.     |
| `--hint-font-size`            | String | The font size CSS custom property.            |
| `--hint-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--hint-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--hint-font-weight`          | String | The font weight CSS custom property.          |
| `--hint-foreground-color`     | String | The foreground color CSS custom property.     |
| `--hint-gap`                  | String | The gap CSS custom property.                  |
| `--hint-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--hint-padding-left`         | String | The padding left CSS custom property.         |
| `--hint-padding-right`        | String | The padding right CSS custom property.        |
| `--hint-padding-top`          | String | The padding top CSS custom property.          |
| `--hint-shadow`               | String | The shadow CSS custom property.               |
| `--hint-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--hint-shadow-color`         | String | The shadow color CSS custom property.         |
| `--hint-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--hint-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--hint-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--hint-transition-duration`  | String | The transition duration CSS custom property.  |
| `--hint-transition-mode`      | String | The transition mode CSS custom property.      |
| `--hint-transition-property`  | String | The transition property CSS custom property.  |
| `--hint-translate`            | String | The translate CSS custom property.            |

# mosaik-icon

Icon - A scalable vector graphics element for displaying symbolic imagery and visual communication.

Renders SVG icons from path data with support for theming, sizing, rotation, and various appearances.
Essential for user interface iconography, providing consistent visual language across applications.
Features built-in accessibility support and performance optimization for vector graphics.

**Mixins:** Themeable, Variantable, Sizeable, Appearanceable, Disableable

## Example

```html
<!-- Basic icon (set icon path data via the `data` JavaScript property) -->
<mosaik-icon></mosaik-icon>

<!-- Rotated icon with solid appearance -->
<mosaik-icon angel="180" appearance="solid"></mosaik-icon>

<!-- Inline small icon -->
<span>Click here <mosaik-icon inline size="small"></mosaik-icon></span>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `angle`        | `angle`      |           | `number`                                     | Gets or sets the `angle` property.               |
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `data`         |              |           | `string`                                     | Gets or sets the `data` property.                |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `grid`         | `grid`       |           | `number`                                     | Gets or sets the SVG grid used for the internal viewBox size.<br />This must match the coordinate system of the icon path data<br />(e.g. 20 for Fluent 20px icons, 24 for Material Design icons). |
| `inline`       | `inline`     |           | `boolean`                                    | Gets or sets the `inline` property.              |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `readonly`     | `readonly`   |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                               |
|----------|-------------------------------------------|
| `symbol` | The internal SVG symbol container element |

## CSS Custom Properties

| Property                     | Type   | Description                               |
|------------------------------|--------|-------------------------------------------|
| `--icon-background-color`    | Color  | Background color behind icon              |
| `--icon-border-color`        | Color  | Border color around icon                  |
| `--icon-border-radius`       | String | Border radius for icon container          |
| `--icon-border-style`        | String | Border style (solid, dashed, etc.)        |
| `--icon-border-width`        | String | Border width around icon                  |
| `--icon-font-family`         | String | Font family for icon rendering            |
| `--icon-font-size`           | String | Base font size for icon scaling           |
| `--icon-font-weight`         | String | Font weight for icon strokes              |
| `--icon-foreground-color`    | Color  | Icon color and stroke color               |
| `--icon-gap`                 | String | Spacing between icon and adjacent content |
| `--icon-padding-bottom`      | String | Bottom padding around icon                |
| `--icon-padding-left`        | String | Left padding around icon                  |
| `--icon-padding-right`       | String | Right padding around icon                 |
| `--icon-padding-top`         | String | Top padding around icon                   |
| `--icon-shadow`              | String | Shadow effect applied to icon             |
| `--icon-size`                | String | Overall size scaling for the icon         |
| `--icon-transition-duration` | String | Animation duration for state changes      |
| `--icon-transition-mode`     | String | Animation timing function                 |
| `--icon-transition-property` | String | CSS properties to animate                 |

# mosaik-image

Image - A responsive image container with advanced loading states and layout control.

Provides comprehensive image handling with loading indicators, error states, aspect ratio control,
and flexible content placement. Supports various fit modes, lazy loading, and accessibility features.
Includes built-in placeholder states and legend positioning for rich media presentation.

**Mixins:** Themeable, Disableable, Variantable, Dimensionable

## Example

```html
<!-- Basic image -->
<mosaik-image src="photo.jpg" alt="Landscape photo"></mosaik-image>

<!-- Image with ratio and fit mode -->
<mosaik-image
  src="portrait.jpg"
  ratio="4/3"
  fit="cover"
  alt="Portrait photo">
</mosaik-image>

<!-- Image with legend and thumbnail placeholder -->
<mosaik-image
  src="high-res.jpg"
  thumbnail-src="low-res-thumb.jpg"
  legend-position="bottom">
  <span slot="legend">Photo caption</span>
</mosaik-image>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                         | Description                                      |
|------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alt`            | `alt`            |           | `string`                                     | Gets or sets the `alt` property.                 |
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`            | `fit`            |           | `ImageFit`                                   | Gets or sets the `fit` property.                 |
| `height`         | `height`         |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `imageFailed`    |                  | readonly  | `IEventEmitter<IEventDetail>`                | Called when the image load is failed.<br />Provides reference to `IEventDetail` as event detail. |
| `imageLoaded`    |                  | readonly  | `IEventEmitter<IEventDetail>`                | Called when the image is loaded.<br />Provides reference to `IEventDetail` as event detail. |
| `lang`           | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `legend`         | `legend`         |           | `string`                                     | Gets or sets the `legend` property.              |
| `legendPosition` | `legendPosition` |           | `ImageLegendPosition`                        | Gets or sets the `legendPosition` property.      |
| `ratio`          | `ratio`          |           | `CssAspectRatio`                             | Gets or sets the `ratio` property.               |
| `showEmpty`      |                  |           | `boolean`                                    | Gets or sets the `showEmpty` property.           |
| `showFailed`     |                  |           | `boolean`                                    | Gets or sets the `showFailed` property.          |
| `showPending`    |                  |           | `boolean`                                    | Gets or sets the `showEmpty` property.           |
| `src`            | `src`            |           | `string`                                     | Gets or sets the `src` property.                 |
| `srcset`         | `srcset`         |           | `string`                                     | Gets or sets the `srcset` property.              |
| `state`          |                  |           | `ImageState`                                 | Returns the `state` property.                    |
| `themeName`      |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thumbnailSrc`   | `thumbnailSrc`   |           | `string`                                     | Gets or sets the `thumbnailSrc` property.<br />When set, a low-resolution blurred version of the image is displayed as a placeholder<br />while the full image loads. The thumbnail fades out once the main image is ready.<br />The default value is an empty string, which means no thumbnail is displayed. |
| `variant`        | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `width`          | `width`          |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `imageFailed`  | `ImageFailedEvent`     | Emitted when image loading fails                 |
| `imageLoaded`  | `ImageLoadedEvent`     | Emitted when image successfully loads            |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content overlaid on the image            |
| `empty`   | Content shown when no image source is provided   |
| `failed`  | Content displayed when image loading fails       |
| `legend`  | Caption or description content positioned around the image |
| `pending` | Content shown while image is loading             |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description                                      |
|---------------|--------------------------------------------------|
| `content`     | Overlay content container                        |
| `image`       | The main image element container                 |
| `legend`      | Caption or description container                 |
| `placeholder` | Container for loading, error, and empty states   |
| `thumbnail`   | Blurred low-resolution placeholder image displayed during loading |

## CSS Custom Properties

| Property                    | Type   | Description                                      |
|-----------------------------|--------|--------------------------------------------------|
| `--image-aspect-ratio`      | String | Aspect ratio constraint for the image container  |
| `--image-border-radius`     | String | Border radius applied to the image               |
| `--image-legend-position`   | String | Position of the legend relative to image         |
| `--image-object-fit`        | String | How the image fits within its container (cover, contain, fill, etc.) |
| `--image-placeholder-color` | Color  | Background color for placeholder states          |
| `--image-thumbnail-blur`    | String | Blur radius applied to the thumbnail placeholder |

# mosaik-indicator

Indicator - A visual navigation element showing current position within a set of items.

**Mixins:** Themeable, Disableable, Variantable, Orientable

## Examples

Basic carousel indicator:

```html
<div class="carousel">
  <div class="carousel-track" id="track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <div class="slide">Slide 4</div>
  </div>
  <mosaik-indicator id="carouselIndicator" total="4" selected="0"></mosaik-indicator>
</div>

<script>
  const indicator = document.getElementById('carouselIndicator');
  indicator.addEventListener('indicated', (e) => {
    document.getElementById('track').scrollTo({
      left: e.detail.index * 300,
      behavior: 'smooth'
    });
  });
</script>
```

Onboarding stepper:

```html
<div class="onboarding">
  <div id="step-content">Welcome to Step 1</div>
  <mosaik-indicator
    id="stepper"
    total="5"
    selected="0"
    variant="primary"
    orientation="horizontal">
  </mosaik-indicator>
</div>

<script>
  const stepper = document.getElementById('stepper');
  stepper.addEventListener('indicated', (e) => {
    loadStep(e.detail.index);
  });
</script>
```

Vertical progress indicator:

```html
<mosaik-indicator
  total="6"
  selected="2"
  orientation="vertical"
  variant="success">
</mosaik-indicator>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `indicated`    |               | readonly  | `IEventEmitter<IIndicatedEventDetail>`       | Called when the indicated value changes.<br />Provides reference to `any` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `selected`     | `selected`    |           | `number`                                     | Gets or sets the `selected` indicator.           |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `total`        | `total`       |           | `number`                                     | Gets or sets the `total` count of indicators.    |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `indicated`    | `IndicatedEvent`       | Fired when user clicks an indicator, includes selected index |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `list`     | The container list element for all indicator items |
| `listItem` | Individual indicator dot/marker element          |

## CSS Custom Properties

| Property                          | Type   | Description                             |
|-----------------------------------|--------|-----------------------------------------|
| `--indicator-background-color`    | String | Background color of inactive indicators |
| `--indicator-border-color`        | String | Border color of indicators              |
| `--indicator-border-radius`       | String | Border radius of indicator dots         |
| `--indicator-border-style`        | String | Border style (solid, dashed, etc.)      |
| `--indicator-border-width`        | String | Border width of indicators              |
| `--indicator-font-family`         | String | Font family for indicator text (if any) |
| `--indicator-font-size`           | String | Font size for indicator numbers         |
| `--indicator-font-weight`         | String | Font weight for indicator text          |
| `--indicator-foreground-color`    | String | Color of active/text indicators         |
| `--indicator-gap`                 | String | Spacing between individual indicators   |
| `--indicator-shadow`              | String | Shadow applied to indicator dots        |
| `--indicator-transition-duration` | String | Duration of state change animations     |
| `--indicator-transition-mode`     | String | Timing function for transitions         |
| `--indicator-transition-property` | String | CSS properties to animate               |

# mosaik-ink-bar

InkBar - An animated indicator bar that highlights active tabs or navigation items.

**Mixins:** Themeable, Variantable, Appearanceable, Disableable

## Examples

Basic ink bar with tab group:

```html
<div class="tab-group">
  <button id="tab1" class="tab active">Tab 1</button>
  <button id="tab2" class="tab">Tab 2</button>
  <button id="tab3" class="tab">Tab 3</button>
  <mosaik-ink-bar id="inkBar" position="bottom"></mosaik-ink-bar>
</div>

<script>
  const inkBar = document.getElementById('inkBar');
  const activeTab = document.querySelector('.tab.active');
  inkBar.target = activeTab;

  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      inkBar.target = tab;
    });
  });
</script>
```

Vertical navigation with left-side indicator:

```html
<nav class="vertical-nav">
  <a href="#home" class="nav-item active">Home</a>
  <a href="#about" class="nav-item">About</a>
  <a href="#contact" class="nav-item">Contact</a>
  <mosaik-ink-bar position="left" variant="primary"></mosaik-ink-bar>
</nav>
```

Programmatic alignment:

```html
<div id="container">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <mosaik-ink-bar id="bar"></mosaik-ink-bar>
</div>

<script>
  const bar = document.getElementById('bar');
  bar.target = document.getElementById('item1');

  // Later, move to item2
  setTimeout(() => {
    bar.target = document.getElementById('item2');
  }, 2000);
</script>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `position`     | `position`   |           | `InkBarPosition`                             | Gets or sets the `position` property.            |
| `target`       |              |           | `HTMLElement \| null`                        | Gets or sets the `target` property.              |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `align`         | `(): void`                                       | Aligns the ink bar to the target element.        |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `stretchToward` | `(element: HTMLElement, amount?: number): void`  | Stretches the ink bar toward the given element, creating an<br />anticipation effect. The bar extends a fraction of the distance<br />toward the target while staying anchored at its current position.<br /><br />**element**: The element to stretch toward.<br />**amount**: How far to stretch (0–1). Defaults to 0.15 (15%). |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `ink-bar` | The animated indicator bar element (Note: template returns nothing, styling applied to host) |

## CSS Custom Properties

| Property                        | Type   | Description                                      |
|---------------------------------|--------|--------------------------------------------------|
| `--ink-bar-background-color`    | String | Background color of the indicator bar            |
| `--ink-bar-border-color`        | String | Border color of the indicator bar                |
| `--ink-bar-border-radius`       | String | Border radius for rounded corners                |
| `--ink-bar-foreground-color`    | String | Foreground color (if applicable)                 |
| `--ink-bar-thickness`           | String | Height (bottom/top) or width (left/right) of the bar |
| `--ink-bar-transition-duration` | String | Duration of the slide animation                  |
| `--ink-bar-transition-mode`     | String | Timing function for the animation                |
| `--ink-bar-transition-property` | Array  | CSS properties to animate                        |

# mosaik-jumbotron-header

JumbotronHeader - Primary heading text component for jumbotron hero sections.

**Mixins:** Themeable, TextFormattable

## Examples

Basic header via text attribute:

```html
<mosaik-jumbotron-header
  text="Welcome to Our Platform"
  alignment="center">
</mosaik-jumbotron-header>
```

Custom slotted content:

```html
<mosaik-jumbotron-header alignment="left">
  <h1>Custom <strong>Styled</strong> Header</h1>
</mosaik-jumbotron-header>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment` |           | `TextAlignment`                              | Gets or sets the `alignment` property.           |
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |             |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`      |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for custom header content (overrides text attribute) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description               |
|--------|---------------------------|
| `text` | The rendered text element |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--jumbotron-header-background-color`     | String | The header background color CSS custom property. |
| `--jumbotron-header-border-color`         | String | The header border color CSS custom property.     |
| `--jumbotron-header-font-family`          | String | The header font family CSS custom property.      |
| `--jumbotron-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--jumbotron-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--jumbotron-header-font-size`            | String | The header font size CSS custom property.        |
| `--jumbotron-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--jumbotron-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--jumbotron-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--jumbotron-header-foreground-color`     | String | The header foreground color CSS custom property. |
| `--jumbotron-header-gap`                  | String | The header gap CSS custom property.              |
| `--jumbotron-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--jumbotron-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--jumbotron-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--jumbotron-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--jumbotron-header-shadow`               | String | The header shadow CSS custom property.           |
| `--jumbotron-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--jumbotron-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--jumbotron-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--jumbotron-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--jumbotron-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--jumbotron-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--jumbotron-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--jumbotron-header-transition-property`  | String | The header transition property CSS custom property. |
| `--jumbotron-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-jumbotron-sub-header

JumbotronSubHeader - Secondary heading text component for supporting information in jumbotrons.

**Mixins:** Themeable, TextFormattable

## Examples

Basic subheader via text attribute:

```html
<mosaik-jumbotron-sub-header
  text="Build amazing experiences with ease"
  alignment="center">
</mosaik-jumbotron-sub-header>
```

Custom slotted content:

```html
<mosaik-jumbotron-sub-header alignment="right">
  <p>Your tagline or <em>motto</em> here</p>
</mosaik-jumbotron-sub-header>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment` |           | `TextAlignment`                              | Gets or sets the `alignment` property.           |
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |             |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`      |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for custom subheader content (overrides text attribute) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description               |
|--------|---------------------------|
| `text` | The rendered text element |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--jumbotron-sub-header-background-color`     | String | The sub header background color CSS custom property. |
| `--jumbotron-sub-header-border-color`         | String | The sub header border color CSS custom property. |
| `--jumbotron-sub-header-font-family`          | String | The sub header font family CSS custom property.  |
| `--jumbotron-sub-header-font-letter-spacing`  | String | The sub header font letter spacing CSS custom property. |
| `--jumbotron-sub-header-font-line-height`     | String | The sub header font line height CSS custom property. |
| `--jumbotron-sub-header-font-size`            | String | The sub header font size CSS custom property.    |
| `--jumbotron-sub-header-font-text-decoration` | String | The sub header font text decoration CSS custom property. |
| `--jumbotron-sub-header-font-text-transform`  | String | The sub header font text transform CSS custom property. |
| `--jumbotron-sub-header-font-weight`          | String | The sub header font weight CSS custom property.  |
| `--jumbotron-sub-header-foreground-color`     | String | The sub header foreground color CSS custom property. |
| `--jumbotron-sub-header-gap`                  | String | The sub header gap CSS custom property.          |
| `--jumbotron-sub-header-padding-bottom`       | String | The sub header padding bottom CSS custom property. |
| `--jumbotron-sub-header-padding-left`         | String | The sub header padding left CSS custom property. |
| `--jumbotron-sub-header-padding-right`        | String | The sub header padding right CSS custom property. |
| `--jumbotron-sub-header-padding-top`          | String | The sub header padding top CSS custom property.  |
| `--jumbotron-sub-header-shadow`               | String | The sub header shadow CSS custom property.       |
| `--jumbotron-sub-header-shadow-blur`          | String | The sub header shadow blur CSS custom property.  |
| `--jumbotron-sub-header-shadow-color`         | String | The sub header shadow color CSS custom property. |
| `--jumbotron-sub-header-shadow-offset-x`      | String | The sub header shadow offset x CSS custom property. |
| `--jumbotron-sub-header-shadow-offset-y`      | String | The sub header shadow offset y CSS custom property. |
| `--jumbotron-sub-header-shadow-spread`        | String | The sub header shadow spread CSS custom property. |
| `--jumbotron-sub-header-transition-duration`  | String | The sub header transition duration CSS custom property. |
| `--jumbotron-sub-header-transition-mode`      | String | The sub header transition mode CSS custom property. |
| `--jumbotron-sub-header-transition-property`  | String | The sub header transition property CSS custom property. |
| `--jumbotron-sub-header-translate`            | String | The sub header translate CSS custom property.    |

# mosaik-jumbotron

Jumbotron - A prominent hero section for showcasing key content with headers, subheaders, and call-to-action elements.

**Mixins:** Themeable, Appearanceable, TextFormattable

## Examples

Basic jumbotron with text attributes:

```html
<mosaik-jumbotron
  header="Welcome to Mosaik"
  sub-header="Build amazing web experiences"
  hint="Start creating beautiful, accessible components with our design system."
  alignment="center">
  <div slot="actions">
    <mosaik-button variant="primary">Get Started</mosaik-button>
    <mosaik-button appearance="outline">Learn More</mosaik-button>
  </div>
</mosaik-jumbotron>
```

Jumbotron with slotted custom content:

```html
<mosaik-jumbotron alignment="center" appearance="soft">
  <h1 slot="header">Custom Header</h1>
  <p slot="subHeader">With your own HTML</p>
  <div slot="hint">
    <p>Multiple paragraphs of description.</p>
    <p>Full control over content.</p>
  </div>
  <div slot="actions">
    <mosaik-button>Action 1</mosaik-button>
    <mosaik-button>Action 2</mosaik-button>
  </div>
</mosaik-jumbotron>
```

Left-aligned jumbotron for feature announcement:

```html
<mosaik-jumbotron
  header="New Feature Released!"
  sub-header="Dark Mode Support"
  hint="Experience our components in a beautiful dark theme with automatic switching based on system preferences."
  alignment="left"
  appearance="outline">
  <div slot="actions">
    <mosaik-button variant="primary">Try It Now</mosaik-button>
  </div>
</mosaik-jumbotron>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment`  |           | `TextAlignment`                              | Gets or sets the `alignment` property.           |
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`       | `header`     |           | `string`                                     | Gets or sets the `header` property.              |
| `hint`         | `hint`       |           | `string`                                     | Gets or sets the `hint` property.                |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subHeader`    | `subHeader`  |           | `string`                                     | Gets or sets the `subHeader` property.           |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `actions`   | Action buttons or interactive elements           |
| `header`    | Main heading content (or use header attribute)   |
| `hint`      | Descriptive text or instructions (or use hint attribute) |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | Secondary heading content (or use subHeader attribute) |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | Container for action buttons                     |
| `divider` | Horizontal divider between header and hint sections |
| `header`  | Container for header and subheader content       |
| `hint`    | Container for hint/description text              |

## CSS Custom Properties

| Property                           | Type   | Description                                   |
|------------------------------------|--------|-----------------------------------------------|
| `--jumbotron-background-color`     | String | Background color of the jumbotron             |
| `--jumbotron-border-color`         | String | Border color                                  |
| `--jumbotron-border-radius`        | String | Border radius for rounded corners             |
| `--jumbotron-border-style`         | String | Border style                                  |
| `--jumbotron-border-width`         | String | Border width                                  |
| `--jumbotron-font-family`          | String | Font family for text                          |
| `--jumbotron-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--jumbotron-font-line-height`     | String | The font line height CSS custom property.     |
| `--jumbotron-font-size`            | String | Base font size                                |
| `--jumbotron-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--jumbotron-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--jumbotron-font-weight`          | String | Font weight                                   |
| `--jumbotron-foreground-color`     | String | Text color                                    |
| `--jumbotron-gap`                  | String | Spacing between sections                      |
| `--jumbotron-padding-bottom`       | String | Bottom padding                                |
| `--jumbotron-padding-left`         | String | Left padding                                  |
| `--jumbotron-padding-right`        | String | Right padding                                 |
| `--jumbotron-padding-top`          | String | Top padding                                   |
| `--jumbotron-shadow`               | String | Shadow effect                                 |
| `--jumbotron-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--jumbotron-shadow-color`         | String | The shadow color CSS custom property.         |
| `--jumbotron-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--jumbotron-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--jumbotron-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--jumbotron-transition-duration`  | String | Transition duration                           |
| `--jumbotron-transition-mode`      | String | Transition timing function                    |
| `--jumbotron-transition-property`  | String | Properties to transition                      |
| `--jumbotron-translate`            | String | The translate CSS custom property.            |

# mosaik-kbd-shortcut

KbdShortcutElement - Represents a user interface element for defining and executing keyboard shortcuts.

**Mixins:** Disableable

## Example

```html
<mosaik-kbd-shortcut id="copyShortcut"></mosaik-kbd-shortcut>
<script>
  document.querySelector('#copyShortcut').gesture = { key: 'c', modifiers: ['ctrl'] };
</script>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                             | Description                                      |
|----------------|------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `gesture`      | `gesture`  |           | `{ key: string; modifiers: ModifierKeys; } \| null` | Gets or sets the `gesture` property.             |
| `lang`         | `lang`     |           | `string`                                         | The lang property indicates the language of the element's content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-kbd

Kbd - Represents user input from a keyboard, typically used for keyboard shortcuts or key sequences.

**Mixins:** Themeable, Valueable, Variantable

## Examples

Keyboard shortcut using slotted text:

```html
<mosaik-kbd>Ctrl</mosaik-kbd> + <mosaik-kbd>C</mosaik-kbd>
```

Keyboard shortcut via value attribute:

```html
<mosaik-kbd value='["Control","S"]'></mosaik-kbd>
```

Styled keyboard key with variant:

```html
<mosaik-kbd variant="primary">Enter</mosaik-kbd>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`   |           | `string[]`                                   | Gets or sets the `value` property.               |
| `variant`      | `variant` |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method              | Type                                             | Description                                      |
|---------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`        | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`              | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getModifierSymbol` | `(key: string): string`                          |                                                  |
| `off`               | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`     | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `delimiter` | The delimiter part. |
| `kbd`       | The kbd part.       |

## CSS Custom Properties

| Property                     | Type   | Description                                   |
|------------------------------|--------|-----------------------------------------------|
| `--kbd-background-color`     | String | The background color CSS custom property.     |
| `--kbd-border-color`         | String | The border color CSS custom property.         |
| `--kbd-border-radius`        | String | The border radius CSS custom property.        |
| `--kbd-border-style`         | String | The border style CSS custom property.         |
| `--kbd-border-width`         | String | The border width CSS custom property.         |
| `--kbd-font-family`          | String | The font family CSS custom property.          |
| `--kbd-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--kbd-font-line-height`     | String | The font line height CSS custom property.     |
| `--kbd-font-size`            | String | The font size CSS custom property.            |
| `--kbd-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--kbd-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--kbd-font-weight`          | String | The font weight CSS custom property.          |
| `--kbd-foreground-color`     | String | The foreground color CSS custom property.     |
| `--kbd-gap`                  | String | The gap CSS custom property.                  |
| `--kbd-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--kbd-padding-left`         | String | The padding left CSS custom property.         |
| `--kbd-padding-right`        | String | The padding right CSS custom property.        |
| `--kbd-padding-top`          | String | The padding top CSS custom property.          |
| `--kbd-shadow`               | String | The shadow CSS custom property.               |
| `--kbd-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--kbd-shadow-color`         | String | The shadow color CSS custom property.         |
| `--kbd-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--kbd-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--kbd-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--kbd-transition-duration`  | String | The transition duration CSS custom property.  |
| `--kbd-transition-mode`      | String | The transition mode CSS custom property.      |
| `--kbd-transition-property`  | String | The transition property CSS custom property.  |
| `--kbd-translate`            | String | The translate CSS custom property.            |

# mosaik-light-chain

LightChain - A decorative animated string of lights effect for festive and ambient visual enhancement.

**Mixins:** Themeable, Disableable

## Examples

Basic light chain with default count (56 lights):

```html
<mosaik-light-chain></mosaik-light-chain>
```

Light chain with custom count:

```html
<mosaik-light-chain count="100"></mosaik-light-chain>
```

Light chain in different states:

```html
<mosaik-light-chain state="on"></mosaik-light-chain>
<mosaik-light-chain state="off"></mosaik-light-chain>
<mosaik-light-chain state="auto"></mosaik-light-chain>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `count`        | `count`    |           | `number`                                     | Gets or sets the `count` property.<br />The number of light bulbs to render in the chain.<br />The default value is 56. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `state`        | `state`    |           | `"auto" \| "on" \| "off"`                    | Gets or sets the `state` property.<br />Controls the operational state of the light chain: 'on' for continuous illumination,<br />'off' for static display, or 'auto' for automated animation cycles.<br />The default value is 'off'. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot (currently unused, lights are generated programmatically) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                                      |
|--------|--------------------------------------------------|
| `blub` | Individual light bulb element in the chain (repeated based on count) |
| `root` | The root container element wrapping the entire light chain |

## CSS Custom Properties

| Property                                         | Type   | Description                                    |
|--------------------------------------------------|--------|------------------------------------------------|
| `--light-chain-bulb-border-radius`               | String | The corner rounding for bulbs                  |
| `--light-chain-bulb-display`                     | String | The display mode for individual bulbs          |
| `--light-chain-bulb-first-animation-duration`    | String | The animation duration for first bulb          |
| `--light-chain-bulb-first-animation-iteration-count` | String | The animation repeat count for first bulb      |
| `--light-chain-bulb-first-animation-name`        | String | The animation keyframes for first bulb         |
| `--light-chain-bulb-first-animation-timing-function` | String | The easing for first bulb animation            |
| `--light-chain-bulb-first-background`            | String | The background color for first bulb pattern    |
| `--light-chain-bulb-first-box-shadow`            | String | The glow effect for first bulb pattern         |
| `--light-chain-bulb-height`                      | String | The height of each light bulb                  |
| `--light-chain-bulb-margin`                      | String | The spacing between bulbs                      |
| `--light-chain-bulb-position`                    | String | The positioning for individual bulbs           |
| `--light-chain-bulb-second-animation-duration`   | String | The animation duration for second bulb         |
| `--light-chain-bulb-second-animation-iteration-count` | String | The animation repeat count for second bulb     |
| `--light-chain-bulb-second-animation-name`       | String | The animation keyframes for second bulb        |
| `--light-chain-bulb-second-animation-timing-function` | String | The easing for second bulb animation           |
| `--light-chain-bulb-second-background`           | String | The background color for second bulb pattern   |
| `--light-chain-bulb-second-box-shadow`           | String | The glow effect for second bulb pattern        |
| `--light-chain-bulb-third-animation-duration`    | String | The animation duration for third bulb          |
| `--light-chain-bulb-third-animation-iteration-count` | String | The animation repeat count for third bulb      |
| `--light-chain-bulb-third-animation-name`        | String | The animation keyframes for third bulb         |
| `--light-chain-bulb-third-animation-timing-function` | String | The easing for third bulb animation            |
| `--light-chain-bulb-third-background`            | String | The background color for third bulb pattern    |
| `--light-chain-bulb-third-box-shadow`            | String | The glow effect for third bulb pattern         |
| `--light-chain-bulb-width`                       | String | The width of each light bulb                   |
| `--light-chain-display`                          | String | The display mode for the light chain container |
| `--light-chain-height`                           | String | The total height of the light chain            |
| `--light-chain-list-margin`                      | String | The margin for the bulb list                   |
| `--light-chain-list-padding`                     | String | The padding for the bulb list                  |
| `--light-chain-list-style`                       | String | The list style type for the bulb list          |
| `--light-chain-overflow`                         | String | The overflow behavior for the container        |
| `--light-chain-padding`                          | String | The inner spacing within the container         |
| `--light-chain-position`                         | String | The positioning context for the light chain    |
| `--light-chain-width`                            | String | The total width of the light chain             |

# mosaik-list-item-group

List Item Group - A container for grouping and organizing related list items with an optional header.

**Mixins:** Themeable, Stickable, Disableable

## Examples

Basic list item group with header:

```html
<mosaik-list-item-group header="Favorites">
  <mosaik-list-item>Item 1</mosaik-list-item>
  <mosaik-list-item>Item 2</mosaik-list-item>
  <mosaik-list-item>Item 3</mosaik-list-item>
</mosaik-list-item-group>
```

Sticky group header:

```html
<mosaik-list-item-group header="Recent" is-sticky>
  <mosaik-list-item>Recent item 1</mosaik-list-item>
  <mosaik-list-item>Recent item 2</mosaik-list-item>
</mosaik-list-item-group>
```

Group with custom header slot:

```html
<mosaik-list-item-group>
  <div slot="header">
    <mosaik-icon></mosaik-icon>
    <strong>Starred Items</strong>
  </div>
  <mosaik-list-item>Starred 1</mosaik-list-item>
  <mosaik-list-item>Starred 2</mosaik-list-item>
</mosaik-list-item-group>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`  |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `header`       | `header`    |           | `string`                                     | Gets or sets the `header` property.              |
| `isSticky`     | `is-sticky` |           | `boolean`                                    | The `isSticky` property indicates whether the element is sticky or not.<br />The default value is `false`, which means the element is not sticky. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot for list items (mosaik-list-item elements) |
| `header` | Custom header content (overrides the default header text) |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The header text element                          |
| `sticky` | The sticky wrapper element when isSticky is true |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--list-item-group-background-color`     | String | The background fill color                        |
| `--list-item-group-border-color`         | String | The border color                                 |
| `--list-item-group-border-radius`        | String | The corner rounding radius                       |
| `--list-item-group-border-style`         | String | The border line style                            |
| `--list-item-group-border-width`         | String | The border thickness                             |
| `--list-item-group-font-family`          | String | The font family for group text                   |
| `--list-item-group-font-letter-spacing`  | String | The item group font letter spacing CSS custom property. |
| `--list-item-group-font-line-height`     | String | The item group font line height CSS custom property. |
| `--list-item-group-font-size`            | String | The font size for group text                     |
| `--list-item-group-font-text-decoration` | String | The item group font text decoration CSS custom property. |
| `--list-item-group-font-text-transform`  | String | The item group font text transform CSS custom property. |
| `--list-item-group-font-weight`          | String | The font weight for group text                   |
| `--list-item-group-foreground-color`     | String | The text color                                   |
| `--list-item-group-gap`                  | String | The spacing between items                        |
| `--list-item-group-padding-bottom`       | String | The bottom padding inside the group              |
| `--list-item-group-padding-left`         | String | The left padding inside the group                |
| `--list-item-group-padding-right`        | String | The right padding inside the group               |
| `--list-item-group-padding-top`          | String | The top padding inside the group                 |
| `--list-item-group-shadow`               | String | The drop shadow or elevation effect              |
| `--list-item-group-shadow-blur`          | String | The item group shadow blur CSS custom property.  |
| `--list-item-group-shadow-color`         | String | The item group shadow color CSS custom property. |
| `--list-item-group-shadow-offset-x`      | String | The item group shadow offset x CSS custom property. |
| `--list-item-group-shadow-offset-y`      | String | The item group shadow offset y CSS custom property. |
| `--list-item-group-shadow-spread`        | String | The item group shadow spread CSS custom property. |
| `--list-item-group-transition-duration`  | String | The duration of transitions                      |
| `--list-item-group-transition-mode`      | String | The timing function for transitions              |
| `--list-item-group-transition-property`  | String | The CSS properties to transition                 |
| `--list-item-group-translate`            | String | The item group translate CSS custom property.    |

# mosaik-list-item

List Item - An interactive item within a list component supporting selection and various content layouts.

**Mixins:** Themeable, Rippleable, Disableable, Valueable, Variantable, Focusable

## Examples

Basic list item with text:

```html
<mosaik-list-item>Simple list item</mosaik-list-item>
```

List item with prefix icon and suffix badge:

```html
<mosaik-list-item>
  <mosaik-icon slot="prefix"></mosaik-icon>
  John Doe
  <mosaik-badge slot="suffix">5</mosaik-badge>
</mosaik-list-item>
```

Selectable list item with prefix slot and value:

```html
<mosaik-list-item value="user-123" variant="primary">
  <mosaik-icon slot="prefix"></mosaik-icon>
  <div>
    <div>John Doe</div>
    <small>john@example.com</small>
  </div>
</mosaik-list-item>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |              | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `index`        |              | readonly  | `number`                                     | Gets the index of the item.                      |
| `isChecked`    |              |           | `boolean`                                    | Gets or sets the `isChecked` property.           |
| `isFocused`    | `is-focused` |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isSelected`   | `isSelected` |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`       | `ripple`     |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `selected`     |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`              | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`                | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `deselected`   | `DeselectedEvent`      | Fired when the list item is deselected           |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the list item is selected             |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot for the main list item content  |
| `prefix` | Content displayed before the main content (e.g., avatar, icon) |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content displayed after the main content (e.g., badge, action button) |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `checkmark` | The selection checkmark indicator (visible in multiple selection mode) |
| `content`   | The main content container                       |
| `focusRing` | The focus indicator ring for keyboard navigation |
| `inner`     | The inner content wrapper                        |
| `prefix`    | The prefix content container                     |
| `ripple`    | The ripple part.                                 |
| `suffix`    | The suffix content container                     |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--list-item-background-color`          | String | The background fill color                        |
| `--list-item-border-color`              | String | The border color                                 |
| `--list-item-border-radius`             | String | The corner rounding radius                       |
| `--list-item-border-style`              | String | The border line style                            |
| `--list-item-border-width`              | String | The border thickness                             |
| `--list-item-focus-ring-active-width`   | String | The item focus ring active width CSS custom property. |
| `--list-item-focus-ring-color`          | String | The item focus ring color CSS custom property.   |
| `--list-item-focus-ring-inward-offset`  | String | The item focus ring inward offset CSS custom property. |
| `--list-item-focus-ring-outward-offset` | String | The item focus ring outward offset CSS custom property. |
| `--list-item-font-family`               | String | The font family for list item text               |
| `--list-item-font-letter-spacing`       | String | The letter spacing for list item text            |
| `--list-item-font-line-height`          | String | The line height for list item text               |
| `--list-item-font-size`                 | String | The font size for list item text                 |
| `--list-item-font-text-decoration`      | String | The text decoration style                        |
| `--list-item-font-text-transform`       | String | The text transformation style                    |
| `--list-item-font-weight`               | String | The font weight for list item text               |
| `--list-item-foreground-color`          | String | The text and icon color                          |
| `--list-item-gap`                       | String | The spacing between prefix, content, and suffix  |
| `--list-item-padding-bottom`            | String | The bottom padding inside the list item          |
| `--list-item-padding-left`              | String | The left padding inside the list item            |
| `--list-item-padding-right`             | String | The right padding inside the list item           |
| `--list-item-padding-top`               | String | The top padding inside the list item             |
| `--list-item-ripple-color`              | Color  | The item ripple color CSS custom property.       |
| `--list-item-ripple-duration`           | String | The item ripple duration CSS custom property.    |
| `--list-item-shadow`                    | String | The drop shadow or elevation effect              |
| `--list-item-shadow-blur`               | String | The item shadow blur CSS custom property.        |
| `--list-item-shadow-color`              | String | The item shadow color CSS custom property.       |
| `--list-item-shadow-offset-x`           | String | The item shadow offset x CSS custom property.    |
| `--list-item-shadow-offset-y`           | String | The item shadow offset y CSS custom property.    |
| `--list-item-shadow-spread`             | String | The item shadow spread CSS custom property.      |
| `--list-item-transition-duration`       | String | The duration of hover/focus transitions          |
| `--list-item-transition-mode`           | String | The timing function for transitions              |
| `--list-item-transition-property`       | String | The CSS properties to transition                 |
| `--list-item-translate`                 | String | The item translate CSS custom property.          |

# mosaik-list

List - A versatile container component for displaying collections of interactive items in organized layouts.

Presents ordered or unordered collections of related content items with support for selection,
filtering, grouping, and navigation. Optimized for accessibility and keyboard interaction
with flexible styling options for various content types.

**Mixins:** Themeable, Disableable, Filterable, Orientable, Insetable

## Example

```html
<!-- Simple navigation list -->
<mosaik-list>
  <mosaik-list-item value="dashboard">
    <mosaik-icon slot="prefix"></mosaik-icon>
    Dashboard
  </mosaik-list-item>
  <mosaik-list-item value="analytics">
    <mosaik-icon slot="prefix"></mosaik-icon>
    Analytics
  </mosaik-list-item>
  <mosaik-list-item value="settings">
    <mosaik-icon slot="prefix"></mosaik-icon>
    Settings
  </mosaik-list-item>
</mosaik-list>

<!-- Multi-select list with filter -->
<mosaik-list selection-mode="multiple" show-filter>
  <mosaik-list-item-group header="Favorites">
    <mosaik-list-item value="john">
      John Smith
      <mosaik-text slot="suffix">john@example.com</mosaik-text>
    </mosaik-list-item>
  </mosaik-list-item-group>
  <mosaik-list-item-group header="Colleagues">
    <mosaik-list-item value="jane">Jane Doe</mosaik-list-item>
    <mosaik-list-item value="mike">Mike Johnson</mosaik-list-item>
  </mosaik-list-item-group>
</mosaik-list>

<!-- Action list with suffix descriptions -->
<mosaik-list>
  <mosaik-list-item value="export">
    <mosaik-icon slot="prefix"></mosaik-icon>
    Export Data
    <mosaik-text slot="suffix" variant="caption">Download your data as CSV</mosaik-text>
  </mosaik-list-item>
  <mosaik-list-item value="import">
    <mosaik-icon slot="prefix"></mosaik-icon>
    Import Data
    <mosaik-text slot="suffix" variant="caption">Upload data from file</mosaik-text>
  </mosaik-list-item>
</mosaik-list>
```

## Properties

| Property            | Attribute            | Modifiers | Type                                             | Description                                      |
|---------------------|----------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `changed`           |                      | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                      | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`           |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                      | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `filter`            |                      |           | `string`                                         | Gets or sets the `filter` property.<br />The default value is an empty string, which means no filter is applied. |
| `filterMemberPath`  | `filter-member-path` |           | `string`                                         | Gets or sets the `filterMemberPath` property.<br />The member path is a dot-separated string that specifies the property to filter by.<br />The default value is an empty string, which means no specific member path is used for filtering. |
| `filterPlaceholder` |                      |           | `string`                                         | Gets or sets the `filterPlaceholder` property.<br />The default value is an empty string, which means no placeholder is shown in the filter input. |
| `inset`             | `inset`              |           | `Inset \| Inset[] \| null`                       | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `intl`              |                      | readonly  | `ListElementIntl`                                | Returns the `intl` property.                     |
| `items`             |                      | readonly  | `ListItemElement[]`                              | Gets all the list items in the list.             |
| `itemsChanged`      |                      | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `lang`              | `lang`               |           | `string`                                         | The lang property indicates the language of the element's content. |
| `orientation`       | `orientation`        |           | `Orientation`                                    | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `selectedItem`      |                      |           | `TItem \| null`                                  | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectionChanged`  |                      | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `selectionMode`     | `selectionMode`      |           | `SelectionMode`                                  | Gets or sets the `selectionMode` property.       |
| `showFilter`        | `show-filter`        |           | `boolean`                                        | Gets or sets the `showFilter` property.<br />The default value is `false`, which means the filter input is not shown. |
| `themeName`         |                      |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`              |           | `string \| null`                                 | Gets or sets the `value` property.               |

## Methods

| Method           | Type                                             | Description                                      |
|------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`     | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`       | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`           | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`            | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`             | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`  | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetSelection` | `(): void`                                       | Resets the current selection.                    |
| `select`         | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`    | `(): void`                                       | Select the first item.                           |
| `selectLast`     | `(): void`                                       | Select the last item.                            |
| `selectNext`     | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious` | `(): void`                                       | Select the previous item before current selected item/index. |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Fired when any property changes                  |
| `connected`        | `ConnectedEvent`        | Fired when the element is connected to the DOM   |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `itemsChanged`     | `ItemsChangedEvent`     | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged` | `SelectionChangedEvent` | Fired when the selected item changes, providing both old and new selected items |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default content area for list items and groups   |
| `empty`  | Empty state content when no items are available  |
| `filter` | Filter controls and search functionality area    |
| `footer` | Footer content below the list items              |
| `header` | Header content above the list items              |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                  |
|----------|------------------------------|
| `empty`  | Empty state container        |
| `filter` | Filter controls container    |
| `items`  | Container for all list items |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--list-background-color`     | String | The background color CSS custom property.     |
| `--list-border-color`         | String | The border color CSS custom property.         |
| `--list-border-radius`        | String | Border radius for list styling                |
| `--list-border-style`         | String | The border style CSS custom property.         |
| `--list-border-width`         | String | The border width CSS custom property.         |
| `--list-font-family`          | String | The font family CSS custom property.          |
| `--list-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--list-font-line-height`     | String | The font line height CSS custom property.     |
| `--list-font-size`            | String | The font size CSS custom property.            |
| `--list-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--list-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--list-font-weight`          | String | The font weight CSS custom property.          |
| `--list-foreground-color`     | String | The foreground color CSS custom property.     |
| `--list-gap`                  | String | The gap CSS custom property.                  |
| `--list-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--list-padding-left`         | String | The padding left CSS custom property.         |
| `--list-padding-right`        | String | The padding right CSS custom property.        |
| `--list-padding-top`          | String | The padding top CSS custom property.          |
| `--list-shadow`               | String | The shadow CSS custom property.               |
| `--list-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--list-shadow-color`         | String | The shadow color CSS custom property.         |
| `--list-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--list-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--list-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--list-transition-duration`  | String | The transition duration CSS custom property.  |
| `--list-transition-mode`      | String | The transition mode CSS custom property.      |
| `--list-transition-property`  | String | The transition property CSS custom property.  |
| `--list-translate`            | String | The translate CSS custom property.            |

# mosaik-listing-item-marker

ListingItemMarker - A standalone marker element with a round badge-like appearance.

**Mixins:** Themeable, Appearanceable, Variantable, Sizeable, Disableable

## Examples

Ordered marker (number):

```html
<mosaik-listing-item-marker type="ordered" index="1"></mosaik-listing-item-marker>
```

Unordered marker (bullet):

```html
<mosaik-listing-item-marker type="unordered" bullet-type="disc"></mosaik-listing-item-marker>
```

Styled marker with variant:

```html
<mosaik-listing-item-marker type="ordered" index="3" variant="primary" appearance="solid"></mosaik-listing-item-marker>
```

## Properties

| Property        | Attribute        | Modifiers | Type                                         | Description                                      |
|-----------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`     |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `bulletType`    | `bullet-type`    |           | `ListBulletType`                             | Gets or sets the bullet type used when `type` is `'unordered'`.<br />The default value is `'disc'`. |
| `changed`       |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `index`         | `index`          |           | `number`                                     | Gets or sets the ordinal index (1-based) of the marker.<br />Only relevant when `type` is `'ordered'`.<br />The default value is `1`. |
| `lang`          | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `numberingType` | `numbering-type` |           | `ListNumberingType`                          | Gets or sets the numbering type used when `type` is `'ordered'`.<br />The default value is `'1'` (decimal). |
| `size`          | `size`           |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`     |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`          | `type`           |           | `ListType`                                   | Gets or sets the type of listing this marker represents.<br />The default value is `'unordered'`. |
| `variant`       | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method           | Type                                             | Description                                      |
|------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`     | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`           | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `formatIndex`    | `(): string`                                     | Formats the index according to the current `numberingType`. |
| `getBulletGlyph` | `(): string`                                     | Returns the bullet glyph corresponding to the current `bulletType`. |
| `off`            | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`             | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`  | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part  | Description   |
|-------|---------------|
| `pip` | The pip part. |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--listing-item-marker-background-color`     | String | The background color of the marker.              |
| `--listing-item-marker-border-color`         | String | The border color of the marker.                  |
| `--listing-item-marker-border-radius`        | String | The border radius (always `50%` by default).     |
| `--listing-item-marker-border-style`         | String | The border style.                                |
| `--listing-item-marker-border-width`         | String | The border width.                                |
| `--listing-item-marker-font-family`          | String | The font family for the marker label.            |
| `--listing-item-marker-font-letter-spacing`  | String | The letter spacing for the marker label.         |
| `--listing-item-marker-font-line-height`     | String | The line height for the marker label.            |
| `--listing-item-marker-font-size`            | String | The font size for the marker label.              |
| `--listing-item-marker-font-text-decoration` | String | The item marker font text decoration CSS custom property. |
| `--listing-item-marker-font-text-transform`  | String | The item marker font text transform CSS custom property. |
| `--listing-item-marker-font-weight`          | String | The font weight for the marker label.            |
| `--listing-item-marker-foreground-color`     | String | The text color of the marker.                    |
| `--listing-item-marker-gap`                  | String | The gap inside the marker.                       |
| `--listing-item-marker-height`               | String | The height of the marker.                        |
| `--listing-item-marker-padding-bottom`       | String | The bottom padding inside the marker.            |
| `--listing-item-marker-padding-left`         | String | The left padding inside the marker.              |
| `--listing-item-marker-padding-right`        | String | The right padding inside the marker.             |
| `--listing-item-marker-padding-top`          | String | The top padding inside the marker.               |
| `--listing-item-marker-shadow`               | String | The item marker shadow CSS custom property.      |
| `--listing-item-marker-shadow-blur`          | String | The item marker shadow blur CSS custom property. |
| `--listing-item-marker-shadow-color`         | String | The item marker shadow color CSS custom property. |
| `--listing-item-marker-shadow-offset-x`      | String | The item marker shadow offset x CSS custom property. |
| `--listing-item-marker-shadow-offset-y`      | String | The item marker shadow offset y CSS custom property. |
| `--listing-item-marker-shadow-spread`        | String | The item marker shadow spread CSS custom property. |
| `--listing-item-marker-transition-duration`  | String | The transition duration.                         |
| `--listing-item-marker-transition-mode`      | String | The transition timing function.                  |
| `--listing-item-marker-transition-property`  | String | The transition properties.                       |
| `--listing-item-marker-translate`            | String | The item marker translate CSS custom property.   |

# mosaik-listing-item

ListingItem - A list item component for use inside a `<mosaik-listing>`.

**Mixins:** Themeable, TextFormattable, Appearanceable, Variantable, Sizeable, Disableable

## Examples

Basic listing item inside an ordered listing:

```html
<mosaik-listing type="ordered">
  <mosaik-listing-item>First item</mosaik-listing-item>
  <mosaik-listing-item>Second item</mosaik-listing-item>
</mosaik-listing>
```

Listing item with custom ordinal value:

```html
<mosaik-listing type="ordered">
  <mosaik-listing-item value="5">Starts at five</mosaik-listing-item>
  <mosaik-listing-item>Continues at six</mosaik-listing-item>
</mosaik-listing>
```

## Properties

| Property            | Attribute    | Modifiers | Type                                         | Description                                      |
|---------------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`           |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`           | `content`    |           | `string`                                     | Gets or sets the `content` property.<br />The default value is an empty string, which means no content text is displayed. |
| `dir`               | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`         |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`            | `header`     |           | `string`                                     | Gets or sets the `header` property.<br />The default value is an empty string, which means no header is displayed. |
| `lang`              | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `listBulletType`    |              | readonly  | `ListBulletType`                             | Gets the inherited bullet type from the parent listing. |
| `listNumberingType` |              | readonly  | `ListNumberingType`                          | Gets the inherited numbering type from the parent listing. |
| `listType`          |              | readonly  | `ListType`                                   | Gets the inherited list type from the parent listing. |
| `size`              | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`         |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`      |           | `number \| null`                             | Gets or sets the ordinal value of this list item.<br />When set, overrides the auto-calculated index.<br />The default value is `null` (auto-numbered). |
| `variant`           | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resolveIndex`  | `(): number`                                     | Computes the resolved index of this item within its parent listing.<br />Takes into account `value` overrides, `start`, and `reversed` props. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default slot for list item content.              |
| `marker` | Slot for a custom marker element. Defaults to an auto-configured `<mosaik-listing-item-marker>`. |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                    |
|----------------|--------------------------------|
| `content`      | The content wrapper.           |
| `content-text` | The content text element.      |
| `header`       | The header text element.       |
| `item`         | The outer list item container. |
| `marker`       | The default marker element.    |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--listing-item-background-color`     | String | The background color of the list item.           |
| `--listing-item-font-family`          | String | The font family for list item content.           |
| `--listing-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--listing-item-font-line-height`     | String | The line height for list item content.           |
| `--listing-item-font-size`            | String | The font size for list item content.             |
| `--listing-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--listing-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--listing-item-font-weight`          | String | The font weight for list item content.           |
| `--listing-item-foreground-color`     | String | The text color of the list item.                 |
| `--listing-item-gap`                  | String | The gap between marker and content.              |
| `--listing-item-padding-bottom`       | String | The bottom padding inside the list item.         |
| `--listing-item-padding-left`         | String | The left padding inside the list item.           |
| `--listing-item-padding-right`        | String | The right padding inside the list item.          |
| `--listing-item-padding-top`          | String | The top padding inside the list item.            |
| `--listing-item-shadow`               | String | The item shadow CSS custom property.             |
| `--listing-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--listing-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--listing-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--listing-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--listing-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--listing-item-transition-duration`  | String | The duration of transition animations.           |
| `--listing-item-transition-mode`      | String | The timing function for transition animations.   |
| `--listing-item-transition-property`  | String | The CSS properties to animate during transitions. |
| `--listing-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-listing

Listing - A unified list component supporting both ordered and unordered display modes.

**Mixins:** Themeable, Appearanceable, Variantable, Sizeable, Disableable

## Examples

Ordered listing:

```html
<mosaik-listing type="ordered">
  <mosaik-listing-item>First item</mosaik-listing-item>
  <mosaik-listing-item>Second item</mosaik-listing-item>
  <mosaik-listing-item>Third item</mosaik-listing-item>
</mosaik-listing>
```

Unordered listing with variant:

```html
<mosaik-listing type="unordered" variant="primary" appearance="soft">
  <mosaik-listing-item>Milk</mosaik-listing-item>
  <mosaik-listing-item>Eggs</mosaik-listing-item>
  <mosaik-listing-item>Bread</mosaik-listing-item>
</mosaik-listing>
```

## Properties

| Property        | Attribute        | Modifiers | Type                                         | Description                                      |
|-----------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`     |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `bulletType`    | `bullet-type`    |           | `ListBulletType`                             | Gets or sets the bullet type for unordered listings.<br />The default value is `'disc'`. |
| `changed`       |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`          | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `numberingType` | `numbering-type` |           | `ListNumberingType`                          | Gets or sets the numbering type for ordered listings.<br />The default value is `'1'` (decimal). |
| `reversed`      | `reversed`       |           | `boolean`                                    | Gets or sets whether the ordering is reversed.<br />Only meaningful when `type` is `'ordered'`.<br />The default value is `false`. |
| `size`          | `size`           |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `start`         | `start`          |           | `number \| null`                             | Gets or sets the starting number for ordered listings.<br />The default value is `null` (starts at 1). |
| `themeName`     |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`          | `type`           |           | `ListType`                                   | Gets or sets the type of listing (ordered or unordered).<br />The default value is `'unordered'`. |
| `variant`       | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for `<mosaik-listing-item>` children. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                       |
|--------|-----------------------------------|
| `list` | The inner list container element. |

## CSS Custom Properties

| Property                         | Type   | Description                                      |
|----------------------------------|--------|--------------------------------------------------|
| `--listing-background-color`     | String | The background color of the list container.      |
| `--listing-font-family`          | String | The font family for list content.                |
| `--listing-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--listing-font-line-height`     | String | The line height for list content.                |
| `--listing-font-size`            | String | The font size for list content.                  |
| `--listing-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--listing-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--listing-font-weight`          | String | The font weight for list content.                |
| `--listing-foreground-color`     | String | The text color of the list.                      |
| `--listing-gap`                  | String | The spacing between list items.                  |
| `--listing-padding-bottom`       | String | The bottom padding inside the list.              |
| `--listing-padding-left`         | String | The left padding inside the list.                |
| `--listing-padding-right`        | String | The right padding inside the list.               |
| `--listing-padding-top`          | String | The top padding inside the list.                 |
| `--listing-shadow`               | String | The shadow CSS custom property.                  |
| `--listing-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--listing-shadow-color`         | String | The shadow color CSS custom property.            |
| `--listing-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--listing-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--listing-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--listing-transition-duration`  | String | The duration of transition animations.           |
| `--listing-transition-mode`      | String | The timing function for transition animations.   |
| `--listing-transition-property`  | String | The CSS properties to animate during transitions. |
| `--listing-translate`            | String | The translate CSS custom property.               |

# mosaik-map

Map - A map element that can display a location using multiple providers.

**Mixins:** Themeable, Dimensionable, Disableable

## Example

```html
<!-- Basic map (configure latitude, longitude, zoom via JavaScript) -->
<mosaik-map></mosaik-map>

<!-- Disabled map -->
<mosaik-map disabled></mosaik-map>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `height`       | `height`   |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `label`        |            |           | `string`                                     | Optional label/aria description.                 |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `latitude`     |            |           | `number`                                     | Latitude in WGS84 (-90..90).                     |
| `longitude`    |            |           | `number`                                     | Longitude in WGS84 (-180..180).                  |
| `provider`     |            |           | `MapProvider`                                | Provider type. Supports 'auto' \| 'google' \| 'openstreetmap' \| 'osm' \| 'bing'.<br />When 'auto', defaults to 'openstreetmap'. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`        | `width`    |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |
| `zoom`         |            |           | `number`                                     | Zoom level (typical range 1..20).                |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getEmbedUrl`   | `(): string`                                     | Returns an embeddable URL for the current provider and coordinates. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part  | Description   |
|-------|---------------|
| `map` | The map part. |

## CSS Custom Properties

| Property                     | Type   | Description                                   |
|------------------------------|--------|-----------------------------------------------|
| `--map-font-family`          | String | The font family CSS custom property.          |
| `--map-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--map-font-line-height`     | String | The font line height CSS custom property.     |
| `--map-font-size`            | String | The font size CSS custom property.            |
| `--map-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--map-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--map-font-weight`          | String | The font weight CSS custom property.          |
| `--map-gap`                  | String | The gap CSS custom property.                  |
| `--map-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--map-padding-left`         | String | The padding left CSS custom property.         |
| `--map-padding-right`        | String | The padding right CSS custom property.        |
| `--map-padding-top`          | String | The padding top CSS custom property.          |
| `--map-shadow`               | String | The shadow CSS custom property.               |
| `--map-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--map-shadow-color`         | String | The shadow color CSS custom property.         |
| `--map-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--map-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--map-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--map-transition-duration`  | String | The transition duration CSS custom property.  |
| `--map-transition-mode`      | String | The transition mode CSS custom property.      |
| `--map-transition-property`  | String | The transition property CSS custom property.  |
| `--map-translate`            | String | The translate CSS custom property.            |

# mosaik-marker

Marker - A standalone marker element with a round badge-like appearance.

**Mixins:** Themeable, Appearanceable, Variantable, Sizeable, Disableable

## Examples

Ordered marker (number):

```html
<mosaik-marker type="ordered" index="1"></mosaik-marker>
```

Unordered marker (bullet):

```html
<mosaik-marker type="unordered" bullet-type="disc"></mosaik-marker>
```

Styled marker with variant:

```html
<mosaik-marker type="ordered" index="3" variant="primary" appearance="solid"></mosaik-marker>
```

## Properties

| Property        | Attribute        | Modifiers | Type                                         | Description                                      |
|-----------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`     |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `bulletType`    | `bullet-type`    |           | `ListBulletType`                             | Gets or sets the bullet type used when `type` is `'unordered'`.<br />The default value is `'disc'`. |
| `changed`       |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`            |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disabled`      | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `index`         | `index`          |           | `number`                                     | Gets or sets the ordinal index (1-based) of the marker.<br />Only relevant when `type` is `'ordered'`.<br />The default value is `1`. |
| `lang`          | `lang`           |           | `string`                                     | Gets or sets the `lang` property.                |
| `numberingType` | `numbering-type` |           | `ListNumberingType`                          | Gets or sets the numbering type used when `type` is `'ordered'`.<br />The default value is `'1'` (decimal). |
| `size`          | `size`           |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`     |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`          | `type`           |           | `ListType`                                   | Gets or sets the type of listing this marker represents.<br />The default value is `'unordered'`. |
| `variant`       | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method           | Type                                             | Description                                      |
|------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`     | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`           | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `formatIndex`    | `(): string`                                     | Formats the index according to the current `numberingType`. |
| `getBulletGlyph` | `(): string`                                     | Returns the bullet glyph corresponding to the current `bulletType`. |
| `off`            | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`             | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`  | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `dynamic` | Parts are defined by concrete component implementations |
| `label`   | The text content of the marker (number, letter, or bullet). |

## CSS Custom Properties

| Property                       | Type   | Description                                  |
|--------------------------------|--------|----------------------------------------------|
| `--marker-background-color`    | String | The background color of the marker.          |
| `--marker-border-color`        | String | The border color of the marker.              |
| `--marker-border-radius`       | String | The border radius (always `50%` by default). |
| `--marker-border-style`        | String | The border style.                            |
| `--marker-border-width`        | String | The border width.                            |
| `--marker-font-family`         | String | The font family for the marker label.        |
| `--marker-font-letter-spacing` | String | The letter spacing for the marker label.     |
| `--marker-font-line-height`    | String | The line height for the marker label.        |
| `--marker-font-size`           | String | The font size for the marker label.          |
| `--marker-font-weight`         | String | The font weight for the marker label.        |
| `--marker-foreground-color`    | String | The text color of the marker.                |
| `--marker-gap`                 | String | The gap inside the marker.                   |
| `--marker-height`              | String | The height of the marker.                    |
| `--marker-padding-bottom`      | String | The bottom padding inside the marker.        |
| `--marker-padding-left`        | String | The left padding inside the marker.          |
| `--marker-padding-right`       | String | The right padding inside the marker.         |
| `--marker-padding-top`         | String | The top padding inside the marker.           |
| `--marker-transition-duration` | String | The transition duration.                     |
| `--marker-transition-mode`     | String | The transition timing function.              |
| `--marker-transition-property` | String | The transition properties.                   |

# mosaik-marquee

Marquee - A component for scrolling text or images horizontally or vertically.

**Mixins:** Themeable, Reversible, Orientable, Slottable

## Example

```html
<mosaik-marquee orientation="horizontal">
  <div>Scrolling text or images</div>
</mosaik-marquee>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`      | `reverse`     |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `speed`        | `speed`       |           | `CssTime`                                    | Gets or sets the `speed` property.               |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `overlay` | The overlay part. |
| `track`   | The track part.   |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--marquee-direction`            | String | The direction CSS custom property.            |
| `--marquee-font-family`          | String | The font family CSS custom property.          |
| `--marquee-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--marquee-font-line-height`     | String | The font line height CSS custom property.     |
| `--marquee-font-size`            | String | The font size CSS custom property.            |
| `--marquee-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--marquee-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--marquee-font-weight`          | String | The font weight CSS custom property.          |
| `--marquee-gap`                  | String | The gap CSS custom property.                  |
| `--marquee-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--marquee-padding-left`         | String | The padding left CSS custom property.         |
| `--marquee-padding-right`        | String | The padding right CSS custom property.        |
| `--marquee-padding-top`          | String | The padding top CSS custom property.          |
| `--marquee-shadow`               | String | The shadow CSS custom property.               |
| `--marquee-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--marquee-shadow-color`         | String | The shadow color CSS custom property.         |
| `--marquee-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--marquee-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--marquee-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--marquee-speed`                | String | The speed CSS custom property.                |
| `--marquee-transition-duration`  | String | The transition duration CSS custom property.  |
| `--marquee-transition-mode`      | String | The transition mode CSS custom property.      |
| `--marquee-transition-property`  | String | The transition property CSS custom property.  |
| `--marquee-translate`            | String | The translate CSS custom property.            |

# mosaik-masonry

Masonry - A dynamic grid layout system that arranges elements of varying heights in optimal vertical columns.

**Mixins:** Themeable, Fitable, Gapable

## Examples

```html
<mosaik-masonry gap="16px">
  <div>Short content</div>
  <div>Much longer content that spans multiple lines and creates different heights</div>
  <div>Medium content</div>
  <div>Another short item</div>
</mosaik-masonry>
```

```html
<mosaik-masonry gap="20px">
  <mosaik-card>Card 1</mosaik-card>
  <mosaik-card>Card 2 with more content</mosaik-card>
  <mosaik-card>Card 3</mosaik-card>
</mosaik-masonry>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columns`      |           |           | `number`                                     | Gets or sets the `columns` property.             |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`          | `fit`     |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `gap`          | `gap`     |           | `Size \| CssNumber`                          | The `gap` represents the space between the child elements.<br />The default value is `0`, which means no gap is applied. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for elements to be arranged in masonry layout. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property            | Type   | Description                                |
|---------------------|--------|--------------------------------------------|
| `--masonry-columns` | String | The number of columns in the masonry grid. |
| `--masonry-gap`     | String | The gap between masonry items.             |

# mosaik-menu-item-group

Menu Item Group - A container for organizing related menu items into labeled sections within a menu.

**Mixins:** Themeable, Orientable, Rippleable, Disableable, Valueable, Variantable, Appearanceable, Focusable, Slottable, Labelable

## Examples

Basic menu item group (header set via JavaScript):

```html
<mosaik-menu-item-group id="fileGroup">
  <mosaik-menu-item>New</mosaik-menu-item>
  <mosaik-menu-item>Open</mosaik-menu-item>
  <mosaik-menu-item>Save</mosaik-menu-item>
</mosaik-menu-item-group>
<script>
  document.getElementById('fileGroup').header = 'File Operations';
</script>
```

Horizontal menu group with text-overflow:

```html
<mosaik-menu-item-group orientation="horizontal" text-overflow="ellipsis">
  <mosaik-menu-item>Edit</mosaik-menu-item>
  <mosaik-menu-item>Delete</mosaik-menu-item>
</mosaik-menu-item-group>
```

Group with custom header slot:

```html
<mosaik-menu-item-group>
  <div slot="header">
    <mosaik-icon></mosaik-icon>
    <strong>Settings</strong>
  </div>
  <mosaik-menu-item>Preferences</mosaik-menu-item>
  <mosaik-menu-item>Privacy</mosaik-menu-item>
</mosaik-menu-item-group>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `activated`    |                | readonly  | `IEventEmitter<IEventDetail>`                | Called when the element is activated.<br />Provides reference to `IEventDetail` as event detail. |
| `appearance`   | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasChildren`  | `hasChildren`  |           | `boolean`                                    | The `hasChildren` property represents whether the element has children or not. |
| `header`       |                |           | `string`                                     | Gets or sets the `header` property.              |
| `icon`         |                |           | `string`                                     | Gets or sets the `icon` property.                |
| `isActive`     | `isActive`     |           | `boolean`                                    | Gets or sets the `isActive` property.            |
| `isChecked`    | `isChecked`    |           | `boolean`                                    | Gets or sets the `isChecked` property.           |
| `isExpanded`   | `isExpanded`   |           | `boolean`                                    | Gets or sets the `isExpanded` property.          |
| `isFocused`    | `is-focused`   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`        |                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `menuMode`     | `menuMode`     |           | `SubMenuMode`                                | Determines how child menus are displayed.        |
| `orientation`  | `orientation`  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `ripple`       | `ripple`       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `subLabel`     | `subLabel`     |           | `string`                                     | Gets or sets the `subLabel` property.            |
| `textOverflow` | `textOverflow` |           | `TextOverflow`                               | Gets or sets the `textOverflow` property.        |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `collapse`              | `(): void`                                       | Collapses the menu item.                         |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`                | `(): void`                                       | Expands the menu item.                           |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`                | `(): void`                                       | Toggles the expanded state of the menu item.     |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `activated`    | `ActivatedEvent`       | Fired when the menu item is clicked or activated |
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
|            | The default slot for menu items (mosaik-menu-item elements) |
| `end`      | Content displayed at the end (after label)       |
| `header`   | Custom header content (overrides the default header text) |
| `icon`     | The icon displayed for this menu item            |
| `label`    | The primary label text                           |
| `start`    | Content displayed at the start (before icon)     |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `subLabel` | Secondary descriptive text below the label       |

## CSS Shadow Parts

| Part                | Description                                      |
|---------------------|--------------------------------------------------|
| `caret`             | The expand/collapse indicator icon for items with children |
| `checkmark`         | The selection checkmark indicator when isChecked is true |
| `expandable`        | The expandable container for inline mode         |
| `focusRing`         | The focus indicator ring for keyboard navigation |
| `header`            | The header text element                          |
| `items`             | The menu items container stack                   |
| `popover`           | The floating popover container for submenu       |
| `portal`            | The portal element for popover projection        |
| `projection`        | The projection target for popover mode           |
| `ripple`            | The ripple effect container for interaction feedback |
| `root`              | The root menu item container                     |
| `submenu`           | The submenu content wrapper                      |
| `submenu-container` | Hidden container for submenu content (used in popover mode) |
| `text`              | The label and sublabel text container            |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--menu-item-background-color`                  | String | The background fill color                        |
| `--menu-item-border-color`                      | String | The border color                                 |
| `--menu-item-border-radius`                     | String | The corner rounding radius                       |
| `--menu-item-border-style`                      | String | The border line style                            |
| `--menu-item-border-width`                      | String | The border thickness                             |
| `--menu-item-focus-ring-active-width`           | String | The item focus ring active width CSS custom property. |
| `--menu-item-focus-ring-color`                  | String | The item focus ring color CSS custom property.   |
| `--menu-item-focus-ring-inward-offset`          | String | The item focus ring inward offset CSS custom property. |
| `--menu-item-focus-ring-outward-offset`         | String | The item focus ring outward offset CSS custom property. |
| `--menu-item-font-family`                       | String | The font family for menu item text               |
| `--menu-item-font-letter-spacing`               | String | The letter spacing for menu item text            |
| `--menu-item-font-line-height`                  | String | The line height for menu item text               |
| `--menu-item-font-size`                         | String | The font size for menu item text                 |
| `--menu-item-font-text-decoration`              | String | The text decoration style                        |
| `--menu-item-font-text-transform`               | String | The text transformation style                    |
| `--menu-item-font-weight`                       | String | The font weight for menu item text               |
| `--menu-item-foreground-color`                  | String | The text and icon color                          |
| `--menu-item-gap`                               | String | The spacing between icon and label elements      |
| `--menu-item-group-background-color`            | String | The background fill color                        |
| `--menu-item-group-border-color`                | String | The border color                                 |
| `--menu-item-group-border-radius`               | String | The corner rounding radius                       |
| `--menu-item-group-border-style`                | String | The border line style                            |
| `--menu-item-group-border-width`                | String | The border thickness                             |
| `--menu-item-group-font-family`                 | String | The font family for group text                   |
| `--menu-item-group-font-letter-spacing`         | String | The item group font letter spacing CSS custom property. |
| `--menu-item-group-font-line-height`            | String | The item group font line height CSS custom property. |
| `--menu-item-group-font-size`                   | String | The font size for group text                     |
| `--menu-item-group-font-text-decoration`        | String | The item group font text decoration CSS custom property. |
| `--menu-item-group-font-text-transform`         | String | The item group font text transform CSS custom property. |
| `--menu-item-group-font-weight`                 | String | The font weight for group text                   |
| `--menu-item-group-foreground-color`            | String | The text color                                   |
| `--menu-item-group-gap`                         | String | The spacing between items                        |
| `--menu-item-group-header-font-family`          | String | The font family for header text                  |
| `--menu-item-group-header-font-letter-spacing`  | String | The letter spacing for header text               |
| `--menu-item-group-header-font-line-height`     | String | The line height for header text                  |
| `--menu-item-group-header-font-size`            | String | The font size for header text                    |
| `--menu-item-group-header-font-text-decoration` | String | The text decoration for header                   |
| `--menu-item-group-header-font-text-transform`  | String | The text transformation for header               |
| `--menu-item-group-header-font-weight`          | String | The font weight for header text                  |
| `--menu-item-group-header-padding-bottom`       | String | The header bottom padding                        |
| `--menu-item-group-header-padding-left`         | String | The header left padding                          |
| `--menu-item-group-header-padding-right`        | String | The header right padding                         |
| `--menu-item-group-header-padding-top`          | String | The header top padding                           |
| `--menu-item-group-padding-bottom`              | String | The bottom padding inside the group              |
| `--menu-item-group-padding-left`                | String | The left padding inside the group                |
| `--menu-item-group-padding-right`               | String | The right padding inside the group               |
| `--menu-item-group-padding-top`                 | String | The top padding inside the group                 |
| `--menu-item-group-shadow`                      | String | The drop shadow or elevation effect              |
| `--menu-item-group-shadow-blur`                 | String | The item group shadow blur CSS custom property.  |
| `--menu-item-group-shadow-color`                | String | The item group shadow color CSS custom property. |
| `--menu-item-group-shadow-offset-x`             | String | The item group shadow offset x CSS custom property. |
| `--menu-item-group-shadow-offset-y`             | String | The item group shadow offset y CSS custom property. |
| `--menu-item-group-shadow-spread`               | String | The item group shadow spread CSS custom property. |
| `--menu-item-group-transition-duration`         | String | The duration of transitions                      |
| `--menu-item-group-transition-mode`             | String | The timing function for transitions              |
| `--menu-item-group-transition-property`         | String | The CSS properties to transition                 |
| `--menu-item-group-translate`                   | String | The item group translate CSS custom property.    |
| `--menu-item-height`                            | String | The minimum height of the menu item              |
| `--menu-item-indent-color`                      | String | The color of the indent indicator                |
| `--menu-item-indent-offset`                     | String | The offset for the indent indicator              |
| `--menu-item-indent-size`                       | String | The width of the indent indicator                |
| `--menu-item-padding-bottom`                    | String | The bottom padding inside the menu item          |
| `--menu-item-padding-left`                      | String | The left padding inside the menu item            |
| `--menu-item-padding-right`                     | String | The right padding inside the menu item           |
| `--menu-item-padding-top`                       | String | The top padding inside the menu item             |
| `--menu-item-ripple-color`                      | Color  | The item ripple color CSS custom property.       |
| `--menu-item-ripple-duration`                   | String | The item ripple duration CSS custom property.    |
| `--menu-item-shadow`                            | String | The drop shadow or elevation effect              |
| `--menu-item-shadow-blur`                       | String | The item shadow blur CSS custom property.        |
| `--menu-item-shadow-color`                      | String | The item shadow color CSS custom property.       |
| `--menu-item-shadow-offset-x`                   | String | The item shadow offset x CSS custom property.    |
| `--menu-item-shadow-offset-y`                   | String | The item shadow offset y CSS custom property.    |
| `--menu-item-shadow-spread`                     | String | The item shadow spread CSS custom property.      |
| `--menu-item-transition-duration`               | String | The duration of hover/focus transitions          |
| `--menu-item-transition-mode`                   | String | The timing function for transitions              |
| `--menu-item-transition-property`               | String | The CSS properties to transition                 |
| `--menu-item-translate`                         | String | The item translate CSS custom property.          |

# mosaik-menu-item

Menu Item - An interactive menu option supporting hierarchical submenus and multiple display modes.

**Mixins:** Themeable, Rippleable, Disableable, Valueable, Variantable, Appearanceable, Focusable, Slottable, Labelable

## Examples

Basic menu item (label and icon set via JavaScript):

```html
<mosaik-menu-item id="saveItem">Save</mosaik-menu-item>
```

Menu item with submenu (inline mode):

```html
<mosaik-menu-item menu-mode="inline">
  File
  <mosaik-menu-item slot="submenu">New</mosaik-menu-item>
  <mosaik-menu-item slot="submenu">Open</mosaik-menu-item>
  <mosaik-menu-item slot="submenu">Save</mosaik-menu-item>
</mosaik-menu-item>
```

Menu item with popover submenu:

```html
<mosaik-menu-item menu-mode="popover">
  Edit
  <mosaik-menu-item slot="submenu">Cut</mosaik-menu-item>
  <mosaik-menu-item slot="submenu">Copy</mosaik-menu-item>
  <mosaik-menu-item slot="submenu">Paste</mosaik-menu-item>
</mosaik-menu-item>
```

Checkable menu item:

```html
<mosaik-menu-item is-checked>Show Toolbar</mosaik-menu-item>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `activated`    |                | readonly  | `IEventEmitter<IEventDetail>`                | Called when the element is activated.<br />Provides reference to `IEventDetail` as event detail. |
| `appearance`   | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasChildren`  | `hasChildren`  |           | `boolean`                                    | The `hasChildren` property represents whether the element has children or not. |
| `icon`         |                |           | `string`                                     | Gets or sets the `icon` property.                |
| `isActive`     | `isActive`     |           | `boolean`                                    | Gets or sets the `isActive` property.            |
| `isChecked`    | `isChecked`    |           | `boolean`                                    | Gets or sets the `isChecked` property.           |
| `isExpanded`   | `isExpanded`   |           | `boolean`                                    | Gets or sets the `isExpanded` property.          |
| `isFocused`    | `is-focused`   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`        |                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `menuMode`     | `menuMode`     |           | `SubMenuMode`                                | Determines how child menus are displayed.        |
| `ripple`       | `ripple`       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `subLabel`     | `subLabel`     |           | `string`                                     | Gets or sets the `subLabel` property.            |
| `textOverflow` | `textOverflow` |           | `TextOverflow`                               | Gets or sets the `textOverflow` property.        |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `collapse`              | `(): void`                                       | Collapses the menu item.                         |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`                | `(): void`                                       | Expands the menu item.                           |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`                | `(): void`                                       | Toggles the expanded state of the menu item.     |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `activated`    | `ActivatedEvent`       | Fired when the menu item is clicked or activated |
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
|            | The default slot.                                |
| `end`      | Content displayed at the end (after label)       |
| `icon`     | The icon displayed for this menu item            |
| `label`    | The primary label text                           |
| `start`    | Content displayed at the start (before icon)     |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `subLabel` | Secondary descriptive text below the label       |

## CSS Shadow Parts

| Part                | Description                                      |
|---------------------|--------------------------------------------------|
| `caret`             | The expand/collapse indicator icon for items with children |
| `checkmark`         | The selection checkmark indicator when isChecked is true |
| `expandable`        | The expandable container for inline mode         |
| `focusRing`         | The focus indicator ring for keyboard navigation |
| `popover`           | The floating popover container for submenu       |
| `portal`            | The portal element for popover projection        |
| `projection`        | The projection target for popover mode           |
| `ripple`            | The ripple effect container for interaction feedback |
| `root`              | The root menu item container                     |
| `submenu`           | The submenu content wrapper                      |
| `submenu-container` | Hidden container for submenu content (used in popover mode) |
| `text`              | The label and sublabel text container            |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--menu-item-background-color`          | String | The background fill color                        |
| `--menu-item-border-color`              | String | The border color                                 |
| `--menu-item-border-radius`             | String | The corner rounding radius                       |
| `--menu-item-border-style`              | String | The border line style                            |
| `--menu-item-border-width`              | String | The border thickness                             |
| `--menu-item-focus-ring-active-width`   | String | The item focus ring active width CSS custom property. |
| `--menu-item-focus-ring-color`          | String | The item focus ring color CSS custom property.   |
| `--menu-item-focus-ring-inward-offset`  | String | The item focus ring inward offset CSS custom property. |
| `--menu-item-focus-ring-outward-offset` | String | The item focus ring outward offset CSS custom property. |
| `--menu-item-font-family`               | String | The font family for menu item text               |
| `--menu-item-font-letter-spacing`       | String | The letter spacing for menu item text            |
| `--menu-item-font-line-height`          | String | The line height for menu item text               |
| `--menu-item-font-size`                 | String | The font size for menu item text                 |
| `--menu-item-font-text-decoration`      | String | The text decoration style                        |
| `--menu-item-font-text-transform`       | String | The text transformation style                    |
| `--menu-item-font-weight`               | String | The font weight for menu item text               |
| `--menu-item-foreground-color`          | String | The text and icon color                          |
| `--menu-item-gap`                       | String | The spacing between icon and label elements      |
| `--menu-item-height`                    | String | The minimum height of the menu item              |
| `--menu-item-indent-color`              | String | The color of the indent indicator                |
| `--menu-item-indent-offset`             | String | The offset for the indent indicator              |
| `--menu-item-indent-size`               | String | The width of the indent indicator                |
| `--menu-item-padding-bottom`            | String | The bottom padding inside the menu item          |
| `--menu-item-padding-left`              | String | The left padding inside the menu item            |
| `--menu-item-padding-right`             | String | The right padding inside the menu item           |
| `--menu-item-padding-top`               | String | The top padding inside the menu item             |
| `--menu-item-ripple-color`              | Color  | The item ripple color CSS custom property.       |
| `--menu-item-ripple-duration`           | String | The item ripple duration CSS custom property.    |
| `--menu-item-shadow`                    | String | The drop shadow or elevation effect              |
| `--menu-item-shadow-blur`               | String | The item shadow blur CSS custom property.        |
| `--menu-item-shadow-color`              | String | The item shadow color CSS custom property.       |
| `--menu-item-shadow-offset-x`           | String | The item shadow offset x CSS custom property.    |
| `--menu-item-shadow-offset-y`           | String | The item shadow offset y CSS custom property.    |
| `--menu-item-shadow-spread`             | String | The item shadow spread CSS custom property.      |
| `--menu-item-transition-duration`       | String | The duration of hover/focus transitions          |
| `--menu-item-transition-mode`           | String | The timing function for transitions              |
| `--menu-item-transition-property`       | String | The CSS properties to transition                 |
| `--menu-item-translate`                 | String | The item translate CSS custom property.          |

# mosaik-menu

Menu - A vertical list container for presenting navigation options and actionable commands.

Provides structured menu layouts with support for menu items, dividers, and hierarchical organization.
Handles selection states, keyboard navigation, and accessibility features. Essential for context menus,
navigation menus, and dropdown command lists.

**Mixins:** Themeable, Disableable, Insetable

## Example

```html
<!-- Basic context menu -->
<mosaik-menu>
  <mosaik-menu-item>Cut</mosaik-menu-item>
  <mosaik-menu-item>Copy</mosaik-menu-item>
  <mosaik-menu-item>Paste</mosaik-menu-item>
  <mosaik-divider></mosaik-divider>
  <mosaik-menu-item disabled>Delete</mosaik-menu-item>
</mosaik-menu>

<!-- Navigation menu with icons -->
<mosaik-menu>
  <mosaik-menu-item is-active>
    <mosaik-icon slot="icon"></mosaik-icon>
    Home
  </mosaik-menu-item>
  <mosaik-menu-item>
    <mosaik-icon slot="icon"></mosaik-icon>
    Profile
  </mosaik-menu-item>
  <mosaik-menu-item>
    <mosaik-icon slot="icon"></mosaik-icon>
    Settings
  </mosaik-menu-item>
</mosaik-menu>

<!-- Hierarchical menu with inline submenus -->
<mosaik-menu>
  <mosaik-menu-item>File</mosaik-menu-item>
  <mosaik-menu-item menu-mode="inline">
    Edit
    <mosaik-menu slot="submenu">
      <mosaik-menu-item>Undo</mosaik-menu-item>
      <mosaik-menu-item>Redo</mosaik-menu-item>
    </mosaik-menu>
  </mosaik-menu-item>
  <mosaik-menu-item>View</mosaik-menu-item>
</mosaik-menu>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `activated`    |            | readonly  | `IEventEmitter<IEventDetail>`                | Called when a menu item is activated.<br />Provides reference to `IEventDetail` as event detail. |
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `inset`        | `inset`    |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `activated`    | `ActivatedEvent`       | Emitted when a menu item is activated or selected |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `root` | The root part. |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--menu-background-color`     | Color  | Background color of the menu container        |
| `--menu-border-color`         | Color  | Border color around the menu                  |
| `--menu-border-radius`        | String | Border radius for menu corners                |
| `--menu-border-style`         | String | The border style CSS custom property.         |
| `--menu-border-width`         | String | The border width CSS custom property.         |
| `--menu-font-family`          | String | The font family CSS custom property.          |
| `--menu-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--menu-font-line-height`     | String | The font line height CSS custom property.     |
| `--menu-font-size`            | String | The font size CSS custom property.            |
| `--menu-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--menu-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--menu-font-weight`          | String | The font weight CSS custom property.          |
| `--menu-foreground-color`     | String | The foreground color CSS custom property.     |
| `--menu-gap`                  | String | The gap CSS custom property.                  |
| `--menu-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--menu-padding-left`         | String | The padding left CSS custom property.         |
| `--menu-padding-right`        | String | The padding right CSS custom property.        |
| `--menu-padding-top`          | String | The padding top CSS custom property.          |
| `--menu-shadow`               | String | The shadow CSS custom property.               |
| `--menu-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--menu-shadow-color`         | String | The shadow color CSS custom property.         |
| `--menu-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--menu-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--menu-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--menu-transition-duration`  | String | The transition duration CSS custom property.  |
| `--menu-transition-mode`      | String | The transition mode CSS custom property.      |
| `--menu-transition-property`  | String | The transition property CSS custom property.  |
| `--menu-translate`            | String | The translate CSS custom property.            |

# mosaik-message-box

MessageBox - A modal dialog that presents information and prompts for a user response.

**Mixins:** TextFormattable, Variantable, Themeable, Animatable, Dimensionable, Elevatable, Appearanceable, Slottable, Openable, Closeable

## Examples

Confirmation message box with Yes/No buttons:

```html
<mosaik-message-box buttons="yesNo"></mosaik-message-box>
```

Alert message box with OK button:

```html
<mosaik-message-box buttons="ok"></mosaik-message-box>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Default        | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|----------------|--------------------------------------------------|
| `animationTarget`     |                       | readonly  | `HTMLElement`                                |                | Gets the animation target element.<br />For the dialog, animations are applied to the root (dialog) template part instead of the host element. |
| `appearance`          | `appearance`          |           | `Appearance`                                 |                | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `buttons`             | `buttons`             |           | `MessageBoxButtons`                          |                | Gets or sets the `buttons` property.             |
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |                | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    |                | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    |                | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |                | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        |                | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              |                | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        |                | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dragging`            | `dragging`            |           | `boolean`                                    |                | Gets or sets the `dragging` property.            |
| `elevation`           | `elevation`           |           | `ElevationWeight`                            |                | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `enter`               | `enter`               |           | `IAnimationReferenceMetadata \| null`        | "fadeSlideIn"  | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`                | `exit`                |           | `IAnimationReferenceMetadata \| null`        | "fadeSlideOut" | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `formatter`           |                       |           | `TextFormatter \| null`                      |                | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    |                | Gets or sets the `hasBackdrop` property.         |
| `header`              |                       |           | `string`                                     |                | Gets or sets the `header` property.              |
| `height`              | `height`              |           | `CssLength`                                  |                | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `icon`                |                       |           | `string`                                     |                | Gets or sets the `icon` property.                |
| `intl`                |                       | readonly  | `MessageBoxElementIntl`                      |                | Returns the `intl` property.                     |
| `isDraggable`         | `isDraggable`         |           | `boolean`                                    |                | Gets or sets the `isDraggable` property.         |
| `isFullScreen`        | `isFullScreen`        |           | `boolean`                                    |                | Gets or sets the `isFullScreen` property.        |
| `isOpen`              | `isOpen`              |           | `boolean`                                    |                | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     |                | The lang property indicates the language of the element's content. |
| `message`             |                       |           | `string`                                     |                | Gets or sets the `message` property.             |
| `offsetX`             | `offsetX`             |           | `number`                                     |                | Gets or sets the `offsetX` property.             |
| `offsetY`             | `offsetY`             |           | `number`                                     |                | Gets or sets the `offsetY` property.             |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |                | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    |                | Gets or sets the `pressEscapeToClose` property.  |
| `subHeader`           |                       |           | `string`                                     |                | Gets or sets the `subHeader` property.           |
| `themeName`           |                       |           | `string`                                     |                | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`             | `variant`             |           | `Variant`                                    |                | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `width`               | `width`               |           | `CssLength`                                  |                | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the `DialogElement`.                      |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`      | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the `DialogElement`.                       |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the overlay completes its close transition (isOpen becomes false) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `dialogResult` |                        |                                                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the overlay completes its open transition (isOpen becomes true) |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content area for main dialog body        |
| `actions` | Action buttons and controls area                 |
| `footer`  | Dialog footer section for additional information |
| `header`  | Dialog header section for titles and controls    |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part            | Description                                 |
|-----------------|---------------------------------------------|
| `actionCancel`  | The cancel action button.                   |
| `actionNo`      | The no action button.                       |
| `actionOk`      | The ok action button.                       |
| `actionYes`     | The yes action button.                      |
| `actions`       | The actions container.                      |
| `backdrop`      | The semi-transparent overlay backdrop.      |
| `content`       | The content area with icon and message.     |
| `elevation`     | The elevation shadow layer.                 |
| `header`        | The header section with title and subtitle. |
| `headerText`    | The header title text.                      |
| `icon`          | The message icon.                           |
| `message`       | The message text.                           |
| `root`          | The root dialog element.                    |
| `subHeaderText` | The header subtitle text.                   |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--dialog-background-color`                     | Color  | Background color of the dialog                   |
| `--dialog-border-color`                         | String | The border color CSS custom property.            |
| `--dialog-border-radius`                        | String | Border radius for dialog corners                 |
| `--dialog-border-style`                         | String | The border style CSS custom property.            |
| `--dialog-border-width`                         | String | The border width CSS custom property.            |
| `--dialog-divider-height`                       | String | The divider height CSS custom property.          |
| `--dialog-font-family`                          | String | The font family CSS custom property.             |
| `--dialog-font-letter-spacing`                  | String | The font letter spacing CSS custom property.     |
| `--dialog-font-line-height`                     | String | The font line height CSS custom property.        |
| `--dialog-font-size`                            | String | The font size CSS custom property.               |
| `--dialog-font-text-decoration`                 | String | The font text decoration CSS custom property.    |
| `--dialog-font-text-transform`                  | String | The font text transform CSS custom property.     |
| `--dialog-font-weight`                          | String | The font weight CSS custom property.             |
| `--dialog-foreground-color`                     | String | The foreground color CSS custom property.        |
| `--dialog-gap`                                  | String | The gap CSS custom property.                     |
| `--dialog-padding-bottom`                       | String | The padding bottom CSS custom property.          |
| `--dialog-padding-left`                         | String | The padding left CSS custom property.            |
| `--dialog-padding-right`                        | String | The padding right CSS custom property.           |
| `--dialog-padding-top`                          | String | The padding top CSS custom property.             |
| `--dialog-shadow`                               | String | The shadow CSS custom property.                  |
| `--dialog-shadow-blur`                          | String | The shadow blur CSS custom property.             |
| `--dialog-shadow-color`                         | String | The shadow color CSS custom property.            |
| `--dialog-shadow-offset-x`                      | String | The shadow offset x CSS custom property.         |
| `--dialog-shadow-offset-y`                      | String | The shadow offset y CSS custom property.         |
| `--dialog-shadow-spread`                        | String | The shadow spread CSS custom property.           |
| `--dialog-transition-duration`                  | String | The transition duration CSS custom property.     |
| `--dialog-transition-mode`                      | String | The transition mode CSS custom property.         |
| `--dialog-transition-property`                  | String | The transition property CSS custom property.     |
| `--dialog-translate`                            | String | The translate CSS custom property.               |
| `--message-box-background-color`                | String | The box background color CSS custom property.    |
| `--message-box-border-color`                    | String | The box border color CSS custom property.        |
| `--message-box-border-radius`                   | String | The box border radius CSS custom property.       |
| `--message-box-border-style`                    | String | The box border style CSS custom property.        |
| `--message-box-border-width`                    | String | The box border width CSS custom property.        |
| `--message-box-divider-height`                  | String | The box divider height CSS custom property.      |
| `--message-box-font-family`                     | String | The box font family CSS custom property.         |
| `--message-box-font-letter-spacing`             | String | The box font letter spacing CSS custom property. |
| `--message-box-font-line-height`                | String | The box font line height CSS custom property.    |
| `--message-box-font-size`                       | String | The box font size CSS custom property.           |
| `--message-box-font-text-decoration`            | String | The box font text decoration CSS custom property. |
| `--message-box-font-text-transform`             | String | The box font text transform CSS custom property. |
| `--message-box-font-weight`                     | String | The box font weight CSS custom property.         |
| `--message-box-foreground-color`                | String | The box foreground color CSS custom property.    |
| `--message-box-gap`                             | String | The box gap CSS custom property.                 |
| `--message-box-header-font-family`              | String | The box header font family CSS custom property.  |
| `--message-box-header-font-letter-spacing`      | String | The box header font letter spacing CSS custom property. |
| `--message-box-header-font-line-height`         | String | The box header font line height CSS custom property. |
| `--message-box-header-font-size`                | String | The box header font size CSS custom property.    |
| `--message-box-header-font-text-decoration`     | String | The box header font text decoration CSS custom property. |
| `--message-box-header-font-text-transform`      | String | The box header font text transform CSS custom property. |
| `--message-box-header-font-weight`              | String | The box header font weight CSS custom property.  |
| `--message-box-header-foreground-color`         | String | The box header foreground color CSS custom property. |
| `--message-box-padding-bottom`                  | String | The box padding bottom CSS custom property.      |
| `--message-box-padding-left`                    | String | The box padding left CSS custom property.        |
| `--message-box-padding-right`                   | String | The box padding right CSS custom property.       |
| `--message-box-padding-top`                     | String | The box padding top CSS custom property.         |
| `--message-box-shadow`                          | String | The box shadow CSS custom property.              |
| `--message-box-shadow-blur`                     | String | The box shadow blur CSS custom property.         |
| `--message-box-shadow-color`                    | String | The box shadow color CSS custom property.        |
| `--message-box-shadow-offset-x`                 | String | The box shadow offset x CSS custom property.     |
| `--message-box-shadow-offset-y`                 | String | The box shadow offset y CSS custom property.     |
| `--message-box-shadow-spread`                   | String | The box shadow spread CSS custom property.       |
| `--message-box-sub-header-font-family`          | String | The box sub header font family CSS custom property. |
| `--message-box-sub-header-font-letter-spacing`  | String | The box sub header font letter spacing CSS custom property. |
| `--message-box-sub-header-font-line-height`     | String | The box sub header font line height CSS custom property. |
| `--message-box-sub-header-font-size`            | String | The box sub header font size CSS custom property. |
| `--message-box-sub-header-font-text-decoration` | String | The box sub header font text decoration CSS custom property. |
| `--message-box-sub-header-font-text-transform`  | String | The box sub header font text transform CSS custom property. |
| `--message-box-sub-header-font-weight`          | String | The box sub header font weight CSS custom property. |
| `--message-box-sub-header-foreground-color`     | String | The box sub header foreground color CSS custom property. |
| `--message-box-transition-duration`             | String | The box transition duration CSS custom property. |
| `--message-box-transition-mode`                 | String | The box transition mode CSS custom property.     |
| `--message-box-transition-property`             | String | The box transition property CSS custom property. |
| `--message-box-translate`                       | String | The box translate CSS custom property.           |

# mosaik-message-content

Message Content - A component that displays the content text of a message with expandable/collapsible functionality.

**Mixins:** Themeable, Expandable, Disableable, Variantable, TextFormattable, Slottable

## Example

```html
<mosaik-message-content collapsed-lines="2">
  This is the message content.
</mosaik-message-content>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                         | Default | Description                                      |
|------------------|------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collapsed`      |                  |           | `IEventEmitter<IEventDetail>`                |         | Called when the element is collapsed.            |
| `collapsedLines` | `collapsedLines` |           | `number \| null`                             | "2"     | Gets or sets the `collapsedLines` property.<br />The number of visible lines when the content is collapsed. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `contentChanged` |                  | readonly  | `IEventEmitter<IContentChangedEventDetail>`  |         | Called when the content changes.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`            | `dir`            |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                    |         | Gets or sets the `disabled` property.<br />If not explicitly set, inherits from parent MessageElement. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `expanded`       |                  |           | `IEventEmitter<IEventDetail>`                |         | Called when the element is expanded.             |
| `formatter`      |                  |           | `TextFormatter \| null`                      |         | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasContent`     | `hasContent`     |           | `boolean`                                    |         | Gets or sets the `hasContent` property.          |
| `isExpanded`     | `is-expanded`    |           | `boolean`                                    |         | Gets or sets the `isExpanded` property.<br />If not explicitly set, inherits from parent MessageElement. |
| `lang`           | `lang`           |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `text`           | `text`           |           | `string`                                     |         | Gets or sets the `text` property.<br />The text content to display.<br />If not explicitly set, inherits from parent MessageElement's content property. |
| `themeName`      |                  |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`        |                  |           | `IEventEmitter<IEventDetail>`                |         | Called when the element is toggled.              |
| `variant`        | `variant`        |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `collapse`             | `(): void`                                       | Collapses the element.                           |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`               | `(): void`                                       | Expands the element.                             |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onIsExpandedChanged`  | `(prev: boolean, next: boolean): void`           | This method is invoked when the `isExpanded` property is changed.<br />Override this method to add custom behavior when the expanded state changes.<br /><br />**prev**: The previous value of `isExpanded`.<br />**next**: The new value of `isExpanded`. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): void`                                       | Toggles the element between expanded and collapsed states. |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `collapsed`      | `CollapsedEvent`       | Fired when the content is collapsed.             |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `contentChanged` | `ContentChangedEvent`  | Fired when the content presence changes          |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `expanded`       | `ExpandedEvent`        | Fired when the content is expanded.              |
| `toggled`        | `ToggledEvent`         | Fired when the content expansion state is toggled. |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing custom content instead of the text property. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                              |
|--------|------------------------------------------|
| `text` | The text element displaying the content. |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--content-font-family`          | String | The font family CSS custom property.          |
| `--content-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--content-font-line-height`     | String | The font line height CSS custom property.     |
| `--content-font-size`            | String | The font size CSS custom property.            |
| `--content-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--content-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--content-font-weight`          | String | The font weight CSS custom property.          |
| `--content-gap`                  | String | The gap CSS custom property.                  |
| `--content-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--content-padding-left`         | String | The padding left CSS custom property.         |
| `--content-padding-right`        | String | The padding right CSS custom property.        |
| `--content-padding-top`          | String | The padding top CSS custom property.          |
| `--content-shadow`               | String | The shadow CSS custom property.               |
| `--content-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--content-shadow-color`         | String | The shadow color CSS custom property.         |
| `--content-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--content-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--content-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--content-transition-duration`  | String | The transition duration CSS custom property.  |
| `--content-transition-mode`      | String | The transition mode CSS custom property.      |
| `--content-transition-property`  | String | The transition property CSS custom property.  |
| `--content-translate`            | String | The translate CSS custom property.            |

# mosaik-message

Message - A compact, closeable notification component for displaying concise information.

**Mixins:** Themeable, Expandable, Animatable, Closeable, Disableable, Variantable, Appearanceable, Fitable, TextFormattable, Slottable

## Examples

Simple closeable notification:

```html
<mosaik-message
  header="System Update"
  content="We will be back online shortly."
  closeable></mosaik-message>
```

Expandable message with line limit:

```html
<mosaik-message
  header="Long Message"
  content="This is a very long message that will be truncated after the specified number of lines."
  expandable
  collapsed-lines="2"></mosaik-message>
```

Expandable message with rich slotted content:

```html
<mosaik-message
  header="Rich Content"
  expandable>
  <mosaik-text text="This message contains rich formatted content."></mosaik-text>
  <mosaik-button label="Learn More" appearance="plain"></mosaik-button>
</mosaik-message>
```

## Properties

| Property          | Attribute     | Modifiers | Type                                         | Default      | Description                                      |
|-------------------|---------------|-----------|----------------------------------------------|--------------|--------------------------------------------------|
| `animationTarget` |               | readonly  | `HTMLElement \| undefined`                   |              | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `appearance`      | `appearance`  |           | `Appearance`                                 |              | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`         |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |              | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `closeable`       | `closeable`   |           | `boolean`                                    |              | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`          |               |           | `IEventEmitter<ICancelEventDetail>`          |              | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `collapsed`       |               |           | `IEventEmitter<IEventDetail>`                |              | Called when the element is collapsed.            |
| `connected`       |               | readonly  | `IEventEmitter<void>`                        |              | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`         |               |           | `string`                                     |              | Gets or sets the `content` property.             |
| `dir`             | `dir`         |           | `FlowDirection`                              |              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`    |           | `boolean`                                    |              | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |               | readonly  | `IEventEmitter<void>`                        |              | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`           | `enter`       |           |                                              | "growVerIn"  | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`        |           |                                              | "growVerOut" | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `expandable`      | `expandable`  |           | `boolean`                                    |              | Gets or sets the `expandable` property.<br />When enabled, the content will be truncated to `collapsedLines` lines<br />and a toggle button will be displayed. |
| `expanded`        |               |           | `IEventEmitter<IEventDetail>`                |              | Called when the element is expanded.             |
| `fit`             | `fit`         |           | `Fit`                                        |              | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `formatter`       |               |           | `TextFormatter \| null`                      |              | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`          |               |           | `string`                                     |              | Gets or sets the `header` property.              |
| `icon`            |               |           | `string`                                     |              | Gets or sets the `icon` property.                |
| `iconSize`        | `iconSize`    |           | `Size \| null`                               |              | Gets or sets the `iconSize` property.            |
| `isExpanded`      | `is-expanded` |           | `boolean`                                    |              | Whether the element is currently expanded.       |
| `lang`            | `lang`        |           | `string`                                     |              | The lang property indicates the language of the element's content. |
| `themeName`       |               |           | `string`                                     |              | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`         |               |           | `IEventEmitter<IEventDetail>`                |              | Called when the element is toggled.              |
| `variant`         | `variant`     |           | `Variant`                                    |              | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the `MessageElement`.                     |
| `collapse`             | `(): void`                                       | Collapses the message content.<br />Only works when `expandable` is `true`. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`               | `(): void`                                       | Expands the message content.<br />Only works when `expandable` is `true`. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`      | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onIsExpandedChanged`  | `(prev: boolean, next: boolean): void`           | This method is invoked when the `isExpanded` property is changed.<br /><br />**prev**: The previous value.<br />**next**: The new value. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): void`                                       | Toggles the message between expanded and collapsed states.<br />Only works when `expandable` is `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Fired when the message is closed.                |
| `collapsed`    | `CollapsedEvent`       | Fired when the message content is collapsed.     |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `expanded`     | `ExpandedEvent`        | Fired when the message content is expanded.      |
| `toggled`      | `ToggledEvent`         | Fired when the message content is toggled.       |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing rich content inside the message (only used when expandable). |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `caret`      | The caret button for toggling the expandable content. |
| `close`      | The close button or icon part of the message.    |
| `footer`     | The footer area containing the caret toggle button. |
| `header`     | The header text part of the message.             |
| `header-row` | The header row containing icon, text, and close button. |
| `icon`       | The icon part of the message.                    |
| `root`       | The root part of the message.                    |
| `text`       | The text part of the message.                    |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--message-background-color`     | Color  | The background color for the message.         |
| `--message-border-color`         | Color  | The border color for the message.             |
| `--message-border-radius`        | String | The border radius for the message.            |
| `--message-border-style`         | String | The border style for the message.             |
| `--message-border-width`         | String | The border width for the message.             |
| `--message-font-family`          | String | The font family for the message.              |
| `--message-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--message-font-line-height`     | String | The font line height CSS custom property.     |
| `--message-font-size`            | String | The font size for the message.                |
| `--message-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--message-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--message-font-weight`          | String | The font weight for the message.              |
| `--message-foreground-color`     | Color  | The foreground color for the message.         |
| `--message-gap`                  | String | The gap between elements within the message.  |
| `--message-padding-bottom`       | String | The bottom padding for the message.           |
| `--message-padding-left`         | String | The left padding for the message.             |
| `--message-padding-right`        | String | The right padding for the message.            |
| `--message-padding-top`          | String | The top padding for the message.              |
| `--message-shadow`               | String | The shadow effect for the message.            |
| `--message-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--message-shadow-color`         | String | The shadow color CSS custom property.         |
| `--message-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--message-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--message-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--message-transition-duration`  | String | The transition duration for the message.      |
| `--message-transition-mode`      | String | The transition mode for the message.          |
| `--message-transition-property`  | String | The transition property for the message.      |
| `--message-translate`            | String | The translate CSS custom property.            |

# mosaik-meter-bar

MeterBar - A horizontal or vertical gauge for displaying numeric measurements within defined ranges.

**Mixins:** Themeable, Variantable, Orientable, Disableable, Labelable, Rangeable, Valueable

## Examples

Basic meter with continuous scale:

```html
<mosaik-meter-bar
  min="0"
  max="100"
  value="65"
  low="30"
  high="80"
  optimum="50">
  <span slot="label">CPU Usage</span>
</mosaik-meter-bar>
```

Meter with segmented scale showing battery level:

```html
<mosaik-meter-bar
  min="0"
  max="100"
  value="25"
  low="20"
  high="80"
  optimum="50"
  scale="segmented"
  variant="warning">
  <span slot="label">Battery Level</span>
</mosaik-meter-bar>
```

Vertical meter for temperature monitoring:

```html
<mosaik-meter-bar
  min="0"
  max="100"
  value="85"
  low="20"
  high="75"
  optimum="50"
  orientation="vertical"
  thickness="8">
  <span slot="label">Temperature (°C)</span>
</mosaik-meter-bar>
```

Disk space usage meter:

```html
<mosaik-meter-bar
  min="0"
  max="500"
  value="420"
  low="100"
  high="450"
  optimum="250"
  variant="error">
  <span slot="label">Disk Space (GB)</span>
  <span slot="hint">420 GB used of 500 GB</span>
</mosaik-meter-bar>
```

## Properties

| Property            | Attribute     | Modifiers | Type                                         | Default | Description                                      |
|---------------------|---------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`           |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |               | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`         |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`    |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |               | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `high`              | `high`        |           | `number`                                     |         | Gets or sets the `high` property.                |
| `label`             |               |           | `string`                                     |         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`        |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `low`               | `low`         |           | `number`                                     |         | Gets or sets the `low` property.                 |
| `max`               | `max`         |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`         |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `optimum`           | `optimum`     |           | `number`                                     |         | Gets or sets the `optimum` property.             |
| `orientation`       | `orientation` |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `percent`           |               | readonly  | `number`                                     |         | Gets the percentage of the current value within the range (0-100). |
| `range`             | `range`       |           | `MeterRange`                                 |         | Gets or sets the `range` property.               |
| `rangeValueChanged` |               | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `scale`             | `scale`       |           | `MeterScale`                                 |         | Gets or sets the `scale` property.<br />Determines how the meter scale is visually represented.<br />- `continuous`: Single continuous bar with color based on current range (default).<br />- `segmented`: Visible segments for low, optimum, and high zones with a marker for the current value. |
| `segments`          |               | readonly  | `IMeterSegment[]`                            |         | Gets the segments for the segmented scale mode.<br />Returns an array of segments representing low, optimum, and high zones. |
| `themeName`         |               |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`         | `thickness`   |           | `number`                                     |         | Gets or sets the thickness property.             |
| `value`             | `value`       |           | `number`                                     |         | Specifies the value of the `Range`.              |
| `variant`           | `variant`     |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the meter value changes               |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `hint`  | Secondary text content area for additional meter information or status |
| `label` | Text label content area for meter description or value display |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `bar`      | Main meter bar container element                 |
| `fill`     | Filled portion of the meter indicating current value in continuous mode |
| `hint`     | Hint text styling container for additional information |
| `label`    | Text label styling container for meter information |
| `marker`   | Position indicator showing current value in segmented mode |
| `segment`  | Individual segment element representing a specific range (low/optimum/high) |
| `segments` | Container for individual range segments in segmented mode |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--meter-bar-fill-color-high`      | String | Fill color for high range values (above high threshold) |
| `--meter-bar-fill-color-low`       | String | Fill color for low range values (below low threshold) |
| `--meter-bar-fill-color-optimum`   | String | Fill color for optimum range values (between low and high) |
| `--meter-bar-font-family`          | String | The bar font family CSS custom property.         |
| `--meter-bar-font-letter-spacing`  | String | The bar font letter spacing CSS custom property. |
| `--meter-bar-font-line-height`     | String | The bar font line height CSS custom property.    |
| `--meter-bar-font-size`            | String | The bar font size CSS custom property.           |
| `--meter-bar-font-text-decoration` | String | The bar font text decoration CSS custom property. |
| `--meter-bar-font-text-transform`  | String | The bar font text transform CSS custom property. |
| `--meter-bar-font-weight`          | String | The bar font weight CSS custom property.         |
| `--meter-bar-gap`                  | String | The bar gap CSS custom property.                 |
| `--meter-bar-marker-color`         | String | Color of the marker indicator in segmented mode  |
| `--meter-bar-padding-bottom`       | String | The bar padding bottom CSS custom property.      |
| `--meter-bar-padding-left`         | String | The bar padding left CSS custom property.        |
| `--meter-bar-padding-right`        | String | The bar padding right CSS custom property.       |
| `--meter-bar-padding-top`          | String | The bar padding top CSS custom property.         |
| `--meter-bar-shadow`               | String | The bar shadow CSS custom property.              |
| `--meter-bar-shadow-blur`          | String | The bar shadow blur CSS custom property.         |
| `--meter-bar-shadow-color`         | String | The bar shadow color CSS custom property.        |
| `--meter-bar-shadow-offset-x`      | String | The bar shadow offset x CSS custom property.     |
| `--meter-bar-shadow-offset-y`      | String | The bar shadow offset y CSS custom property.     |
| `--meter-bar-shadow-spread`        | String | The bar shadow spread CSS custom property.       |
| `--meter-bar-transition-duration`  | String | The bar transition duration CSS custom property. |
| `--meter-bar-transition-mode`      | String | The bar transition mode CSS custom property.     |
| `--meter-bar-transition-property`  | String | The bar transition property CSS custom property. |
| `--meter-bar-translate`            | String | The bar translate CSS custom property.           |

# mosaik-meter-ring

MeterRing - A circular gauge for displaying numeric measurements within defined ranges.

**Mixins:** Themeable, Variantable, Orientable, Disableable, Labelable, Rangeable, Valueable

## Examples

Basic circular meter with continuous fill:

```html
<mosaik-meter-ring
  min="0"
  max="100"
  value="65"
  low="30"
  high="80"
  optimum="50">
  <span slot="label">Performance Score</span>
</mosaik-meter-ring>
```

Segmented meter ring for system health monitoring:

```html
<mosaik-meter-ring
  min="0"
  max="100"
  value="42"
  low="25"
  high="75"
  optimum="50"
  scale="segmented"
  radius="80"
  thickness="8"
  variant="warning">
  <span slot="label">System Health</span>
  <span slot="hint">42% Capacity</span>
</mosaik-meter-ring>
```

Dashboard KPI gauge:

```html
<div class="kpi-grid">
  <mosaik-meter-ring
    min="0"
    max="100"
    value="92"
    low="40"
    high="90"
    optimum="70"
    radius="60"
    thickness="10">
    <span slot="label">Conversion Rate</span>
    <span slot="hint">92%</span>
  </mosaik-meter-ring>
</div>
```

Memory usage indicator:

```html
<mosaik-meter-ring
  min="0"
  max="16"
  value="12"
  low="4"
  high="14"
  optimum="8"
  radius="50"
  thickness="6"
  variant="error">
  <span slot="label">RAM</span>
  <span slot="hint">12 GB / 16 GB</span>
</mosaik-meter-ring>
```

## Properties

| Property            | Attribute     | Modifiers | Type                                         | Default | Description                                      |
|---------------------|---------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`           |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |               | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`         |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`    |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |               | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `effectiveRadius`   |               | readonly  | `number`                                     |         | Gets the effective radius for SVG calculations.  |
| `high`              | `high`        |           | `number`                                     |         | Gets or sets the `high` property.                |
| `label`             |               |           | `string`                                     |         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`        |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `low`               | `low`         |           | `number`                                     |         | Gets or sets the `low` property.                 |
| `max`               | `max`         |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`         |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `optimum`           | `optimum`     |           | `number`                                     |         | Gets or sets the `optimum` property.             |
| `orientation`       | `orientation` |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `radius`            | `radius`      |           | `number`                                     |         |                                                  |
| `range`             | `range`       |           | `MeterRange`                                 |         | Gets or sets the `range` property.               |
| `rangeValueChanged` |               | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `scale`             | `scale`       |           | `MeterScale`                                 |         | Gets or sets the `scale` property.<br />Determines how the meter scale is visually represented.<br />- `continuous`: Single continuous ring with color based on current range (default).<br />- `segmented`: Visible arc segments for low, optimum, and high zones with a marker for the current value. |
| `segments`          |               | readonly  | `IMeterRingSegment[]`                        |         | Gets the segments for the segmented scale mode.<br />Returns an array of arc segments representing low, optimum, and high zones. |
| `themeName`         |               |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`         | `thickness`   |           | `number`                                     |         | Gets or sets the thickness property.             |
| `value`             | `value`       |           | `number`                                     |         | Specifies the value of the `Range`.              |
| `variant`           | `variant`     |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the meter value changes               |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `hint`  | Secondary text content area for additional meter information or status |
| `label` | Text label content area for meter description or value display |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `bar`     | Background ring/circle element for the meter track |
| `fill`    | Filled arc/circle indicating current value in continuous mode |
| `hint`    | Hint text styling container for additional information |
| `label`   | Text label styling container for meter information |
| `marker`  | Circle marker indicator showing current value position in segmented mode |
| `root`    | Root SVG container for the meter ring component  |
| `segment` | Individual arc segment representing a specific range (low/optimum/high) in segmented mode |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--meter-ring-background-color`     | String | Background color for the meter ring container    |
| `--meter-ring-border-color`         | String | Border color for the meter ring                  |
| `--meter-ring-border-radius`        | String | Border radius for the container styling          |
| `--meter-ring-border-style`         | String | Border style for the meter ring                  |
| `--meter-ring-border-width`         | String | Border width for the meter ring                  |
| `--meter-ring-fill-color`           | String | Fill color for the meter indicator in continuous mode |
| `--meter-ring-fill-color-high`      | String | Fill color for high range segment (above high threshold) |
| `--meter-ring-fill-color-low`       | String | Fill color for low range segment (below low threshold) |
| `--meter-ring-fill-color-normal`    | String | Fill color for normal range segment              |
| `--meter-ring-fill-color-optimum`   | String | Fill color for optimum range segment (between low and high) |
| `--meter-ring-font-family`          | String | Font family for meter text labels                |
| `--meter-ring-font-letter-spacing`  | String | Letter spacing for meter text                    |
| `--meter-ring-font-line-height`     | String | Line height for meter text                       |
| `--meter-ring-font-size`            | String | Font size for meter text                         |
| `--meter-ring-font-text-decoration` | String | Text decoration style for meter text             |
| `--meter-ring-font-text-transform`  | String | Text transformation style for meter text         |
| `--meter-ring-font-weight`          | String | Font weight for meter text                       |
| `--meter-ring-foreground-color`     | String | Foreground color for meter text and icons        |
| `--meter-ring-gap`                  | String | Spacing between ring and label elements          |
| `--meter-ring-marker-color`         | String | Color for the marker indicator in segmented mode |
| `--meter-ring-padding-bottom`       | String | Bottom padding for the meter ring container      |
| `--meter-ring-padding-left`         | String | Left padding for the meter ring container        |
| `--meter-ring-padding-right`        | String | Right padding for the meter ring container       |
| `--meter-ring-padding-top`          | String | Top padding for the meter ring container         |
| `--meter-ring-radius`               | String | Radius of the circular meter ring                |
| `--meter-ring-shadow`               | String | Drop shadow or elevation effect for the meter ring |
| `--meter-ring-shadow-blur`          | String | The ring shadow blur CSS custom property.        |
| `--meter-ring-shadow-color`         | String | The ring shadow color CSS custom property.       |
| `--meter-ring-shadow-offset-x`      | String | The ring shadow offset x CSS custom property.    |
| `--meter-ring-shadow-offset-y`      | String | The ring shadow offset y CSS custom property.    |
| `--meter-ring-shadow-spread`        | String | The ring shadow spread CSS custom property.      |
| `--meter-ring-thickness`            | String | Stroke thickness of the meter ring arc           |
| `--meter-ring-transition-duration`  | String | Animation duration for value changes             |
| `--meter-ring-transition-mode`      | String | Animation easing mode for transitions            |
| `--meter-ring-transition-property`  | String | CSS properties to animate during transitions     |
| `--meter-ring-translate`            | String | Transform translation for positioning            |

# NumberBoxElement - Numeric input with spinner controls

## Description
The NumberBox component provides a specialized input field for entering numeric values with built-in validation, formatting, and increment/decrement controls. Features include min/max validation, step increments, decimal precision control, number formatting, spinner buttons for adjustment, and keyboard support for value changes.

## Element
- **Tag**: `mosaik-numberbox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the input
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `prefix` - Prefix container
- `inner` - Inner wrapper
- `input` - The numeric input field
- `suffix` - Suffix container
- `spinner` - Up/down spinner controls

## Examples

### Basic number input
```html
<mosaik-numberbox label="Quantity" min="1" max="100" value="1"></mosaik-numberbox>
```

### With step and decimals
```html
<mosaik-numberbox label="Price" min="0" step="0.01" decimal-places="2"></mosaik-numberbox>
```

### Currency input
```html
<mosaik-numberbox label="Amount">
    <span slot="prefix">$</span>
</mosaik-numberbox>
```

# mosaik-number-counter

Number - The number element is used to display a number.

**Mixins:** Themeable, Variantable, Disableable

## Example

```html
<mosaik-number-counter from="0" to="100">
</mosaik-number-counter>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment` |           | `TextAlignment`                              | Gets or sets the `alignment` property.<br /><br />Possible values are:<br />* `center`<br />* `justify`<br />* `left`<br />* `right` |
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`  |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `duration`     | `duration`  |           | `CssTime`                                    | Gets or sets the `duration` property.            |
| `from`         | `from`      |           | `number`                                     | Gets or sets the `from` property.                |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `readonly`     | `readonly`  |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `to`           | `to`        |           | `number`                                     | Gets or sets the `to` property.                  |
| `variant`      | `variant`   |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `counter` | The counter part. |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--number-counter-font-family`          | String | The counter font family CSS custom property.     |
| `--number-counter-font-letter-spacing`  | String | The counter font letter spacing CSS custom property. |
| `--number-counter-font-line-height`     | String | The counter font line height CSS custom property. |
| `--number-counter-font-size`            | String | The counter font size CSS custom property.       |
| `--number-counter-font-text-decoration` | String | The counter font text decoration CSS custom property. |
| `--number-counter-font-text-transform`  | String | The counter font text transform CSS custom property. |
| `--number-counter-font-weight`          | String | The counter font weight CSS custom property.     |
| `--number-counter-gap`                  | String | The counter gap CSS custom property.             |
| `--number-counter-padding-bottom`       | String | The counter padding bottom CSS custom property.  |
| `--number-counter-padding-left`         | String | The counter padding left CSS custom property.    |
| `--number-counter-padding-right`        | String | The counter padding right CSS custom property.   |
| `--number-counter-padding-top`          | String | The counter padding top CSS custom property.     |
| `--number-counter-shadow`               | String | The counter shadow CSS custom property.          |
| `--number-counter-shadow-blur`          | String | The counter shadow blur CSS custom property.     |
| `--number-counter-shadow-color`         | String | The counter shadow color CSS custom property.    |
| `--number-counter-shadow-offset-x`      | String | The counter shadow offset x CSS custom property. |
| `--number-counter-shadow-offset-y`      | String | The counter shadow offset y CSS custom property. |
| `--number-counter-shadow-spread`        | String | The counter shadow spread CSS custom property.   |
| `--number-counter-transition-duration`  | String | The counter transition duration CSS custom property. |
| `--number-counter-transition-mode`      | String | The counter transition mode CSS custom property. |
| `--number-counter-transition-property`  | String | The counter transition property CSS custom property. |
| `--number-counter-translate`            | String | The counter translate CSS custom property.       |

# mosaik-number

Number - The number element is used to display a number.

**Mixins:** Themeable, Variantable, Disableable

## Example

Setting number via JavaScript:

```html
<mosaik-number id="myNumber"></mosaik-number>
<script>
  document.querySelector('#myNumber').number = 100;
</script>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment` |           | `TextAlignment`                              | Gets or sets the `alignment` property.<br /><br />Possible values are:<br />* `center`<br />* `justify`<br />* `left`<br />* `right` |
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`  |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `number`       |             |           | `number \| null \| undefined`                | Gets or sets the `number` property.              |
| `readonly`     | `readonly`  |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`   |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `number` | The number slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description      |
|----------|------------------|
| `number` | The number part. |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--number-font-family`          | String | The font family CSS custom property.          |
| `--number-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--number-font-line-height`     | String | The font line height CSS custom property.     |
| `--number-font-size`            | String | The font size CSS custom property.            |
| `--number-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--number-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--number-font-weight`          | String | The font weight CSS custom property.          |
| `--number-gap`                  | String | The gap CSS custom property.                  |
| `--number-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--number-padding-left`         | String | The padding left CSS custom property.         |
| `--number-padding-right`        | String | The padding right CSS custom property.        |
| `--number-padding-top`          | String | The padding top CSS custom property.          |
| `--number-shadow`               | String | The shadow CSS custom property.               |
| `--number-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--number-shadow-color`         | String | The shadow color CSS custom property.         |
| `--number-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--number-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--number-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--number-transition-duration`  | String | The transition duration CSS custom property.  |
| `--number-transition-mode`      | String | The transition mode CSS custom property.      |
| `--number-transition-property`  | String | The transition property CSS custom property.  |
| `--number-translate`            | String | The translate CSS custom property.            |

# mosaik-numberbox

Number Box - A specialized input control for entering and manipulating numerical values.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Appearanceable, Invalidable, Variantable, Labelable, Busyable, Focusable

## Example

```html
<mosaik-numberbox
  placeholder="Enter quantity"
  min="1"
  max="100"
  step="1"
  value="5">
</mosaik-numberbox>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`  | `autocomplete`  |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`     | `autofocus`     |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`       |                 |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `decimalPlaces` | `decimalPlaces` |           | `number`                                     | Gets or sets the `decimalPlaces` property.       |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`     |                 |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`       | `invalid`       |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isBusy`        | `is-busy`       |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isClearable`   | `is-clearable`  |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isFocused`     | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `keyboard`      | `keyboard`      |           | `NumberKeyboardMode`                         | Gets or sets the `keyboard` property.            |
| `label`         |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `max`           | `max`           |           | `number`                                     | Gets or sets the `max` property.                 |
| `min`           | `min`           |           | `number`                                     | Gets or sets the `min` property.                 |
| `name`          | `name`          |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`        |                 |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `pattern`       |                 |           | `string`                                     | Gets or sets the `pattern` property.             |
| `placeholder`   | `placeholder`   |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`      | `readonly`      |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`      | `required`      |           | `boolean`                                    | Gets or sets the `required` property.            |
| `spinPosition`  | `spinPosition`  |           | `UpDownSpinPosition`                         | Gets or sets the `spinPosition` property.        |
| `spinner`       | `spinner`       |           | `boolean`                                    | Gets or sets the `spinner` property.             |
| `state`         | `state`         |           | `InputState`                                 | Gets or sets the `state` property.               |
| `step`          | `step`          |           | `number`                                     | Gets or sets the `step` property.                |
| `textAlign`     | `textAlign`     |           | `TextAlignment`                              | Determines the text alignment of the component.  |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`         | `value`         |           | `number \| null`                             | Gets or sets the `value` property.               |
| `variant`       | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       |                                                  |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `blur`         |                        | Emitted when the element loses focus.            |
| `change`       | `PropertyChangedEvent` | Emitted when the value changes.                  |
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `focus`        |                        | Emitted when the element receives focus.         |
| `input`        | `PropertyChangedEvent` | Emitted when the value changes.                  |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the input field.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input field.            |

## CSS Shadow Parts

| Part               | Description                    |
|--------------------|--------------------------------|
| `clear`            | The clear part.                |
| `focusRing`        | The focus ring indicator.      |
| `inner`            | The inner container wrapper.   |
| `input`            | The number input field.        |
| `label`            | The floating label element.    |
| `prefix`           | The prefix content container.  |
| `progressRing`     | The progressRing part.         |
| `spinnerContainer` | The spinner buttons container. |
| `suffix`           | The suffix content container.  |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--number-box-background-color`          | Color  | The background color.                            |
| `--number-box-border-color`              | Color  | The border color.                                |
| `--number-box-border-radius`             | String | The border radius.                               |
| `--number-box-border-style`              | String | The border style.                                |
| `--number-box-border-width`              | String | The border width.                                |
| `--number-box-focus-ring-outward-offset` | String | The box focus ring outward offset CSS custom property. |
| `--number-box-font-family`               | String | The font family.                                 |
| `--number-box-font-letter-spacing`       | String | The box font letter spacing CSS custom property. |
| `--number-box-font-line-height`          | String | The box font line height CSS custom property.    |
| `--number-box-font-size`                 | String | The font size.                                   |
| `--number-box-font-text-decoration`      | String | The box font text decoration CSS custom property. |
| `--number-box-font-text-transform`       | String | The box font text transform CSS custom property. |
| `--number-box-font-weight`               | String | The font weight.                                 |
| `--number-box-foreground-color`          | Color  | The foreground color.                            |
| `--number-box-gap`                       | String | The gap between elements.                        |
| `--number-box-height`                    | String | The height.                                      |
| `--number-box-padding-bottom`            | String | The padding bottom.                              |
| `--number-box-padding-left`              | String | The padding left.                                |
| `--number-box-padding-right`             | String | The padding right.                               |
| `--number-box-padding-top`               | String | The padding top.                                 |
| `--number-box-shadow`                    | String | The shadow.                                      |
| `--number-box-shadow-blur`               | String | The box shadow blur CSS custom property.         |
| `--number-box-shadow-color`              | String | The box shadow color CSS custom property.        |
| `--number-box-shadow-offset-x`           | String | The box shadow offset x CSS custom property.     |
| `--number-box-shadow-offset-y`           | String | The box shadow offset y CSS custom property.     |
| `--number-box-shadow-spread`             | String | The box shadow spread CSS custom property.       |
| `--number-box-transition-duration`       | String | The transition duration.                         |
| `--number-box-transition-mode`           | String | The box transition mode CSS custom property.     |
| `--number-box-transition-property`       | String | The box transition property CSS custom property. |
| `--number-box-translate`                 | String | The box translate CSS custom property.           |

# mosaik-page-content

Page Content - The main content area of a page where the primary information or functionality is presented.

**Mixins:** Themeable, Insetable, Alignable

## Example

```html
<mosaik-page-content>
  <p>Main page content goes here.</p>
</mosaik-page-content>
```

## Properties

| Property              | Attribute              | Modifiers | Type                                         | Description                                      |
|-----------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`           |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fullWidth`           | `fullWidth`            |           | `boolean`                                    | Gets or sets the `fullWidth` property.<br />When true, the content expands to fill the full viewport width,<br />breaking out of the page's max-width constraint.<br /><br />The actual sizing is handled via CSS custom properties set by the parent PageElement. |
| `horizontalAlignment` | `horizontal-alignment` |           | `HorizontalAlignment`                        | Gets or sets the `horizontalAlignment` property.<br />The default value is `stretch`. |
| `inset`               | `inset`                |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `lang`                | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`           |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `verticalAlignment`   | `vertical-alignment`   |           | `VerticalAlignment`                          | Gets or sets the `verticalAlignment` property.<br />The default value is `stretch`. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for placing child elements.     |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-page-header

Page Header - The header section of a page that typically contains a title, navigation, and other relevant information.

**Mixins:** Themeable, Insetable

## Example

```html
<mosaik-page-header>
  <span slot="header">My Application</span>
</mosaik-page-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `inset`        | `inset`   |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The header content.                              |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

# PageMenuElement - Horizontal navigation menu for page headers

## Description
The PageMenuElement is a horizontal menu component typically used at the top of landing pages or application headers. It provides a structured layout for navigation links, branding, and action buttons with dedicated start, center, and end sections.

## Element
- **Tag**: `mosaik-pagemenu`
- **Category**: Layouts

## Slots
- **default** - The main content area of the page menu (typically navigation links)
- `start` - The start (left) section of the menu (typically logo or branding)
- `end` - The end (right) section of the menu (typically user actions or buttons)

## CSS Parts
- `root` - The root container element
- `start` - The start (left) section container
- `main` - The main (center) section container
- `end` - The end (right) section container

## CSS Custom Properties
(Inherit from theme-specific styling - no custom properties defined in the element)

## Dependencies
None

## Examples

### Basic page menu with logo and navigation
```html
<mosaik-pagemenu>
    <img slot="start" src="logo.png" alt="Brand" />
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</mosaik-pagemenu>
```

### With start branding, center nav, and end actions
```html
<mosaik-pagemenu>
    <div slot="start">
        <img src="logo.png" alt="Brand" />
    </div>
    
    <nav>
        <a href="/products">Products</a>
        <a href="/pricing">Pricing</a>
        <a href="/docs">Docs</a>
    </nav>
    
    <div slot="end">
        <mosaik-button label="Sign In" appearance="plain"></mosaik-button>
        <mosaik-button label="Sign Up" variant="primary"></mosaik-button>
    </div>
</mosaik-pagemenu>
```

### Responsive menu with breakpoint
```html
<mosaik-pagemenu breakpoint="768px">
    <mosaik-icon slot="start" data="menu-icon"></mosaik-icon>
    
    <nav>
        <a href="/">Home</a>
        <a href="/features">Features</a>
        <a href="/pricing">Pricing</a>
    </nav>
    
    <mosaik-avatar slot="end" src="user.jpg"></mosaik-avatar>
</mosaik-pagemenu>
```

### With dropdown menus
```html
<mosaik-pagemenu>
    <a slot="start" href="/">
        <img src="logo.svg" alt="Home" />
    </a>
    
    <nav>
        <mosaik-dropdown-button label="Products">
            <mosaik-menu>
                <mosaik-menu-item label="Product A"></mosaik-menu-item>
                <mosaik-menu-item label="Product B"></mosaik-menu-item>
            </mosaik-menu>
        </mosaik-dropdown-button>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
    
    <div slot="end">
        <mosaik-search-box placeholder="Search..."></mosaik-search-box>
        <mosaik-button icon="user-icon" appearance="plain"></mosaik-button>
    </div>
</mosaik-pagemenu>
```

## Properties

### breakpoint
- **Type**: `string`
- **Default**: `''`
- **Description**: CSS breakpoint value for responsive behavior (e.g., "768px", "1024px")

# mosaik-page-pre-content

Page Pre Content - An optional secondary content area within a page, often used to display additional details, features, or related information.

**Mixins:** Themeable, Insetable

## Example

```html
<mosaik-page-pre-content>
  <nav>Breadcrumb navigation</nav>
</mosaik-page-pre-content>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `inset`        | `inset`   |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-page-pre-header

Page Pre Header - An optional secondary header area within a page, often used to display additional details, features, or related information.

**Mixins:** Themeable, Insetable

## Example

```html
<mosaik-page-pre-header>
  <div>Alert: System maintenance scheduled tonight.</div>
</mosaik-page-pre-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `inset`        | `inset`   |           | `Inset \| Inset[] \| null`                   | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-page

Page - A semantic container element that represents a complete application view or document section.

Provides structured slots for organizing page layout with header, content, and footer areas.
Includes responsive breakpoint support for adaptive layouts across different screen sizes.

**Mixins:** Themeable

## Example

```html
<!-- Basic page layout -->
<mosaik-page>
  <header slot="header">
    <h1>Page Title</h1>
    <nav>Navigation</nav>
  </header>
  <main slot="content">
    <p>Main page content</p>
  </main>
  <footer slot="footer">
    <p>© 2024 Company</p>
  </footer>
</mosaik-page>

<!-- Page with responsive breakpoint -->
<mosaik-page breakpoint="tablet">
  <div slot="preHeader">Alert banner</div>
  <header slot="header">Page header</header>
  <nav slot="preContent">Breadcrumbs</nav>
  <article slot="content">Article content</article>
</mosaik-page>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `breakpoint`   | `breakpoint` |           | `string`                                     | Gets or sets the `breakpoint` property.          |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name         | Description                                      |
|--------------|--------------------------------------------------|
| `content`    | Main page content area                           |
| `footer`     | Page footer content (e.g., copyright, links)     |
| `header`     | Primary page header content (e.g., navigation, title, actions) |
| `preContent` | Content between header and main content (e.g., breadcrumbs, filters) |
| `preHeader`  | Content displayed before the main header (e.g., notifications, alerts) |
| `style`      | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                  | Description                                      |
|-----------------------|--------------------------------------------------|
| `scroll-panel-header` | Container for header sections that scroll with content |

## CSS Custom Properties

| Property           | Type   | Description                               |
|--------------------|--------|-------------------------------------------|
| `--page-gap`       | String | Spacing between page sections             |
| `--page-max-width` | String | Maximum width constraint for page content |
| `--page-padding`   | String | Padding applied to page container         |

# mosaik-pagemenu

Page Menu - A horizontal menu that typically contains navigation links and actions.
            It is commonly used in top of landing pages.

**Mixins:** Themeable

## Example

```html
<mosaik-pagemenu>
  <nav>
    <a href="/home">Home</a>
    <a href="/about">About</a>
  </nav>
</mosaik-pagemenu>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `breakpoint`   | `breakpoint` |           | `string`                                     | Gets or sets the `breakpoint` property.          |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The content of the page menu.                    |
| `end`   | The end content of the page menu.                |
| `start` | The start content of the page menu.              |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-paginator

Paginator - A component that provides pagination controls for navigating through large datasets.

**Mixins:** Themeable, Disableable, Variantable, Appearanceable

## Examples

Basic paginator:

```html
<mosaik-paginator total="100" size="20"></mosaik-paginator>
```

Paginator with page size selector:

```html
<mosaik-paginator
  total="250"
  size="50"
  show-sizes>
</mosaik-paginator>
```

## Properties

| Property               | Attribute              | Modifiers | Type                                         | Description                                      |
|------------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`           | `appearance`           |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`              |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `currentPage`          | `currentPage`          |           | `number`                                     | Gets or sets the `currentPage` property (0-based index). |
| `dir`                  | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`             |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasNextPage`          |                        | readonly  | `boolean`                                    | Gets a value indicating whether there is a next page. |
| `hasPreviousPage`      |                        | readonly  | `boolean`                                    | Gets a value indicating whether there is a previous page. |
| `intl`                 |                        | readonly  | `PaginatorElementIntl`                       | Returns the `intl` property.                     |
| `lang`                 | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `pageChanged`          |                        | readonly  | `IEventEmitter<IPaginatedEventDetail>`       | Called when the page changes.<br />Provides reference to the `IEventEmitter` as event argument. |
| `pageSizeChanged`      |                        | readonly  | `IEventEmitter<IPaginatedEventDetail>`       | Called when the page size changes.<br />Provides reference to the `IEventEmitter` as event argument. |
| `rangeEnd`             |                        | readonly  | `number`                                     | Gets the end index of the current page range (1-based). |
| `rangeStart`           |                        | readonly  | `number`                                     | Gets the start index of the current page range (1-based). |
| `showFirstLastButtons` | `showFirstLastButtons` |           | `boolean`                                    | Gets or sets the `showFirstLastButtons` property. |
| `showSizes`            | `showSizes`            |           | `boolean`                                    | Gets or sets the `showSizes` property.           |
| `size`                 | `size`                 |           | `number`                                     | Gets or sets the `size` property.                |
| `sizes`                | `sizes`                |           | `number[]`                                   | Gets or sets the `sizes` property.               |
| `themeName`            |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `total`                | `total`                |           | `number`                                     | Gets or sets the `total` property.               |
| `totalPages`           |                        | readonly  | `number`                                     | Gets the total number of pages.                  |
| `variant`              | `variant`              |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `changePageSize`   | `(newSize: number): void`                        | Changes the page size and resets to the first page.<br /><br />**newSize**: The new page size. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `goToFirstPage`    | `(): void`                                       | Navigates to the first page.                     |
| `goToLastPage`     | `(): void`                                       | Navigates to the last page.                      |
| `goToNextPage`     | `(): void`                                       | Navigates to the next page.                      |
| `goToPage`         | `(pageIndex: number): void`                      | Navigates to a specific page (0-based index).<br /><br />**pageIndex**: The page index to navigate to. |
| `goToPreviousPage` | `(): void`                                       | Navigates to the previous page.                  |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event             | Type                   | Description                                      |
|-------------------|------------------------|--------------------------------------------------|
| `changed`         | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`       | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`    | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `pageChanged`     | `PageChangedEvent`     | Fired when the current page changes.             |
| `pageSizeChanged` | `PageSizeChangedEvent` | Fired when the page size changes.                |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                      | Description                                   |
|---------------------------|-----------------------------------------------|
| `container`               | The main container element.                   |
| `first`                   | The first page button.                        |
| `last`                    | The last page button.                         |
| `next`                    | The next page button.                         |
| `page`                    | Individual page button.                       |
| `pages-container`         | The container for the page number buttons.    |
| `previous`                | The previous page button.                     |
| `range`                   | The range display showing current page range. |
| `range-container`         | The container for the page range display.     |
| `size-selector`           | The page size selector itself.                |
| `size-selector-container` | The container for the page size selector.     |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--paginator-background-color`     | Color  | The background-color property for the paginator. |
| `--paginator-font-family`          | String | The font-family property for the paginator text. |
| `--paginator-font-letter-spacing`  | String | The letter-spacing property for the paginator text. |
| `--paginator-font-line-height`     | String | The line-height property for the paginator text. |
| `--paginator-font-size`            | String | The font-size property for the paginator text.   |
| `--paginator-font-text-decoration` | String | The text-decoration property for the paginator text. |
| `--paginator-font-text-transform`  | String | The text-transform property for the paginator text. |
| `--paginator-font-weight`          | String | The font-weight property for the paginator text. |
| `--paginator-gap`                  | String | The gap property between paginator elements.     |
| `--paginator-padding-bottom`       | String | The padding bottom CSS custom property.          |
| `--paginator-padding-left`         | String | The padding left CSS custom property.            |
| `--paginator-padding-right`        | String | The padding right CSS custom property.           |
| `--paginator-padding-top`          | String | The padding top CSS custom property.             |
| `--paginator-shadow`               | String | The shadow property for the paginator.           |
| `--paginator-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--paginator-shadow-color`         | String | The shadow color CSS custom property.            |
| `--paginator-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--paginator-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--paginator-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--paginator-transition-duration`  | String | The transition duration CSS custom property.     |
| `--paginator-transition-mode`      | String | The transition mode CSS custom property.         |
| `--paginator-transition-property`  | String | The transition property CSS custom property.     |
| `--paginator-translate`            | String | The translate CSS custom property.               |

# PasswordBoxElement - Secure password input with visibility toggle

## Description
The Password Box component provides a secure interface for entering passwords and sensitive information. It masks input characters by default to maintain privacy and security, while offering a reveal/conceal toggle that allows users to temporarily view their input for verification. Essential for login forms, registration pages, and any interface requiring secure text input.

## Element
- **Tag**: `mosaik-passwordbox`
- **Category**: Inputs

## Slots
- `prefix` - Content placed before the input field
- `suffix` - Content placed after the input field

## CSS Parts
- `focusRing` - The focus ring indicator
- `prefix` - The prefix content container
- `inner` - The inner container wrapper
- `label` - The floating label element
- `input` - The password input field
- `suffix` - The suffix content container
- `revealButton` - The password reveal/conceal button

## CSS Custom Properties
- `--password-box-background-color` - Background color
- `--password-box-border-color` - Border color
- `--password-box-border-radius` - Border radius
- `--password-box-border-style` - Border style
- `--password-box-border-width` - Border width
- `--password-box-font-family` - Font family
- `--password-box-font-size` - Font size
- `--password-box-font-weight` - Font weight
- `--password-box-foreground-color` - Text color
- `--password-box-gap` - Gap between elements
- `--password-box-height` - Height
- `--password-box-padding-top/right/bottom/left` - Padding
- `--password-box-shadow` - Shadow effect
- `--password-box-transition-duration` - Transition duration
- `--password-box-width` - Width

## Dependencies
- `mosaik-focus-ring` - Focus indication
- `mosaik-button` - Reveal/conceal button

## Events
- `cleared` - Fired when the input value is cleared
- `passwordRevealed` - Fired when the password is shown
- `passwordConcealed` - Fired when the password is hidden

## Examples

### Basic password input
```html
<mosaik-passwordbox 
    label="Password" 
    placeholder="Enter password" 
    required>
</mosaik-passwordbox>
```

### With reveal button
```html
<mosaik-passwordbox 
    label="Password" 
    can-reveal="true">
</mosaik-passwordbox>
```

### Password confirmation
```html
<mosaik-passwordbox 
    label="New Password" 
    id="newPassword">
</mosaik-passwordbox>

<mosaik-passwordbox 
    label="Confirm Password" 
    id="confirmPassword">
</mosaik-passwordbox>
```

# mosaik-passwordbox

Password Box - A secure input control designed for password entry with visibility toggle functionality.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Invalidable, Variantable, Labelable, Appearanceable, Focusable

## Example

```html
<mosaik-passwordbox
  placeholder="Enter your password"
  required>
</mosaik-passwordbox>
```

## Properties

| Property            | Attribute      | Modifiers | Type                                           | Description                                      |
|---------------------|----------------|-----------|------------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance`   |           | `Appearance`                                   | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`      | `autocomplete` |           | `boolean`                                      | Gets or sets the `autocomplete` property.        |
| `autofocus`         |                |           | `boolean`                                      | Gets or sets the `autofocus` property.           |
| `changed`           |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`   | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`           |                |           | `IEventEmitter<IEventDetail>`                  | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`         |                | readonly  | `IEventEmitter<void>`                          | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`          |           | `FlowDirection`                                | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`     |           | `boolean`                                      | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                | readonly  | `IEventEmitter<void>`                          | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`         |                |           | `InputFormatterFn \| null`                     | Gets or sets the `formatter` property.           |
| `invalid`           | `invalid`      |           | `boolean`                                      | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`       | `is-clearable` |           | `boolean`                                      | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isFocused`         | `is-focused`   |           | `boolean`                                      | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isReveal`          | `isReveal`     |           | `boolean`                                      | Returns the `isReveal` property.                 |
| `label`             |                |           | `string`                                       | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`         |           | `string`                                       | The lang property indicates the language of the element's content. |
| `name`              | `name`         |           | `string`                                       | Gets or sets the `name` property.                |
| `parser`            |                |           | `InputParserFn \| null`                        | Gets or sets the `parser` property.              |
| `passwordConcealed` |                | readonly  | `IEventEmitter<IPasswordConcealedEventDetail>` | Called when the password is hidden.<br />Provides reference to `IPasswordConcealedEventDetail` as event detail. |
| `passwordRevealed`  |                | readonly  | `IEventEmitter<IPasswordRevealedEventDetail>`  | Called when the password is shown.<br />Provides reference to `IPasswordRevealedEventDetail` as event detail. |
| `pattern`           | `pattern`      |           | `string`                                       | Gets or sets the `pattern` property.             |
| `placeholder`       | `placeholder`  |           | `string`                                       | Gets or sets the `placeholder` property.         |
| `readonly`          | `readonly`     |           | `boolean`                                      | Gets or sets the `readonly` property.            |
| `required`          | `required`     |           | `boolean`                                      | Gets or sets the `required` property.            |
| `revealable`        | `revealable`   |           | `boolean`                                      | Gets or sets the `revealable` property.          |
| `state`             | `state`        |           | `InputState`                                   | Gets or sets the `state` property.               |
| `textAlign`         | `textAlign`    |           | `TextAlignment`                                | Determines the text alignment of the component.  |
| `themeName`         |                |           | `string`                                       | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`        |           | `string`                                       | Gets or sets the `value` property.               |
| `variant`           | `variant`      |           | `Variant`                                      | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `conceal`               | `(): void`                                       | Hides the password.                              |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       |                                                  |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `reveal`                | `(): void`                                       | Shows the password.                              |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Emitted when any attribute changes before update |
| `cleared`           | `ClearedEvent`           | Fired when the input value is cleared.           |
| `connected`         | `ConnectedEvent`         | Emitted when the element is connected to the DOM |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `passwordConcealed` | `PasswordConcealedEvent` | Fired when the password is hidden.               |
| `passwordRevealed`  | `PasswordRevealedEvent`  | Fired when the password is shown.                |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the input field.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input field.            |

## CSS Shadow Parts

| Part        | Description                   |
|-------------|-------------------------------|
| `clear`     | The clear part.               |
| `focusRing` | The focus ring indicator.     |
| `inner`     | The inner container wrapper.  |
| `input`     | The password input field.     |
| `label`     | The floating label element.   |
| `prefix`    | The prefix content container. |
| `showHide`  | The showHide part.            |
| `suffix`    | The suffix content container. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--password-box-background-color`     | Color  | The background color.                            |
| `--password-box-border-color`         | Color  | The border color.                                |
| `--password-box-border-radius`        | String | The border radius.                               |
| `--password-box-border-style`         | String | The border style.                                |
| `--password-box-border-width`         | String | The border width.                                |
| `--password-box-focus-ring-width`     | String | The box focus ring width CSS custom property.    |
| `--password-box-font-family`          | String | The font family.                                 |
| `--password-box-font-letter-spacing`  | String | The box font letter spacing CSS custom property. |
| `--password-box-font-line-height`     | String | The box font line height CSS custom property.    |
| `--password-box-font-size`            | String | The font size.                                   |
| `--password-box-font-text-decoration` | String | The box font text decoration CSS custom property. |
| `--password-box-font-text-transform`  | String | The box font text transform CSS custom property. |
| `--password-box-font-weight`          | String | The font weight.                                 |
| `--password-box-foreground-color`     | Color  | The foreground color.                            |
| `--password-box-gap`                  | String | The gap between elements.                        |
| `--password-box-height`               | String | The height.                                      |
| `--password-box-padding-bottom`       | String | The padding bottom.                              |
| `--password-box-padding-left`         | String | The padding left.                                |
| `--password-box-padding-right`        | String | The padding right.                               |
| `--password-box-padding-top`          | String | The padding top.                                 |
| `--password-box-shadow`               | String | The shadow.                                      |
| `--password-box-shadow-blur`          | String | The box shadow blur CSS custom property.         |
| `--password-box-shadow-color`         | String | The box shadow color CSS custom property.        |
| `--password-box-shadow-offset-x`      | String | The box shadow offset x CSS custom property.     |
| `--password-box-shadow-offset-y`      | String | The box shadow offset y CSS custom property.     |
| `--password-box-shadow-spread`        | String | The box shadow spread CSS custom property.       |
| `--password-box-transition-duration`  | String | The transition duration.                         |
| `--password-box-transition-mode`      | String | The box transition mode CSS custom property.     |
| `--password-box-transition-property`  | String | The box transition property CSS custom property. |
| `--password-box-translate`            | String | The box translate CSS custom property.           |

# mosaik-pattern

Pattern - A component for generating random patterns with a mask effect based on mouse position.

**Mixins:** Themeable, Variantable, Disableable, Attachable

## Example

```html
<mosaik-pattern></mosaik-pattern>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`      |            | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `for`          | `for`      |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `mouseX`       |            |           | `number`                                     | Gets or sets the `mouseX` property.              |
| `mouseY`       |            |           | `number`                                     | Gets or sets the `mouseY` property.              |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`  |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `detach`        | `(): void`                                       | Detaches the element from its current control.   |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                        |
|--------|------------------------------------|
| `root` | The root container of the pattern. |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--pattern-background-color`     | Color  | The background color of the pattern.          |
| `--pattern-font-family`          | String | The font family CSS custom property.          |
| `--pattern-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--pattern-font-line-height`     | String | The font line height CSS custom property.     |
| `--pattern-font-size`            | String | The font size CSS custom property.            |
| `--pattern-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--pattern-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--pattern-font-weight`          | String | The font weight CSS custom property.          |
| `--pattern-gap`                  | String | The gap CSS custom property.                  |
| `--pattern-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--pattern-padding-left`         | String | The padding left CSS custom property.         |
| `--pattern-padding-right`        | String | The padding right CSS custom property.        |
| `--pattern-padding-top`          | String | The padding top CSS custom property.          |
| `--pattern-shadow`               | String | The shadow CSS custom property.               |
| `--pattern-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--pattern-shadow-color`         | String | The shadow color CSS custom property.         |
| `--pattern-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--pattern-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--pattern-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--pattern-transition-duration`  | String | The transition duration CSS custom property.  |
| `--pattern-transition-mode`      | String | The transition mode CSS custom property.      |
| `--pattern-transition-property`  | String | The transition property CSS custom property.  |
| `--pattern-translate`            | String | The translate CSS custom property.            |

# mosaik-persona

Persona - A visual representation of an individual user or character, typically displayed as an avatar along with additional information such as name, role, or status.
Personas are commonly used to provide context and personalization in user interfaces.

**Mixins:** Themeable, Orientable, ContentAlignable, Sizeable, Appearanceable, Variantable, Disableable

## Example

```html
<!-- Basic persona (set text properties via JavaScript) -->
<mosaik-persona></mosaik-persona>

<!-- Persona with online presence indicator -->
<mosaik-persona presence="online"></mosaik-persona>

<!-- Horizontal persona layout with busy status -->
<mosaik-persona orientation="horizontal" presence="busy"></mosaik-persona>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayMode`                | `displayMode`                  |           | `"text" \| "image" \| "icon" \| null`        | DisplayMode defines how the avatar is displayed.<br />By Default it will show image if src is provided, otherwise icon if icon is provided, otherwise text. |
| `hasBadge`                   | `hasBadge`                     | readonly  | `boolean`                                    | Returns the `hasBadge` property.                 |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Icon is used to display an icon.<br />By Default it will show nothing.<br /><br />The icon is only used if no image is provided. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `presence`                   |                                |           | `PersonaPresence`                            | The presence Badge to display.                   |
| `primaryText`                |                                |           | `string`                                     | The first line of text in the Persona, larger than the rest of the lines. |
| `quaternaryText`             |                                |           | `string`                                     | The fourth line of text in the Persona.          |
| `secondaryText`              |                                |           | `string`                                     | The second line of text in the Persona.          |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `src`                        |                                |           | `string`                                     | Src is used to display an image.<br />By Default it will show nothing. |
| `tertiaryText`               |                                |           | `string`                                     | The third line of text in the Persona.           |
| `text`                       |                                |           | `string`                                     | Text is used to display the initials.<br />By Default it will display the first letter of each word.<br /><br />The text is only used if no image or icon is provided. |
| `textAccessor`               |                                |           | `(value: string) => string`                  | TextAccessor is used to customize the text.<br />By Default it will display the first letter of each word.<br /><br />The text accessor is only used if no image or icon is provided. |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method               | Type                                             | Description                                      |
|----------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`         | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `changeTextAccessor` | `(accessor: (value: string): string) => void`    |                                                  |
| `emit`               | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`                | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                 | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`      | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content for avatar display (overrides automatic text/icon generation) |
| `badge` | Status indicator or notification badge positioned on the avatar |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part             | Description                                      |
|------------------|--------------------------------------------------|
| `avatar`         | The avatar part of persona.                      |
| `backplate`      | The circular background container for all avatar content |
| `icon`           | The icon part.                                   |
| `presence`       | The presence part of persona.                    |
| `primaryText`    | The text part of persona.                        |
| `quaternaryText` | The text part of persona.                        |
| `root`           | The root part of persona.                        |
| `secondaryText`  | The text part of persona.                        |
| `tertiaryText`   | The text part of persona.                        |
| `text`           | The text/initials container for text-based avatars |

## CSS Custom Properties

| Property                          | Type   | Description                                     |
|-----------------------------------|--------|-------------------------------------------------|
| `--avatar-background-color`       | Color  | Background color for text/icon avatars          |
| `--avatar-badge-gap`              | String | The badge gap CSS custom property.              |
| `--avatar-badge-horizontal-align` | String | The badge horizontal align CSS custom property. |
| `--avatar-badge-radius`           | String | The badge radius CSS custom property.           |
| `--avatar-badge-vertical-align`   | String | The badge vertical align CSS custom property.   |
| `--avatar-border-color`           | String | The border color CSS custom property.           |
| `--avatar-border-radius`          | String | Border radius (typically 50% for circular)      |
| `--avatar-border-style`           | String | The border style CSS custom property.           |
| `--avatar-border-width`           | String | The border width CSS custom property.           |
| `--avatar-diameter`               | String | The diameter CSS custom property.               |
| `--avatar-font-family`            | String | The font family CSS custom property.            |
| `--avatar-font-letter-spacing`    | String | The font letter spacing CSS custom property.    |
| `--avatar-font-line-height`       | String | The font line height CSS custom property.       |
| `--avatar-font-size`              | String | Font size for initials text                     |
| `--avatar-font-text-decoration`   | String | The font text decoration CSS custom property.   |
| `--avatar-font-text-transform`    | String | The font text transform CSS custom property.    |
| `--avatar-font-weight`            | String | Font weight for initials text                   |
| `--avatar-foreground-color`       | Color  | Text and icon color                             |
| `--avatar-gap`                    | String | The gap CSS custom property.                    |
| `--avatar-offset`                 | String | The offset CSS custom property.                 |
| `--avatar-padding-bottom`         | String | The padding bottom CSS custom property.         |
| `--avatar-padding-left`           | String | The padding left CSS custom property.           |
| `--avatar-padding-right`          | String | The padding right CSS custom property.          |
| `--avatar-padding-top`            | String | The padding top CSS custom property.            |
| `--avatar-shadow`                 | String | The shadow CSS custom property.                 |
| `--avatar-shadow-blur`            | String | The shadow blur CSS custom property.            |
| `--avatar-shadow-color`           | String | The shadow color CSS custom property.           |
| `--avatar-shadow-offset-x`        | String | The shadow offset x CSS custom property.        |
| `--avatar-shadow-offset-y`        | String | The shadow offset y CSS custom property.        |
| `--avatar-shadow-spread`          | String | The shadow spread CSS custom property.          |
| `--avatar-transition-duration`    | String | The transition duration CSS custom property.    |
| `--avatar-transition-mode`        | String | The transition mode CSS custom property.        |
| `--avatar-transition-property`    | String | The transition property CSS custom property.    |
| `--avatar-translate`              | String | The translate CSS custom property.              |
| `--persona-background-color`      | String | The background color CSS custom property.       |
| `--persona-border-color`          | String | The border color CSS custom property.           |
| `--persona-border-radius`         | String | The border radius CSS custom property.          |
| `--persona-border-style`          | String | The border style CSS custom property.           |
| `--persona-border-width`          | String | The border width CSS custom property.           |
| `--persona-font-family`           | String | The font family CSS custom property.            |
| `--persona-font-letter-spacing`   | String | The font letter spacing CSS custom property.    |
| `--persona-font-line-height`      | String | The font line height CSS custom property.       |
| `--persona-font-size`             | String | The font size CSS custom property.              |
| `--persona-font-text-decoration`  | String | The font text decoration CSS custom property.   |
| `--persona-font-text-transform`   | String | The font text transform CSS custom property.    |
| `--persona-font-weight`           | String | The font weight CSS custom property.            |
| `--persona-foreground-color`      | String | The foreground color CSS custom property.       |
| `--persona-gap`                   | String | The gap CSS custom property.                    |
| `--persona-padding-bottom`        | String | The padding bottom CSS custom property.         |
| `--persona-padding-left`          | String | The padding left CSS custom property.           |
| `--persona-padding-right`         | String | The padding right CSS custom property.          |
| `--persona-padding-top`           | String | The padding top CSS custom property.            |
| `--persona-shadow`                | String | The shadow CSS custom property.                 |
| `--persona-shadow-blur`           | String | The shadow blur CSS custom property.            |
| `--persona-shadow-color`          | String | The shadow color CSS custom property.           |
| `--persona-shadow-offset-x`       | String | The shadow offset x CSS custom property.        |
| `--persona-shadow-offset-y`       | String | The shadow offset y CSS custom property.        |
| `--persona-shadow-spread`         | String | The shadow spread CSS custom property.          |
| `--persona-transition-duration`   | String | The transition duration CSS custom property.    |
| `--persona-transition-mode`       | String | The transition mode CSS custom property.        |
| `--persona-transition-property`   | String | The transition property CSS custom property.    |
| `--persona-translate`             | String | The translate CSS custom property.              |

# mosaik-perspective

Perspective - A component that manages the perspective effect for 3D transformations.

**Mixins:** Themeable, Disableable, Attachable

## Examples

Perspective effect attached to a card element:

```html
<div id="my-card" style="width: 200px; height: 200px; background: #eee;">3D Content</div>
<mosaik-perspective for="my-card"></mosaik-perspective>
```

Perspective with custom factor and duration:

```html
<div id="hero-image" style="width: 400px; height: 200px;">Hero Image</div>
<mosaik-perspective for="hero-image" factor="12" duration="400"></mosaik-perspective>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `duration`     | `duration` |           | `CssTime`                                    | Gets or sets the `duration` property.            |
| `factor`       | `factor`   |           | `number`                                     | Gets or sets the `factor` property.              |
| `for`          | `for`      |           | `string \| null`                             | Gets or sets the `for` property.<br />The `for` property reflects the value of the `for` attribute, which is the ID of the element's associated control. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method            | Type                                             | Description                                      |
|-------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`      | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`          | `(control: string \| HTMLElement): void`         | **control**: The control or id to attach.        |
| `detach`          | `(): void`                                       |                                                  |
| `emit`            | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`             | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`              | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate` | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `requestUpdate`   | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                   |
|--------------------------------------|--------|-----------------------------------------------|
| `--perspective-font-family`          | String | The font family CSS custom property.          |
| `--perspective-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--perspective-font-line-height`     | String | The font line height CSS custom property.     |
| `--perspective-font-size`            | String | The font size CSS custom property.            |
| `--perspective-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--perspective-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--perspective-font-weight`          | String | The font weight CSS custom property.          |
| `--perspective-gap`                  | String | The gap CSS custom property.                  |
| `--perspective-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--perspective-padding-left`         | String | The padding left CSS custom property.         |
| `--perspective-padding-right`        | String | The padding right CSS custom property.        |
| `--perspective-padding-top`          | String | The padding top CSS custom property.          |
| `--perspective-shadow`               | String | The shadow CSS custom property.               |
| `--perspective-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--perspective-shadow-color`         | String | The shadow color CSS custom property.         |
| `--perspective-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--perspective-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--perspective-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--perspective-transition-duration`  | String | The transition duration CSS custom property.  |
| `--perspective-transition-mode`      | String | The transition mode CSS custom property.      |
| `--perspective-transition-property`  | String | The transition property CSS custom property.  |
| `--perspective-translate`            | String | The translate CSS custom property.            |

# PinBoxElement - PIN code or verification code input

## Description
The PinBox component provides a specialized input for entering PIN codes, verification codes, or OTP (one-time passwords). Features include individual digit cells, auto-focus progression, paste support for full codes, customizable length, masked/visible modes, and keyboard navigation between cells.

## Element
- **Tag**: `mosaik-pinbox`
- **Category**: Inputs

## Slots
None - internally renders digit input cells

## CSS Parts
- `container` - The main container
- `cell` - Individual digit cell
- `focusRing` - Focus indicator

## Examples

### Basic PIN input
```html
<mosaik-pinbox label="Enter PIN" length="4"></mosaik-pinbox>
```

### OTP verification
```html
<mosaik-pinbox 
    label="Verification Code" 
    length="6" 
    type="number">
</mosaik-pinbox>
```

### Masked PIN
```html
<mosaik-pinbox 
    label="Security PIN" 
    length="6" 
    masked="true">
</mosaik-pinbox>
```

### With event handling
```html
<mosaik-pinbox 
    id="otp" 
    label="Enter OTP" 
    length="6">
</mosaik-pinbox>

<script>
    document.getElementById('otp').addEventListener('complete', (e) => {
        console.log('PIN entered:', e.detail.value);
        // Verify PIN
    });
</script>
```

# mosaik-pinbox

Pin Box - A secure multi-field input control for entering PIN codes and verification numbers.

**Mixins:** Themeable, Disableable, Invalidable, Valueable, Variantable, Appearanceable, Focusable

## Examples

```html
<mosaik-pinbox
  length="6"
  mode="password"
  placeholder="•">
</mosaik-pinbox>
```

```html
<mosaik-pinbox
  length="4"
  mode="text"
  pattern="[0-9]"
  required>
</mosaik-pinbox>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete` | `autocomplete` |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`    |                |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |                |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`      | `invalid`      |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isFocused`    | `is-focused`   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `length`       | `length`       |           | `number`                                     | Gets or sets the `length` property.              |
| `mode`         | `mode`         |           | `PinMode`                                    | Gets or sets the `mode` property.                |
| `name`         | `name`         |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`       |                |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `pattern`      | `pattern`      |           | `string`                                     | Gets or sets the `pattern` property.             |
| `placeholder`  | `placeholder`  |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`     | `readonly`     |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`     | `required`     |           | `boolean`                                    | Gets or sets the `required` property.            |
| `state`        | `state`        |           | `InputState`                                 | Gets or sets the `state` property.               |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`        |           | `string`                                     | Gets or sets the `value` property.               |
| `variant`      | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `blur`                  | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(): void`                                       |                                                  |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       |                                                  |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                    |
|-------------|------------------------------------------------|
| `focusRing` | The focus ring indicator for each input field. |
| `input`     | Individual PIN digit input fields.             |
| `root`      | The root container for all PIN input fields.   |

## CSS Custom Properties

| Property                         | Type   | Description                                      |
|----------------------------------|--------|--------------------------------------------------|
| `--pin-box-background-color`     | Color  | The background color.                            |
| `--pin-box-border-color`         | Color  | The border color.                                |
| `--pin-box-border-radius`        | String | The border radius.                               |
| `--pin-box-border-style`         | String | The border style.                                |
| `--pin-box-border-width`         | String | The border width.                                |
| `--pin-box-font-family`          | String | The font family.                                 |
| `--pin-box-font-letter-spacing`  | String | The box font letter spacing CSS custom property. |
| `--pin-box-font-line-height`     | String | The box font line height CSS custom property.    |
| `--pin-box-font-size`            | String | The font size.                                   |
| `--pin-box-font-text-decoration` | String | The box font text decoration CSS custom property. |
| `--pin-box-font-text-transform`  | String | The box font text transform CSS custom property. |
| `--pin-box-font-weight`          | String | The font weight.                                 |
| `--pin-box-foreground-color`     | Color  | The foreground color.                            |
| `--pin-box-gap`                  | String | The gap between input fields.                    |
| `--pin-box-height`               | String | The height.                                      |
| `--pin-box-padding-bottom`       | String | The padding bottom.                              |
| `--pin-box-padding-left`         | String | The padding left.                                |
| `--pin-box-padding-right`        | String | The padding right.                               |
| `--pin-box-padding-top`          | String | The padding top.                                 |
| `--pin-box-shadow`               | String | The shadow.                                      |
| `--pin-box-shadow-blur`          | String | The box shadow blur CSS custom property.         |
| `--pin-box-shadow-color`         | String | The box shadow color CSS custom property.        |
| `--pin-box-shadow-offset-x`      | String | The box shadow offset x CSS custom property.     |
| `--pin-box-shadow-offset-y`      | String | The box shadow offset y CSS custom property.     |
| `--pin-box-shadow-spread`        | String | The box shadow spread CSS custom property.       |
| `--pin-box-transition-duration`  | String | The transition duration.                         |
| `--pin-box-transition-mode`      | String | The box transition mode CSS custom property.     |
| `--pin-box-transition-property`  | String | The box transition property CSS custom property. |
| `--pin-box-translate`            | String | The box translate CSS custom property.           |

# mosaik-pip

Pip - A compact, round visual indicator that displays a single digit, letter, symbol, or icon.

**Mixins:** Themeable, Appearanceable, Variantable, Sizeable, Disableable

## Examples

Text pip with a number:

```html
<mosaik-pip text="1"></mosaik-pip>
```

Text pip with a letter:

```html
<mosaik-pip text="A" variant="primary" appearance="solid"></mosaik-pip>
```

Icon pip (set icon via JavaScript):

```html
<mosaik-pip id="iconPip" variant="success"></mosaik-pip>
<script>
  document.querySelector('#iconPip').icon = 'M12 2L2 7l10 5 10-5-10-5z';
</script>
```

Symbol pip:

```html
<mosaik-pip text="✓" appearance="soft" variant="success"></mosaik-pip>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |              |           | `string`                                     | Gets or sets the icon SVG path data displayed inside the pip.<br />When set, the icon takes precedence over `text`.<br />The default value is an empty string (no icon). |
| `iconSize`     | `icon-size`  |           | `Size \| null`                               | Gets or sets the size of the icon inside the pip.<br />When `null`, the icon size adapts to the pip's own size.<br />The default value is `null`. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `text`         | `text`       |           | `string`                                     | Gets or sets the text content displayed inside the pip.<br />Can be a digit, letter, or symbol (e.g., `"1"`, `"A"`, `"✓"`).<br />Ignored when `icon` is set.<br />The default value is an empty string. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description                                      |
|---------|--------------------------------------------------|
| `icon`  | The icon rendered inside the pip when `icon` is set |
| `label` | The text content rendered inside the pip         |

## CSS Custom Properties

| Property                     | Type   | Description                                      |
|------------------------------|--------|--------------------------------------------------|
| `--pip-background-color`     | Color  | The background color of the pip                  |
| `--pip-border-color`         | String | The border color of the pip                      |
| `--pip-border-radius`        | String | The border radius CSS custom property.           |
| `--pip-border-style`         | String | The border style of the pip                      |
| `--pip-border-width`         | String | The border width of the pip                      |
| `--pip-font-family`          | String | The font family for the pip label                |
| `--pip-font-letter-spacing`  | String | The letter spacing for the pip label             |
| `--pip-font-line-height`     | String | The line height for the pip label                |
| `--pip-font-size`            | String | The font size for the pip label                  |
| `--pip-font-text-decoration` | String | The text decoration for the pip label            |
| `--pip-font-text-transform`  | String | The text transform for the pip label             |
| `--pip-font-weight`          | String | The font weight for the pip label                |
| `--pip-foreground-color`     | Color  | The text and icon color of the pip               |
| `--pip-gap`                  | String | The gap inside the pip                           |
| `--pip-height`               | String | The height and width of the pip                  |
| `--pip-padding-bottom`       | String | The bottom padding inside the pip                |
| `--pip-padding-left`         | String | The left padding inside the pip                  |
| `--pip-padding-right`        | String | The right padding inside the pip                 |
| `--pip-padding-top`          | String | The top padding inside the pip                   |
| `--pip-shadow`               | String | The shadow CSS custom property.                  |
| `--pip-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--pip-shadow-color`         | String | The shadow color CSS custom property.            |
| `--pip-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--pip-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--pip-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--pip-transition-duration`  | String | The transition duration                          |
| `--pip-transition-mode`      | String | The transition timing function                   |
| `--pip-transition-property`  | String | The CSS properties to animate during transitions |
| `--pip-translate`            | String | The translate CSS custom property.               |

# mosaik-placeholder

Placeholder - A dimensional container for empty states, drag targets, and layout reservations.

**Mixins:** Themeable, Dimensionable

## Examples

Basic placeholder with dimensions:

```html
<mosaik-placeholder width="300px" height="200px"></mosaik-placeholder>
```

Image upload placeholder:

```html
<mosaik-placeholder width="400px" height="300px">
  <p>Drag image here or click to upload</p>
</mosaik-placeholder>
```

Drag-and-drop target:

```html
<mosaik-placeholder id="dropZone" width="100%" height="150px">
  <p>Drop files here</p>
</mosaik-placeholder>
<script>
  const dropZone = document.querySelector('#dropZone');
  dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.style.borderStyle = 'solid';
  });
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    // Handle file drop
  });
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `height`       | `height`  |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`        | `width`   |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot for placeholder content (text, icons, or instructions) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                  |
|--------------------------------------|--------|----------------------------------------------|
| `--placeholder-background-color`     | String | Background color of the placeholder area     |
| `--placeholder-border-color`         | String | Border color of the placeholder outline      |
| `--placeholder-border-radius`        | String | Corner rounding radius                       |
| `--placeholder-border-style`         | String | Border line style (typically dashed)         |
| `--placeholder-border-width`         | String | Border thickness                             |
| `--placeholder-font-family`          | String | Font family for placeholder text             |
| `--placeholder-font-letter-spacing`  | String | Letter spacing for placeholder text          |
| `--placeholder-font-line-height`     | String | Line height for placeholder text             |
| `--placeholder-font-size`            | String | Font size for placeholder text               |
| `--placeholder-font-text-decoration` | String | Text decoration style                        |
| `--placeholder-font-text-transform`  | String | Text transformation style                    |
| `--placeholder-font-weight`          | String | Font weight for placeholder text             |
| `--placeholder-gap`                  | String | Spacing between placeholder content elements |
| `--placeholder-padding-bottom`       | String | Bottom padding inside the placeholder        |
| `--placeholder-padding-left`         | String | Left padding inside the placeholder          |
| `--placeholder-padding-right`        | String | Right padding inside the placeholder         |
| `--placeholder-padding-top`          | String | Top padding inside the placeholder           |
| `--placeholder-shadow`               | String | The shadow CSS custom property.              |
| `--placeholder-shadow-blur`          | String | The shadow blur CSS custom property.         |
| `--placeholder-shadow-color`         | String | The shadow color CSS custom property.        |
| `--placeholder-shadow-offset-x`      | String | The shadow offset x CSS custom property.     |
| `--placeholder-shadow-offset-y`      | String | The shadow offset y CSS custom property.     |
| `--placeholder-shadow-spread`        | String | The shadow spread CSS custom property.       |
| `--placeholder-transition-duration`  | String | Duration of visual transitions               |
| `--placeholder-transition-mode`      | String | Timing function for transitions              |
| `--placeholder-transition-property`  | String | CSS properties to transition                 |
| `--placeholder-translate`            | String | Transform translation value                  |

# mosaik-popup

Popup - A versatile floating container that appears relative to an anchor element.

**Mixins:** Themeable, Animatable, Attachable, Slottable, Elevatable, Variantable, Appearanceable, Disableable, Openable, Closeable

## Example

```html
<!-- Basic popup with click trigger -->
<mosaik-popup trigger="click">
  <mosaik-button>Open Popup</mosaik-button>
  <div slot="content">
    <p>Popup content here</p>
  </div>
</mosaik-popup>

<!-- Modal popup with backdrop -->
<mosaik-popup has-backdrop trap-focus press-escape-to-close>
  <mosaik-button>Open Modal</mosaik-button>
  <div slot="content">
    <h3 slot="header">Dialog Title</h3>
    <p>Modal content</p>
    <div slot="footer">
      <mosaik-button>Close</mosaik-button>
    </div>
  </div>
</mosaik-popup>

<!-- Hover popup with delay -->
<mosaik-popup trigger="hover" show-delay="200" hide-delay="100" placement="top">
  <mosaik-button>Hover me</mosaik-button>
  <div slot="content">
    <p>This appears on hover</p>
  </div>
</mosaik-popup>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `anchorElement`       |                       | readonly  | `HTMLElement \| null`                        | Gets the anchor element for the popup.           |
| `animationTarget`     |                       | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `appearance`          | `appearance`          |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    | Gets or sets the `clickOutsideToClose` property. |
| `closeOnScroll`       | `closeOnScroll`       |           | `boolean`                                    | Gets or sets the `closeOnScroll` property.       |
| `closeable`           | `closeable`           |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`             |                       | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`            | `disabled`            |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `distance`            | `distance`            |           | `number`                                     | Gets or sets the `distance` property (horizontal offset from anchor). |
| `elevation`           | `elevation`           |           | `ElevationWeight`                            | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `enter`               | `enter`               |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`                | `exit`                |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `flip`                | `flip`                |           | `boolean`                                    | Gets or sets the `flip` property.                |
| `for`                 | `for`                 |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    | Gets or sets the `hasBackdrop` property.         |
| `hasSlottedContent`   |                       | readonly  | `boolean`                                    | Gets whether slotted content is projected into the popup. |
| `hideDelay`           | `hideDelay`           |           | `number`                                     | Gets or sets the `hideDelay` property.           |
| `interactive`         | `interactive`         |           | `boolean`                                    | Gets or sets the `interactive` property.         |
| `isFloatingActive`    |                       | readonly  | `boolean`                                    | Gets whether the floating element should be active. |
| `isOpen`              | `isOpen`              |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `placement`           | `placement`           |           | `Placement`                                  | Gets or sets the `placement` property.           |
| `placements`          | `placements`          |           | `Placement[]`                                | Gets or sets the `placements` property (fallback placements). |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    | Gets or sets the `pressEscapeToClose` property.  |
| `shift`               | `shift`               |           | `boolean`                                    | Gets or sets the `shift` property.               |
| `showDelay`           | `showDelay`           |           | `number`                                     | Gets or sets the `showDelay` property.           |
| `skidding`            | `skidding`            |           | `number`                                     | Gets or sets the `skidding` property (vertical offset along anchor). |
| `staysOpen`           | `staysOpen`           |           | `boolean`                                    | Gets or sets the `staysOpen` property.           |
| `themeName`           |                       |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `trapFocus`           | `trapFocus`           |           | `boolean`                                    | Gets or sets the `trapFocus` property.           |
| `trigger`             | `trigger`             |           | `Trigger`                                    | Gets or sets the `trigger` property.             |
| `variant`             | `variant`             |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `attach`               | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `close`                | `(): Promise<boolean>`                           | Closes the popup.                                |
| `detach`               | `(): void`                                       | Detaches the element from its current control.   |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`      | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the popup.                                 |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): Promise<void>`                              | Toggles the popup open/closed state.             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Fired when the popup is closed.                  |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Fired when the popup is opened.                  |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default slot for the trigger/anchor element.     |
| `content` | The popup content to display.                    |
| `footer`  | Optional footer content for the popup.           |
| `header`  | Optional header content for the popup.           |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                  |
|-------------|----------------------------------------------|
| `backdrop`  | The modal backdrop (when has-backdrop=true). |
| `body`      | The main body of the popup.                  |
| `content`   | The content projection area.                 |
| `elevation` | The elevation part.                          |
| `footer`    | The footer section.                          |
| `header`    | The header section.                          |
| `popup`     | The floating popup container.                |
| `portal`    | The portal container.                        |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--popup-background-color`     | String | The background color CSS custom property.     |
| `--popup-border-color`         | String | The border color CSS custom property.         |
| `--popup-border-radius`        | String | The border radius CSS custom property.        |
| `--popup-border-style`         | String | The border style CSS custom property.         |
| `--popup-border-width`         | String | The border width CSS custom property.         |
| `--popup-font-family`          | String | The font family CSS custom property.          |
| `--popup-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--popup-font-line-height`     | String | The font line height CSS custom property.     |
| `--popup-font-size`            | String | The font size CSS custom property.            |
| `--popup-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--popup-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--popup-font-weight`          | String | The font weight CSS custom property.          |
| `--popup-foreground-color`     | String | The foreground color CSS custom property.     |
| `--popup-gap`                  | String | The gap CSS custom property.                  |
| `--popup-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--popup-padding-left`         | String | The padding left CSS custom property.         |
| `--popup-padding-right`        | String | The padding right CSS custom property.        |
| `--popup-padding-top`          | String | The padding top CSS custom property.          |
| `--popup-shadow`               | String | The shadow CSS custom property.               |
| `--popup-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--popup-shadow-color`         | String | The shadow color CSS custom property.         |
| `--popup-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--popup-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--popup-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--popup-transition-duration`  | String | The transition duration CSS custom property.  |
| `--popup-transition-mode`      | String | The transition mode CSS custom property.      |
| `--popup-transition-property`  | String | The transition property CSS custom property.  |
| `--popup-translate`            | String | The translate CSS custom property.            |

# mosaik-portal-host

PortalHost - A designated destination container for portal content rendering.

**Mixins:** Themeable, Slottable

## Examples

Create modal container:

```html
<!-- Define host in layout -->
<div class="app-layout">
  <main>...</main>
  <mosaik-portal-host name="modals"></mosaik-portal-host>
</div>

<!-- Use portal targeting this host -->
<mosaik-portal destination="modals">
  <mosaik-dialog>Modal content</mosaik-dialog>
</mosaik-portal>
```

Multiple portal hosts:

```html
<div class="app">
  <mosaik-portal-host name="toasts" class="toast-container"></mosaik-portal-host>
  <mosaik-portal-host name="modals" class="modal-container"></mosaik-portal-host>
  <mosaik-portal-host name="tooltips" class="tooltip-container"></mosaik-portal-host>
</div>
```

Styled portal host:

```html
<mosaik-portal-host name="notifications" style="position: fixed; top: 20px; right: 20px; z-index: 9999;">
</mosaik-portal-host>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`         | `name`    |           | `string`                                     | Gets or sets the `name` property.<br />The `name` property represents the unique identifier for this portal host. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The container where portal projections will be rendered |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--portal-host-font-family`          | String | The host font family CSS custom property.        |
| `--portal-host-font-letter-spacing`  | String | The host font letter spacing CSS custom property. |
| `--portal-host-font-line-height`     | String | The host font line height CSS custom property.   |
| `--portal-host-font-size`            | String | The host font size CSS custom property.          |
| `--portal-host-font-text-decoration` | String | The host font text decoration CSS custom property. |
| `--portal-host-font-text-transform`  | String | The host font text transform CSS custom property. |
| `--portal-host-font-weight`          | String | The host font weight CSS custom property.        |
| `--portal-host-gap`                  | String | The host gap CSS custom property.                |
| `--portal-host-padding-bottom`       | String | The host padding bottom CSS custom property.     |
| `--portal-host-padding-left`         | String | The host padding left CSS custom property.       |
| `--portal-host-padding-right`        | String | The host padding right CSS custom property.      |
| `--portal-host-padding-top`          | String | The host padding top CSS custom property.        |
| `--portal-host-shadow`               | String | The host shadow CSS custom property.             |
| `--portal-host-shadow-blur`          | String | The host shadow blur CSS custom property.        |
| `--portal-host-shadow-color`         | String | The host shadow color CSS custom property.       |
| `--portal-host-shadow-offset-x`      | String | The host shadow offset x CSS custom property.    |
| `--portal-host-shadow-offset-y`      | String | The host shadow offset y CSS custom property.    |
| `--portal-host-shadow-spread`        | String | The host shadow spread CSS custom property.      |
| `--portal-host-transition-duration`  | String | The host transition duration CSS custom property. |
| `--portal-host-transition-mode`      | String | The host transition mode CSS custom property.    |
| `--portal-host-transition-property`  | String | The host transition property CSS custom property. |
| `--portal-host-translate`            | String | The host translate CSS custom property.          |

# mosaik-portal-projection

PortalProjection - The projected instance of portal content rendered at the destination.

**Mixins:** Themeable, Slottable, Openable, Closeable

## Examples

Portal projections are created automatically by Portal elements and don't need manual instantiation.
They appear in the DOM at the destination location:

```html
<!-- Source -->
<mosaik-portal>
  <div>Content</div>
</mosaik-portal>

<!-- Automatically creates at destination -->
<mosaik-portal-projection>
  <div>Content</div>
</mosaik-portal-projection>
```

Inspecting portal projections programmatically:

```html
<mosaik-portal id="myPortal">
  <div>Projected content</div>
</mosaik-portal>
<script>
  const portal = document.querySelector('#myPortal');
  portal.addEventListener('portalAttached', (e) => {
    const projection = e.detail.projection;
    console.log('Projection created:', projection);
  });
</script>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    | Gets or sets the `hasBackdrop` property.         |
| `isOpen`              | `isOpen`              |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `portal`              |                       | readonly  | `PortalElement`                              | Returns the portal assigned to this projection.  |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    | Gets or sets the `pressEscapeToClose` property.  |
| `themeName`           |                       |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assign`               | `(portal: PortalElement): void`                  | Assigns the portal to this projection.<br /><br />**portal**: The portal element to assign. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the `OverlayElement`.                     |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the `OverlayElement`.                      |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the overlay completes its close transition (isOpen becomes false) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the overlay completes its open transition (isOpen becomes true) |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The projected content from the source portal     |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description        |
|------------|--------------------|
| `backdrop` | The backdrop part. |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--portal-projection-font-family`          | String | The projection font family CSS custom property.  |
| `--portal-projection-font-letter-spacing`  | String | The projection font letter spacing CSS custom property. |
| `--portal-projection-font-line-height`     | String | The projection font line height CSS custom property. |
| `--portal-projection-font-size`            | String | The projection font size CSS custom property.    |
| `--portal-projection-font-text-decoration` | String | The projection font text decoration CSS custom property. |
| `--portal-projection-font-text-transform`  | String | The projection font text transform CSS custom property. |
| `--portal-projection-font-weight`          | String | The projection font weight CSS custom property.  |
| `--portal-projection-gap`                  | String | The projection gap CSS custom property.          |
| `--portal-projection-padding-bottom`       | String | The projection padding bottom CSS custom property. |
| `--portal-projection-padding-left`         | String | The projection padding left CSS custom property. |
| `--portal-projection-padding-right`        | String | The projection padding right CSS custom property. |
| `--portal-projection-padding-top`          | String | The projection padding top CSS custom property.  |
| `--portal-projection-shadow`               | String | The projection shadow CSS custom property.       |
| `--portal-projection-shadow-blur`          | String | The projection shadow blur CSS custom property.  |
| `--portal-projection-shadow-color`         | String | The projection shadow color CSS custom property. |
| `--portal-projection-shadow-offset-x`      | String | The projection shadow offset x CSS custom property. |
| `--portal-projection-shadow-offset-y`      | String | The projection shadow offset y CSS custom property. |
| `--portal-projection-shadow-spread`        | String | The projection shadow spread CSS custom property. |
| `--portal-projection-transition-duration`  | String | The projection transition duration CSS custom property. |
| `--portal-projection-transition-mode`      | String | The projection transition mode CSS custom property. |
| `--portal-projection-transition-property`  | String | The projection transition property CSS custom property. |
| `--portal-projection-translate`            | String | The projection translate CSS custom property.    |

# mosaik-portal

Portal - A teleportation mechanism that renders content in a different location in the DOM tree.

**Mixins:** Slottable

## Examples

Basic portal to document body:

```html
<div class="app-container">
  <mosaik-portal>
    <mosaik-dialog>This renders in document.body</mosaik-dialog>
  </mosaik-portal>
</div>
```

Portal to named host:

```html
<!-- Somewhere in layout -->
<mosaik-portal-host name="modals"></mosaik-portal-host>

<!-- Portal content to host -->
<mosaik-portal destination="modals">
  <mosaik-modal>Content renders in modals host</mosaik-modal>
</mosaik-portal>
```

Toast notification portal:

```html
<mosaik-portal id="toastPortal">
  <div class="toast">Operation successful!</div>
</mosaik-portal>
<script>
  const portal = document.querySelector('#toastPortal');
  portal.addEventListener('portalAttached', () => {
    console.log('Toast is now visible');
  });
</script>
```

## Properties

| Property        | Attribute     | Modifiers | Type                                         | Description                                      |
|-----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `adoptedStyles` |               |           | `CSSStyleSheet[] \| undefined`               | Gets or sets the `adoptedStyles` property.       |
| `attached`      |               |           | `IEventEmitter<IPortalAttachedEventDetail>`  | Called when a projection is attached to the DOM.<br />Provides reference to `IPortalAttachedEventDetail` as event argument. |
| `changed`       |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `destination`   | `destination` |           | `string \| Element`                          | Gets or sets the `destination` property.         |
| `detached`      |               |           | `IEventEmitter<IPortalDetachedEventDetail>`  | Called when a projection is detached from the DOM.<br />Provides reference to `IPortalDetachedEventDetail` as event argument. |
| `dir`           | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`  |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isProjected`   | `isProjected` |           | `boolean`                                    | Gets or sets the `isProjected` property.         |
| `lang`          | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `projection`    |               | readonly  | `PortalProjectionElement \| null`            | Gets the `projection` property.                  |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `portalAttached` | `PortalAttachedEvent`  | Fired when the portal is attached to the DOM     |
| `portalDetached` | `PortalDetachedEvent`  | Fired when the portal is detached from the DOM   |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The content to be portaled to the destination    |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--portal-font-family`          | String | The font family CSS custom property.          |
| `--portal-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--portal-font-line-height`     | String | The font line height CSS custom property.     |
| `--portal-font-size`            | String | The font size CSS custom property.            |
| `--portal-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--portal-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--portal-font-weight`          | String | The font weight CSS custom property.          |
| `--portal-gap`                  | String | The gap CSS custom property.                  |
| `--portal-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--portal-padding-left`         | String | The padding left CSS custom property.         |
| `--portal-padding-right`        | String | The padding right CSS custom property.        |
| `--portal-padding-top`          | String | The padding top CSS custom property.          |
| `--portal-shadow`               | String | The shadow CSS custom property.               |
| `--portal-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--portal-shadow-color`         | String | The shadow color CSS custom property.         |
| `--portal-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--portal-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--portal-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--portal-transition-duration`  | String | The transition duration CSS custom property.  |
| `--portal-transition-mode`      | String | The transition mode CSS custom property.      |
| `--portal-transition-property`  | String | The transition property CSS custom property.  |
| `--portal-translate`            | String | The translate CSS custom property.            |

# mosaik-press-button

Press Button - An interactive button that requires holding for a configurable duration before triggering its action.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Destructive action requiring user confirmation by holding:

```html
<mosaik-press-button label="Delete" variant="danger" duration="3000"></mosaik-press-button>
```

Press button with custom countdown duration for critical infrastructure operations:

```html
<mosaik-press-button label="Shut Down Server" variant="warning" duration="5000"></mosaik-press-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `duration`                   | `duration`                     |           | `number`                                     | Gets or sets the `duration` property.<br />The duration in milliseconds that the button must be held before the `pressed` event fires. |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isPressing`                 | `is-pressing`                  |           | `boolean`                                    | Gets or sets the `isPressing` property.<br />Indicates whether the button is currently being pressed and the countdown is active. |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `pressed`                    |                                | readonly  | `IEventEmitter<IPressedEventDetail>`         | Called when the press countdown has completed.<br />Provides reference to `IPressedEventDetail` as event detail. |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `pressed`      | `PressedEvent`         | Called when the press duration countdown has completed. |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `icon`    | The icon slot for placing an icon inside the button. |
| `label`   | The label slot for text or labels inside the button. |
| `overlay` | The overlay slot (useful for badges or additional visual elements). |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `button`       | The button part of the Press Button.             |
| `focusRing`    | The focus ring part of the Press Button.         |
| `icon`         | The icon part of the Press Button.               |
| `innerStack`   | The innerStack part.                             |
| `label`        | The label part of the Press Button.              |
| `progressFill` | The progress bar fill that animates from left to right during press. |
| `progressRing` | The progress ring part of the Press Button.      |
| `ripple`       | The ripple effect part of the Press Button.      |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--press-button-background-color`          | Color  | The background color of the Press Button.        |
| `--press-button-border-color`              | Color  | The border color of the Press Button.            |
| `--press-button-border-radius`             | String | The border radius of the Press Button.           |
| `--press-button-border-style`              | String | The border style of the Press Button.            |
| `--press-button-border-width`              | String | The border width of the Press Button.            |
| `--press-button-focus-ring-active-width`   | String | The button focus ring active width CSS custom property. |
| `--press-button-focus-ring-color`          | String | The button focus ring color CSS custom property. |
| `--press-button-focus-ring-inward-offset`  | String | The button focus ring inward offset CSS custom property. |
| `--press-button-focus-ring-outward-offset` | String | The button focus ring outward offset CSS custom property. |
| `--press-button-font-family`               | String | The font family of the Press Button.             |
| `--press-button-font-letter-spacing`       | String | The font letter spacing of the Press Button.     |
| `--press-button-font-line-height`          | String | The font line height of the Press Button.        |
| `--press-button-font-size`                 | String | The font size of the Press Button.               |
| `--press-button-font-text-decoration`      | String | The font text decoration of the Press Button.    |
| `--press-button-font-text-transform`       | String | The font text transform of the Press Button.     |
| `--press-button-font-weight`               | String | The font weight of the Press Button.             |
| `--press-button-foreground-color`          | Color  | The foreground color of the Press Button.        |
| `--press-button-gap`                       | String | The gap between elements of the Press Button.    |
| `--press-button-height`                    | String | The button height CSS custom property.           |
| `--press-button-icon-min-height`           | String | The button icon min height CSS custom property.  |
| `--press-button-icon-min-width`            | String | The button icon min width CSS custom property.   |
| `--press-button-line-height`               | String | The line height of the Press Button text.        |
| `--press-button-min-height`                | String | The button min height CSS custom property.       |
| `--press-button-min-width`                 | String | The button min width CSS custom property.        |
| `--press-button-padding-bottom`            | String | The padding bottom of the Press Button.          |
| `--press-button-padding-left`              | String | The padding left of the Press Button.            |
| `--press-button-padding-right`             | String | The padding right of the Press Button.           |
| `--press-button-padding-top`               | String | The padding top of the Press Button.             |
| `--press-button-progress-fill-color`       | Color  | The progress fill background color during press. |
| `--press-button-progress-ring-width`       | String | The button progress ring width CSS custom property. |
| `--press-button-progress-thickness`        | String | The button progress thickness CSS custom property. |
| `--press-button-ripple-color`              | Color  | The button ripple color CSS custom property.     |
| `--press-button-ripple-duration`           | String | The button ripple duration CSS custom property.  |
| `--press-button-shadow`                    | String | The shadow of the Press Button.                  |
| `--press-button-shadow-blur`               | String | The button shadow blur CSS custom property.      |
| `--press-button-shadow-color`              | String | The button shadow color CSS custom property.     |
| `--press-button-shadow-offset-x`           | String | The button shadow offset x CSS custom property.  |
| `--press-button-shadow-offset-y`           | String | The button shadow offset y CSS custom property.  |
| `--press-button-shadow-spread`             | String | The button shadow spread CSS custom property.    |
| `--press-button-transition-duration`       | String | The transition duration for the Press Button.    |
| `--press-button-transition-mode`           | String | The transition mode for the Press Button.        |
| `--press-button-transition-property`       | String | The transition property for the Press Button.    |
| `--press-button-translate`                 | String | The button translate CSS custom property.        |
| `--press-button-width`                     | String | The button width CSS custom property.            |

# mosaik-progress-bar

ProgressBar - A horizontal or vertical indicator showing task completion or loading progress.

**Mixins:** Themeable, Variantable, Orientable, Disableable, Labelable, Rangeable, Valueable

## Examples

Basic determinate progress bar:

```html
<mosaik-progress-bar value="65" max="100"></mosaik-progress-bar>
```

Progress bar with label showing upload status:

```html
<mosaik-progress-bar value="45" max="100">
  <span slot="label">Uploading document.pdf</span>
</mosaik-progress-bar>
```

Indeterminate loading bar for unknown duration:

```html
<mosaik-progress-bar is-indeterminate>
  <span slot="label">Loading...</span>
</mosaik-progress-bar>
```

Vertical progress bar for volume control:

```html
<mosaik-progress-bar
  value="80"
  max="100"
  orientation="vertical"
  thickness="8px"
  variant="primary">
</mosaik-progress-bar>
```

Segmented progress for multi-step wizard:

```html
<mosaik-progress-bar
  value="3"
  max="5"
  segments="5"
  variant="success">
  <span slot="label">Step 3 of 5</span>
</mosaik-progress-bar>
```

File upload progress with percentage display:

```html
<div class="upload-container">
  <span>Uploading document.pdf</span>
  <mosaik-progress-bar
    id="uploadProgress"
    value="0"
    max="100"
    thickness="4px">
  </mosaik-progress-bar>
  <span id="progressText">0%</span>
</div>
```

Download progress with custom styling:

```html
<mosaik-progress-bar
  value="72"
  max="100"
  thickness="6px"
  variant="info">
  <span slot="label">Downloading update...</span>
  <span slot="hint">72% complete (3.6 MB / 5 MB)</span>
</mosaik-progress-bar>
```

## Properties

| Property            | Attribute         | Modifiers | Type                                         | Default | Description                                      |
|---------------------|-------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`           |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                   | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`             |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`        |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                   | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isIndeterminate`   | `isIndeterminate` |           | `boolean`                                    |         | Determines if `ProgressBar` shows actual values `false` or generic, continuous progress feedback `true`. |
| `label`             |                   |           | `string`                                     |         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`            |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `max`               | `max`             |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`             |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `orientation`       | `orientation`     |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `rangeValueChanged` |                   | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `segments`          | `segments`        |           | `number`                                     |         | Gets or sets the `segments` property.            |
| `themeName`         |                   |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`         | `thickness`       |           | `CssLength`                                  |         | Gets or sets the thickness property.             |
| `value`             | `value`           |           | `number`                                     |         | Specifies the value of the `Range`.              |
| `variant`           | `variant`         |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the progress value changes            |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `hint`  | Secondary text content area for additional progress information or details |
| `label` | Text label content area for progress description or status |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `container`  | Outer container wrapping the entire progress bar structure |
| `fill`       | Filled portion of the progress bar indicating current completion level |
| `hint`       | Hint text styling container for additional information |
| `label`      | Text label styling container for progress information |
| `track`      | Track wrapper providing layout for the progress rail |
| `track-fill` | Inner track element displaying the background rail and overflow clipping |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--progress-bar-font-family`          | String | The bar font family CSS custom property.         |
| `--progress-bar-font-letter-spacing`  | String | The bar font letter spacing CSS custom property. |
| `--progress-bar-font-line-height`     | String | The bar font line height CSS custom property.    |
| `--progress-bar-font-size`            | String | The bar font size CSS custom property.           |
| `--progress-bar-font-text-decoration` | String | The bar font text decoration CSS custom property. |
| `--progress-bar-font-text-transform`  | String | The bar font text transform CSS custom property. |
| `--progress-bar-font-weight`          | String | The bar font weight CSS custom property.         |
| `--progress-bar-gap`                  | String | The bar gap CSS custom property.                 |
| `--progress-bar-padding-bottom`       | String | The bar padding bottom CSS custom property.      |
| `--progress-bar-padding-left`         | String | The bar padding left CSS custom property.        |
| `--progress-bar-padding-right`        | String | The bar padding right CSS custom property.       |
| `--progress-bar-padding-top`          | String | The bar padding top CSS custom property.         |
| `--progress-bar-segment-gap`          | String | The bar segment gap CSS custom property.         |
| `--progress-bar-shadow`               | String | The bar shadow CSS custom property.              |
| `--progress-bar-shadow-blur`          | String | The bar shadow blur CSS custom property.         |
| `--progress-bar-shadow-color`         | String | The bar shadow color CSS custom property.        |
| `--progress-bar-shadow-offset-x`      | String | The bar shadow offset x CSS custom property.     |
| `--progress-bar-shadow-offset-y`      | String | The bar shadow offset y CSS custom property.     |
| `--progress-bar-shadow-spread`        | String | The bar shadow spread CSS custom property.       |
| `--progress-bar-transition-duration`  | String | The bar transition duration CSS custom property. |
| `--progress-bar-transition-mode`      | String | The bar transition mode CSS custom property.     |
| `--progress-bar-transition-property`  | String | The bar transition property CSS custom property. |
| `--progress-bar-translate`            | String | The bar translate CSS custom property.           |

# mosaik-progress-ring

ProgressRing - A circular progress indicator for displaying task completion and loading states.

**Mixins:** Themeable, Variantable, Orientable, Disableable, Labelable, Rangeable, Valueable

## Examples

Simple progress ring with percentage:

```html
<mosaik-progress-ring value="65" max="100">
  <mosaik-text slot="label">65%</mosaik-text>
</mosaik-progress-ring>
```

File upload progress with status:

```html
<mosaik-progress-ring value="42" max="100">
  <mosaik-text slot="label">42%</mosaik-text>
  <mosaik-text slot="hint">Uploading...</mosaik-text>
</mosaik-progress-ring>
```

Indeterminate loading ring:

```html
<mosaik-progress-ring is-indeterminate>
  <mosaik-text slot="label">Loading</mosaik-text>
</mosaik-progress-ring>
```

Task completion ring with custom variant:

```html
<mosaik-progress-ring value="8" max="10" variant="success">
  <mosaik-text slot="label">8/10</mosaik-text>
  <mosaik-text slot="hint">Tasks Complete</mosaik-text>
</mosaik-progress-ring>
```

Small loading spinner for buttons:

```html
<mosaik-progress-ring
  is-indeterminate
  radius="12"
  thickness="2">
</mosaik-progress-ring>
```

Custom styled download progress:

```html
<mosaik-progress-ring
  value="75"
  max="100"
  radius="60"
  thickness="8"
  variant="info">
  <mosaik-text slot="label">75%</mosaik-text>
  <mosaik-text slot="hint">Download Progress</mosaik-text>
</mosaik-progress-ring>
```

Dashboard metric with large ring:

```html
<mosaik-progress-ring
  value="92"
  max="100"
  radius="80"
  thickness="12"
  variant="primary">
  <div slot="label" style="text-align: center;">
    <div style="font-size: 32px; font-weight: bold;">92%</div>
    <div style="font-size: 14px;">Completion Rate</div>
  </div>
</mosaik-progress-ring>
```

## Properties

| Property            | Attribute         | Modifiers | Type                                         | Default | Description                                      |
|---------------------|-------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`           |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                   | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`             |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`        |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                   | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isIndeterminate`   | `isIndeterminate` |           | `boolean`                                    |         | Determines if `ProgressRing` shows actual values `false` or generic, continuous progress feedback `true`. |
| `label`             |                   |           | `string`                                     |         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`            |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `max`               | `max`             |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`             |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `orientation`       | `orientation`     |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `radius`            | `radius`          |           | `CssLength`                                  |         | Gets or sets the `radius` property, which defines the radius of the progress ring. |
| `rangeValueChanged` |                   | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `themeName`         |                   |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`         | `thickness`       |           | `CssLength`                                  |         | Gets or sets the `thickness` property, which defines the thickness of the progress ring. |
| `value`             | `value`           |           | `number`                                     |         | Specifies the value of the `Range`.              |
| `variant`           | `variant`         |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the progress value changes            |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `hint`  | Secondary text content area for additional progress information or status |
| `label` | Text label content area for progress description or percentage display |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part            | Description                                      |
|-----------------|--------------------------------------------------|
| `bar`           | Background circle/track element for the progress ring |
| `fill`          | Progress circle/path indicating current completion level |
| `hint`          | Hint text styling container for additional information |
| `indeterminate` | Animated circle for indeterminate loading state  |
| `label`         | Text label styling container for progress information |
| `svg`           | Root SVG container for the progress ring         |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--progress-ring-background-color`     | String | Background color for the ring container          |
| `--progress-ring-border-color`         | String | Border color for ring container styling          |
| `--progress-ring-border-radius`        | String | Border radius for container styling              |
| `--progress-ring-border-style`         | String | Border style for ring container                  |
| `--progress-ring-border-width`         | String | Border width for ring container                  |
| `--progress-ring-fill-color`           | String | Fill color for the progress indicator arc        |
| `--progress-ring-font-family`          | String | Font family for progress text labels             |
| `--progress-ring-font-letter-spacing`  | String | The ring font letter spacing CSS custom property. |
| `--progress-ring-font-line-height`     | String | The ring font line height CSS custom property.   |
| `--progress-ring-font-size`            | String | Font size for progress text                      |
| `--progress-ring-font-text-decoration` | String | The ring font text decoration CSS custom property. |
| `--progress-ring-font-text-transform`  | String | The ring font text transform CSS custom property. |
| `--progress-ring-font-weight`          | String | Font weight for progress text                    |
| `--progress-ring-foreground-color`     | String | Primary color for ring stroke and text           |
| `--progress-ring-gap`                  | String | Spacing between ring and label elements          |
| `--progress-ring-padding-bottom`       | String | Bottom padding for ring container                |
| `--progress-ring-padding-left`         | String | Left padding for ring container                  |
| `--progress-ring-padding-right`        | String | Right padding for ring container                 |
| `--progress-ring-padding-top`          | String | Top padding for ring container                   |
| `--progress-ring-radius`               | String | The ring radius CSS custom property.             |
| `--progress-ring-shadow`               | String | Drop shadow or elevation effect for the progress ring |
| `--progress-ring-shadow-blur`          | String | The ring shadow blur CSS custom property.        |
| `--progress-ring-shadow-color`         | String | The ring shadow color CSS custom property.       |
| `--progress-ring-shadow-offset-x`      | String | The ring shadow offset x CSS custom property.    |
| `--progress-ring-shadow-offset-y`      | String | The ring shadow offset y CSS custom property.    |
| `--progress-ring-shadow-spread`        | String | The ring shadow spread CSS custom property.      |
| `--progress-ring-thickness`            | String | The ring thickness CSS custom property.          |
| `--progress-ring-transition-duration`  | String | Animation duration for progress changes          |
| `--progress-ring-transition-mode`      | String | Animation easing mode for progress transitions   |
| `--progress-ring-transition-property`  | String | CSS properties to animate during transitions     |
| `--progress-ring-translate`            | String | The ring translate CSS custom property.          |

# QRCodeElement - Machine-readable QR code generator

## Description
The QRCodeElement is a component that generates and displays QR (Quick Response) codes - machine-readable codes consisting of an array of black and white squares. These codes are typically used for storing URLs, contact information, or other data that can be scanned by smartphone cameras or QR code readers.

## Element
- **Tag**: `mosaik-qrcode`
- **Category**: Media

## Slots
None - the QR code is generated programmatically on a canvas element.

## CSS Parts
- `canvas` - The canvas element where the QR code is rendered

## CSS Custom Properties
- `--qr-code-background-color` - Background color of the QR code (default: theme background)
- `--qr-code-foreground-color` - Foreground (pattern) color of the QR code (default: theme foreground)
- `--qr-code-padding-top` - Top padding around the QR code
- `--qr-code-padding-right` - Right padding around the QR code
- `--qr-code-padding-bottom` - Bottom padding around the QR code
- `--qr-code-padding-left` - Left padding around the QR code

## Dependencies
None - uses the `qr-creator` library for QR code generation.

## Public Methods
- `toDataURL(imageType?: string, quality?: number): string` - Returns QR code image as data URL (see MDN toDataURL for parameters)
- `toBlob(): Blob` - Returns QR code image as Blob trimmed from white space

## Examples

### Basic URL QR code
```html
<mosaik-qrcode text="https://example.com"></mosaik-qrcode>
```

### Larger QR code with custom dimensions
```html
<mosaik-qrcode 
    text="https://example.com/very/long/url/path"
    dimension="300">
</mosaik-qrcode>
```

### Custom colors
```html
<mosaik-qrcode 
    text="https://example.com"
    foreground-color="#ff0000"
    background-color="#ffffff">
</mosaik-qrcode>
```

### With rounded corners
```html
<mosaik-qrcode 
    text="Contact: +1234567890"
    radius="10"
    dimension="250">
</mosaik-qrcode>
```

### High error correction
```html
<mosaik-qrcode 
    text="Important data"
    error-correction="H"
    dimension="300">
</mosaik-qrcode>
```

### Export as image
```javascript
const qrCode = document.querySelector('mosaik-qrcode');

// Get as data URL
const dataUrl = qrCode.toDataURL('image/png', 0.9);

// Get as Blob for file download
const blob = qrCode.toBlob();
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'qrcode.png';
link.click();
```

## Properties

### text
- **Type**: `string`
- **Description**: The text or data to encode in the QR code (URL, contact info, plain text, etc.)

### dimension
- **Type**: `number`
- **Default**: `200`
- **Description**: The width and height of the QR code in pixels

### radius
- **Type**: `number`
- **Default**: `0`
- **Description**: Corner radius for rounded QR code patterns

### errorCorrection
- **Type**: `QRErrorCorrection` (enum: 'L', 'M', 'Q', 'H')
- **Default**: `'H'`
- **Description**: Error correction level - higher levels allow the QR code to be read even if partially damaged
  - L: ~7% correction
  - M: ~15% correction
  - Q: ~25% correction
  - H: ~30% correction

### backgroundColor
- **Type**: `CssColor | null`
- **Description**: Override background color (when null, uses CSS variable)

### foregroundColor
- **Type**: `CssColor | null`
- **Description**: Override foreground (pattern) color (when null, uses CSS variable)

# mosaik-qrcode

QR Code - A machine-readable code consisting of an array of black and white squares, typically used for storing URLs or other information that can be scanned by a smartphone camera.

**Mixins:** Themeable

## Example

```html
<!-- Basic QR code (set the `text` property via JavaScript to encode data) -->
<mosaik-qrcode></mosaik-qrcode>

<!-- QR code with high error correction -->
<mosaik-qrcode error-correction="H"></mosaik-qrcode>

<!-- QR code with custom colors -->
<mosaik-qrcode background-color="#ffffff" foreground-color="#000000"></mosaik-qrcode>
```

## Properties

| Property          | Attribute         | Modifiers | Type                                         | Description                                      |
|-------------------|-------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `backgroundColor` | `backgroundColor` |           | `CssColor \| null \| undefined`              | Gets or sets the `backgroundColor` property of the QR code.<br />If not set (`null` or `undefind`), the background color will respect the CSS variable `--qr-code-background-color`. |
| `changed`         |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dimension`       |                   |           | `number`                                     | Gets or sets the `dimension` property.           |
| `dir`             | `dir`             |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`    |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `errorCorrection` | `errorCorrection` |           | `QRErrorCorrection`                          | Gets or sets the `errorCorrection` property.     |
| `foregroundColor` | `foregroundColor` |           | `CssColor \| null \| undefined`              | Gets or sets the `foregroundColor` property of the QR code.<br />If not set (`null` or `undefind`), the fill color will respect the CSS variable `--qr-code-foreground-color`. |
| `lang`            | `lang`            |           | `string`                                     | The lang property indicates the language of the element's content. |
| `radius`          |                   |           | `number`                                     | Gets or sets the `radius` property.              |
| `text`            |                   |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`       |                   |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toBlob`        | `(): Blob`                                       | Returns qr code image as data URL trimmed from white space. |
| `toDataURL`     | `(imageType?: string \| undefined, quality?: number \| undefined): string` | Returns qr code image as data URL (see https://mdn.io/todataurl for the list of possible paramters). |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description      |
|----------|------------------|
| `canvas` | The canvas part. |

## CSS Custom Properties

| Property                        | Type   | Description                                    |
|---------------------------------|--------|------------------------------------------------|
| `--qr-code-background-color`    | String | The code background color CSS custom property. |
| `--qr-code-foreground-color`    | String | The code foreground color CSS custom property. |
| `--qr-code-padding-bottom`      | String | The code padding bottom CSS custom property.   |
| `--qr-code-padding-left`        | String | The code padding left CSS custom property.     |
| `--qr-code-padding-right`       | String | The code padding right CSS custom property.    |
| `--qr-code-padding-top`         | String | The code padding top CSS custom property.      |
| `--qrcode-background-color`     | String | The background color CSS custom property.      |
| `--qrcode-font-family`          | String | The font family CSS custom property.           |
| `--qrcode-font-letter-spacing`  | String | The font letter spacing CSS custom property.   |
| `--qrcode-font-line-height`     | String | The font line height CSS custom property.      |
| `--qrcode-font-size`            | String | The font size CSS custom property.             |
| `--qrcode-font-text-decoration` | String | The font text decoration CSS custom property.  |
| `--qrcode-font-text-transform`  | String | The font text transform CSS custom property.   |
| `--qrcode-font-weight`          | String | The font weight CSS custom property.           |
| `--qrcode-foreground-color`     | String | The foreground color CSS custom property.      |
| `--qrcode-gap`                  | String | The gap CSS custom property.                   |
| `--qrcode-padding-bottom`       | String | The padding bottom CSS custom property.        |
| `--qrcode-padding-left`         | String | The padding left CSS custom property.          |
| `--qrcode-padding-right`        | String | The padding right CSS custom property.         |
| `--qrcode-padding-top`          | String | The padding top CSS custom property.           |
| `--qrcode-shadow`               | String | The shadow CSS custom property.                |
| `--qrcode-shadow-blur`          | String | The shadow blur CSS custom property.           |
| `--qrcode-shadow-color`         | String | The shadow color CSS custom property.          |
| `--qrcode-shadow-offset-x`      | String | The shadow offset x CSS custom property.       |
| `--qrcode-shadow-offset-y`      | String | The shadow offset y CSS custom property.       |
| `--qrcode-shadow-spread`        | String | The shadow spread CSS custom property.         |
| `--qrcode-transition-duration`  | String | The transition duration CSS custom property.   |
| `--qrcode-transition-mode`      | String | The transition mode CSS custom property.       |
| `--qrcode-transition-property`  | String | The transition property CSS custom property.   |
| `--qrcode-translate`            | String | The translate CSS custom property.             |

# mosaik-radio-group

Radio Group - A container for grouping multiple radio buttons.

**Mixins:** Themeable, Invalidable, Valueable, Disableable, Orientable, Appearanceable, Variantable, Slottable

## Example

```html
<mosaik-radio-group>
  <mosaik-radio name="options" value="opt1"></mosaik-radio>
  <mosaik-radio name="options" value="opt2"></mosaik-radio>
  <mosaik-radio name="options" value="opt3"></mosaik-radio>
</mosaik-radio-group>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                             | Description                                      |
|----------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`      | `invalid`     |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `lang`         | `lang`        |           | `string`                                         | The lang property indicates the language of the element's content. |
| `name`         | `name`        |           | `string`                                         | Gets or sets the `name` property.                |
| `orientation`  | `orientation` |           | `Orientation`                                    | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `radioChanged` |               | readonly  | `IEventEmitter<IGroupChangedEventDetail<unknown>>` | Called when the selection in the group changes.<br />Provides reference to `IGroupChangedEventDetail` as event detail. |
| `required`     | `required`    |           | `boolean`                                        | Gets or sets the `required` property.            |
| `themeName`    |               |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`       |           | `TType`                                          | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Returns whether a form will validate when it is submitted, without having to submit it. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the element to its initial state.         |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `radioChanged` | `GroupChangedEvent`    | Called when the selection in the group changes.  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--radio-group-background-color`     | String | The group background color CSS custom property.  |
| `--radio-group-border-color`         | String | The group border color CSS custom property.      |
| `--radio-group-border-radius`        | String | The group border radius CSS custom property.     |
| `--radio-group-border-style`         | String | The group border style CSS custom property.      |
| `--radio-group-border-width`         | String | The group border width CSS custom property.      |
| `--radio-group-font-family`          | String | The group font family CSS custom property.       |
| `--radio-group-font-letter-spacing`  | String | The group font letter spacing CSS custom property. |
| `--radio-group-font-line-height`     | String | The group font line height CSS custom property.  |
| `--radio-group-font-size`            | String | The group font size CSS custom property.         |
| `--radio-group-font-text-decoration` | String | The group font text decoration CSS custom property. |
| `--radio-group-font-text-transform`  | String | The group font text transform CSS custom property. |
| `--radio-group-font-weight`          | String | The group font weight CSS custom property.       |
| `--radio-group-foreground-color`     | String | The group foreground color CSS custom property.  |
| `--radio-group-gap`                  | String | The group gap CSS custom property.               |
| `--radio-group-padding-bottom`       | String | The group padding bottom CSS custom property.    |
| `--radio-group-padding-left`         | String | The group padding left CSS custom property.      |
| `--radio-group-padding-right`        | String | The group padding right CSS custom property.     |
| `--radio-group-padding-top`          | String | The group padding top CSS custom property.       |
| `--radio-group-shadow`               | String | The group shadow CSS custom property.            |
| `--radio-group-shadow-blur`          | String | The group shadow blur CSS custom property.       |
| `--radio-group-shadow-color`         | String | The group shadow color CSS custom property.      |
| `--radio-group-shadow-offset-x`      | String | The group shadow offset x CSS custom property.   |
| `--radio-group-shadow-offset-y`      | String | The group shadow offset y CSS custom property.   |
| `--radio-group-shadow-spread`        | String | The group shadow spread CSS custom property.     |
| `--radio-group-transition-duration`  | String | The group transition duration CSS custom property. |
| `--radio-group-transition-mode`      | String | The group transition mode CSS custom property.   |
| `--radio-group-transition-property`  | String | The group transition property CSS custom property. |
| `--radio-group-translate`            | String | The group translate CSS custom property.         |

# mosaik-radio

Radio - A UI element allowing users to select a single option from a list.

**Mixins:** Themeable, Invalidable, Valueable, Variantable, Appearanceable, Disableable, Labelable, TextFormattable, Focusable

## Example

```html
<mosaik-radio name="size" value="small"></mosaik-radio>
<mosaik-radio name="size" value="medium"></mosaik-radio>
<mosaik-radio name="size" value="large"></mosaik-radio>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`       |                 | readonly  | `IEventEmitter<ICheckedEventDetail>`         | Called when the `isChecked` property is `true`.<br />Provides reference to the `ICheckedEventDetail` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`     |                 |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `indeterminate` |                 | readonly  | `IEventEmitter<IIndeterminateEventDetail>`   | Called when the `isChecked` property is `null`.<br />Provides reference to the `IIndeterminateEventDetail` as event argument. |
| `invalid`       | `invalid`       |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isChecked`     | `isChecked`     |           | `boolean \| null`                            | Indicates whether the `ToggableElement` is checked. |
| `isFocused`     | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isThreeState`  | `isThreeState`  |           | `boolean`                                    | The `isThreeState` property determines whether the `ToggableElement` supports two or three states.<br />`isChecked` property can be set to `null` as a third state when `isThreeState` is `true` |
| `label`         |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `labelPosition` | `labelPosition` |           | `LabelPosition`                              | Gets or sets the `labelPosition` property.       |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`          | `name`          |           | `string`                                     | Gets or sets the `name` property.<br />When used inside a RadioGroup, inherits the group's name unless explicitly set. |
| `required`      | `required`      |           | `boolean`                                    | Gets or sets the `required` property.            |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `unchecked`     |                 | readonly  | `IEventEmitter<IUncheckedEventDetail>`       | Called when the `isChecked` property is `false`.<br />Provides reference to the `IUncheckedEventDetail` as event argument. |
| `value`         | `value`         |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `check`                 | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the element to its initial state.         |
| `toggle`                | `(): void`                                       | Toggles the element between checked and unchecked states. |
| `uncheck`               | `(): void`                                       |                                                  |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checked`       | `CheckedEvent`         | Dispatched when the element transitions to checked state (isChecked = true) |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `indeterminate` | `IndeterminateEvent`   | Dispatched when the element transitions to indeterminate state (isChecked = null, requires isThreeState = true) |
| `unchecked`     | `UncheckedEvent`       | Dispatched when the element transitions to unchecked state (isChecked = false) |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `checkmark` | The checkmark slot.                              |
| `label`     | The label slot.                                  |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description          |
|-------------|----------------------|
| `checkmark` | the checkmark part.  |
| `focusRing` | the focus ring part. |
| `input`     | the input part.      |
| `label`     | the label part.      |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--radio-background-color`           | String | The background color CSS custom property.        |
| `--radio-border-color`               | String | The border color CSS custom property.            |
| `--radio-border-radius`              | String | The border radius CSS custom property.           |
| `--radio-border-style`               | String | The border style CSS custom property.            |
| `--radio-border-width`               | String | The border width CSS custom property.            |
| `--radio-checkmark-background-color` | String | The checkmark background color CSS custom property. |
| `--radio-checkmark-border-color`     | String | The checkmark border color CSS custom property.  |
| `--radio-checkmark-foreground-color` | String | The checkmark foreground color CSS custom property. |
| `--radio-focus-ring-border-color`    | String | The focus ring border color CSS custom property. |
| `--radio-focus-ring-outward-offset`  | String | The focus ring outward offset CSS custom property. |
| `--radio-font-family`                | String | The font family CSS custom property.             |
| `--radio-font-letter-spacing`        | String | The font letter spacing CSS custom property.     |
| `--radio-font-line-height`           | String | The font line height CSS custom property.        |
| `--radio-font-size`                  | String | The font size CSS custom property.               |
| `--radio-font-text-decoration`       | String | The font text decoration CSS custom property.    |
| `--radio-font-text-transform`        | String | The font text transform CSS custom property.     |
| `--radio-font-weight`                | String | The font weight CSS custom property.             |
| `--radio-foreground-color`           | String | The foreground color CSS custom property.        |
| `--radio-gap`                        | String | The gap CSS custom property.                     |
| `--radio-padding-bottom`             | String | The padding bottom CSS custom property.          |
| `--radio-padding-left`               | String | The padding left CSS custom property.            |
| `--radio-padding-right`              | String | The padding right CSS custom property.           |
| `--radio-padding-top`                | String | The padding top CSS custom property.             |
| `--radio-shadow`                     | String | The shadow CSS custom property.                  |
| `--radio-shadow-blur`                | String | The shadow blur CSS custom property.             |
| `--radio-shadow-color`               | String | The shadow color CSS custom property.            |
| `--radio-shadow-offset-x`            | String | The shadow offset x CSS custom property.         |
| `--radio-shadow-offset-y`            | String | The shadow offset y CSS custom property.         |
| `--radio-shadow-spread`              | String | The shadow spread CSS custom property.           |
| `--radio-transition-duration`        | String | The transition duration CSS custom property.     |
| `--radio-transition-mode`            | String | The transition mode CSS custom property.         |
| `--radio-transition-property`        | String | The transition property CSS custom property.     |
| `--radio-translate`                  | String | The translate CSS custom property.               |

# mosaik-rating

Rating - An interactive rating input control using customizable symbols for user feedback collection.

**Mixins:** Themeable, Disableable, Valueable, Labelable, Orientable, Sizeable, Variantable

## Examples

```html
<mosaik-rating length="5" value="4.5"></mosaik-rating>
```

```html
<mosaik-rating length="10" orientation="vertical" readonly value="7"></mosaik-rating>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                         | Description                                      |
|------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hoverValue`     |                  |           | `number`                                     | Gets or sets the `hoverValue` property.          |
| `isHovering`     |                  |           | `boolean`                                    | Gets or sets the `isHovering` property.          |
| `label`          |                  |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`           | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `length`         | `length`         |           | `number`                                     | Gets or sets the `length` property.              |
| `orientation`    | `orientation`    |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `precision`      | `precision`      |           | `number`                                     | Gets or sets the `precision` property.           |
| `readonly`       | `readonly`       |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `size`           | `size`           |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `symbol`         | `symbol`         |           | `string`                                     | Gets or sets the `symbol` property.              |
| `symbolAccessor` | `symbolAccessor` |           | `(index: number) => string`                  | Gets or sets the `symbolAccessor` property.      |
| `themeName`      |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`          | `value`          |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`        | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `blur`          | `(): void`                                       |                                                  |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`         | `(options?: FocusOptions \| undefined): void`    |                                                  |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                        |
|-----------|------------------------------------|
| `root`    | The root container element.        |
| `symbol`  | Individual rating symbol elements. |
| `symbols` | The container for rating symbols.  |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--rating-background-color`     | Color  | The background color.                         |
| `--rating-border-color`         | Color  | The border color.                             |
| `--rating-border-radius`        | String | The border radius.                            |
| `--rating-border-style`         | String | The border style.                             |
| `--rating-border-width`         | String | The border width.                             |
| `--rating-font-family`          | String | The font family CSS custom property.          |
| `--rating-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--rating-font-line-height`     | String | The font line height CSS custom property.     |
| `--rating-font-size`            | String | The font size CSS custom property.            |
| `--rating-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--rating-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--rating-font-weight`          | String | The font weight CSS custom property.          |
| `--rating-foreground-color`     | Color  | The foreground color.                         |
| `--rating-gap`                  | String | The gap CSS custom property.                  |
| `--rating-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--rating-padding-left`         | String | The padding left CSS custom property.         |
| `--rating-padding-right`        | String | The padding right CSS custom property.        |
| `--rating-padding-top`          | String | The padding top CSS custom property.          |
| `--rating-shadow`               | String | The shadow.                                   |
| `--rating-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--rating-shadow-color`         | String | The shadow color CSS custom property.         |
| `--rating-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--rating-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--rating-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--rating-transition-duration`  | String | The transition duration CSS custom property.  |
| `--rating-transition-mode`      | String | The transition mode CSS custom property.      |
| `--rating-transition-property`  | String | The transition property CSS custom property.  |
| `--rating-translate`            | String | The translate CSS custom property.            |

# mosaik-reaction-chat-tool

The `ReactionChatToolElement` element.

**Mixins:** Themeable, Disableable

## Example

Basic usage inside a chat element tools slot:

```html
<mosaik-reaction-chat-tool></mosaik-reaction-chat-tool>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dock`         | `dock`     |           | `"left" \| "right"`                          | Gets or sets the `dock` property.                |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `reactions`    |            |           | `IChatReaction[]`                            | Gets or sets the `reactions` property.           |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(chat: ChatElement): void`                      | Attaches the tool to the specified chat element.<br /><br />**chat**: The chat element to attach to. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `execute`       | `(args: string): boolean`                        | Executes the chat tool with the given arguments.<br /><br />**args**: The arguments to execute the tool with. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description     |
|---------|-----------------|
| `emoji` | The emoji part. |

# mosaik-region-view

RegionView - A view definition component for lazy content instantiation within a Region container.

**Mixins:** Themeable

## Examples

Basic view definition:

```html
<mosaik-region active="home">
  <mosaik-region-view name="home" default>
    <h1>Welcome Home</h1>
    <p>This content is only instantiated when the view is active.</p>
  </mosaik-region-view>
</mosaik-region>
```

Multiple views with components:

```html
<mosaik-region active="dashboard">
  <mosaik-region-view name="dashboard" default>
    <my-dashboard-component></my-dashboard-component>
  </mosaik-region-view>
  <mosaik-region-view name="profile">
    <my-profile-component></my-profile-component>
  </mosaik-region-view>
  <mosaik-region-view name="settings">
    <my-settings-component></my-settings-component>
  </mosaik-region-view>
</mosaik-region>
```

Wizard step definition:

```html
<mosaik-region id="wizard">
  <mosaik-region-view name="step1" default>
    <h2>Step 1: Account Details</h2>
    <mosaik-form><!-- account form fields --></mosaik-form>
  </mosaik-region-view>
  <mosaik-region-view name="step2">
    <h2>Step 2: Preferences</h2>
    <mosaik-form><!-- preferences form --></mosaik-form>
  </mosaik-region-view>
  <mosaik-region-view name="step3">
    <h2>Step 3: Confirmation</h2>
    <div><!-- summary content --></div>
  </mosaik-region-view>
</mosaik-region>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `active`       | `active`  |           | `boolean`                                    | Whether this view is currently active (visible). |
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `default`      |           |           | `boolean`                                    | Whether this view is the default active view in the region. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`         |           |           | `string`                                     | The unique name identifier for this view within a region. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The content to be rendered when this view becomes active in its parent region |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--region-view-font-family`          | String | The view font family CSS custom property.        |
| `--region-view-font-letter-spacing`  | String | The view font letter spacing CSS custom property. |
| `--region-view-font-line-height`     | String | The view font line height CSS custom property.   |
| `--region-view-font-size`            | String | The view font size CSS custom property.          |
| `--region-view-font-text-decoration` | String | The view font text decoration CSS custom property. |
| `--region-view-font-text-transform`  | String | The view font text transform CSS custom property. |
| `--region-view-font-weight`          | String | The view font weight CSS custom property.        |
| `--region-view-gap`                  | String | The view gap CSS custom property.                |
| `--region-view-padding-bottom`       | String | The view padding bottom CSS custom property.     |
| `--region-view-padding-left`         | String | The view padding left CSS custom property.       |
| `--region-view-padding-right`        | String | The view padding right CSS custom property.      |
| `--region-view-padding-top`          | String | The view padding top CSS custom property.        |
| `--region-view-shadow`               | String | The view shadow CSS custom property.             |
| `--region-view-shadow-blur`          | String | The view shadow blur CSS custom property.        |
| `--region-view-shadow-color`         | String | The view shadow color CSS custom property.       |
| `--region-view-shadow-offset-x`      | String | The view shadow offset x CSS custom property.    |
| `--region-view-shadow-offset-y`      | String | The view shadow offset y CSS custom property.    |
| `--region-view-shadow-spread`        | String | The view shadow spread CSS custom property.      |
| `--region-view-transition-duration`  | String | The view transition duration CSS custom property. |
| `--region-view-transition-mode`      | String | The view transition mode CSS custom property.    |
| `--region-view-transition-property`  | String | The view transition property CSS custom property. |
| `--region-view-translate`            | String | The view translate CSS custom property.          |

# mosaik-region

Region - A container component that manages multiple view definitions with exclusive activation and lazy instantiation.

**Mixins:** Themeable

## Examples

Basic wizard with three steps:

```html
<mosaik-region id="wizard" active="step1">
  <mosaik-region-view name="step1" default>
    <div>Welcome to Step 1</div>
  </mosaik-region-view>
  <mosaik-region-view name="step2">
    <div>Proceed to Step 2</div>
  </mosaik-region-view>
  <mosaik-region-view name="step3">
    <div>Final Step</div>
  </mosaik-region-view>
</mosaik-region>

<script>
  const region = document.getElementById('wizard');
  region.activate('step2'); // Switch to step 2
</script>
```

Tabbed interface with navigation:

```html
<mosaik-button-group>
  <mosaik-button label="Overview" onclick="document.querySelector('#tabs').activate('overview')"></mosaik-button>
  <mosaik-button label="Details" onclick="document.querySelector('#tabs').activate('details')"></mosaik-button>
  <mosaik-button label="Settings" onclick="document.querySelector('#tabs').activate('settings')"></mosaik-button>
</mosaik-button-group>

<mosaik-region id="tabs" active="overview">
  <mosaik-region-view name="overview" default>
    <my-overview-component></my-overview-component>
  </mosaik-region-view>
  <mosaik-region-view name="details">
    <my-details-component></my-details-component>
  </mosaik-region-view>
  <mosaik-region-view name="settings">
    <my-settings-component></my-settings-component>
  </mosaik-region-view>
</mosaik-region>
```

Form stepper with validation:

```html
<mosaik-region id="formStepper">
  <mosaik-region-view name="personal" default>
    <h3>Personal Information</h3>
    <form><!-- personal details --></form>
  </mosaik-region-view>
  <mosaik-region-view name="address">
    <h3>Address Details</h3>
    <form><!-- address fields --></form>
  </mosaik-region-view>
  <mosaik-region-view name="review">
    <h3>Review & Submit</h3>
    <div><!-- summary --></div>
  </mosaik-region-view>
</mosaik-region>
```

Event handling for view changes:

```html
<mosaik-region id="eventRegion">
  <mosaik-region-view name="view1" default>View 1 Content</mosaik-region-view>
  <mosaik-region-view name="view2">View 2 Content</mosaik-region-view>
</mosaik-region>

<script>
  const region = document.getElementById('eventRegion');
  region.addEventListener('activeChanged', (e) => {
    console.log(`Changed from ${e.detail.previous} to ${e.detail.active}`);
  });
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `active`       |           |           | `string`                                     | The name of the currently active view.           |
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `activate`      | `(name: string): void`                           | Activates a view by name.<br /><br />**name**: The name of the view to activate |
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `firstUpdated`  | `(changedProperties: Map<keyof this, unknown>): void` |                                                  |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `updated`       | `(changedProperties: Map<string \| number \| symbol, unknown>): void` |                                                  |

## Events

| Event           | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `activeChanged` | `CustomEvent<{active: string, previous?: string}>` | Fired when the active view changes               |
| `changed`       | `PropertyChangedEvent`                           | Emitted when any attribute changes before update |
| `connected`     | `ConnectedEvent`                                 | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`                              | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Contains mosaik-region-view definitions to be managed by the region |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                                      |
|--------|--------------------------------------------------|
| `host` | The container element that renders the active view's content |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--region-font-family`          | String | The font family CSS custom property.          |
| `--region-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--region-font-line-height`     | String | The font line height CSS custom property.     |
| `--region-font-size`            | String | The font size CSS custom property.            |
| `--region-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--region-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--region-font-weight`          | String | The font weight CSS custom property.          |
| `--region-gap`                  | String | The gap CSS custom property.                  |
| `--region-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--region-padding-left`         | String | The padding left CSS custom property.         |
| `--region-padding-right`        | String | The padding right CSS custom property.        |
| `--region-padding-top`          | String | The padding top CSS custom property.          |
| `--region-shadow`               | String | The shadow CSS custom property.               |
| `--region-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--region-shadow-color`         | String | The shadow color CSS custom property.         |
| `--region-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--region-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--region-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--region-transition-duration`  | String | The transition duration CSS custom property.  |
| `--region-transition-mode`      | String | The transition mode CSS custom property.      |
| `--region-transition-property`  | String | The transition property CSS custom property.  |
| `--region-translate`            | String | The translate CSS custom property.            |

# mosaik-repeat-button

Repeat Button - An interactive button element designed to trigger an action repeatedly when held down.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic repeat button:

```html
<mosaik-repeat-button label="Increment"></mosaik-repeat-button>
```

Repeat button with custom delay and interval:

```html
<mosaik-repeat-button label="Hold to repeat" delay="300" interval="100"></mosaik-repeat-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `delay`                      | `delay`                        |           | `number`                                     | Gets or sets the `delay` property.               |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `interval`                   | `interval`                     |           | `number`                                     | Gets or sets the `interval` property.            |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isRepeating`                | `is-repeating`                 |           | `boolean`                                    | Gets or sets the `isRepeating` property.         |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `repeated`                   |                                | readonly  | `IEventEmitter<IRepeatedEventDetail>`        | Called when the button is repeated.<br />Provides reference to `IRepeatedEventDetail` as event detail. |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `repeated`     | `RepeatedEvent`        | Called when the button is repeated.              |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `icon`    | The icon slot for placing an icon inside the button. |
| `label`   | The label slot for text or labels inside the button. |
| `overlay` | The overlay slot (useful for badges or additional visual elements). |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                  |
|----------------|----------------------------------------------|
| `button`       | The button part of the Repeat Button.        |
| `focusRing`    | The focus ring part of the Repeat Button.    |
| `icon`         | The icon part of the Repeat Button.          |
| `innerStack`   | The innerStack part.                         |
| `label`        | The label part of the Repeat Button.         |
| `progressRing` | The progress ring part of the Repeat Button. |
| `ripple`       | The ripple effect part of the Repeat Button. |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--repeat-button-background-color`          | Color  | The background color of the Repeat Button.       |
| `--repeat-button-border-color`              | Color  | The border color of the Repeat Button.           |
| `--repeat-button-border-radius`             | String | The border radius of the Repeat Button.          |
| `--repeat-button-border-style`              | String | The border style of the Repeat Button.           |
| `--repeat-button-border-width`              | String | The border width of the Repeat Button.           |
| `--repeat-button-focus-ring-active-width`   | String | The button focus ring active width CSS custom property. |
| `--repeat-button-focus-ring-color`          | String | The button focus ring color CSS custom property. |
| `--repeat-button-focus-ring-inward-offset`  | String | The button focus ring inward offset CSS custom property. |
| `--repeat-button-focus-ring-outward-offset` | String | The button focus ring outward offset CSS custom property. |
| `--repeat-button-font-family`               | String | The font family of the Repeat Button.            |
| `--repeat-button-font-letter-spacing`       | String | The font letter spacing of the Repeat Button.    |
| `--repeat-button-font-line-height`          | String | The font line height of the Repeat Button.       |
| `--repeat-button-font-size`                 | String | The font size of the Repeat Button.              |
| `--repeat-button-font-text-decoration`      | String | The font text decoration of the Repeat Button.   |
| `--repeat-button-font-text-transform`       | String | The font text transform of the Repeat Button.    |
| `--repeat-button-font-weight`               | String | The font weight of the Repeat Button.            |
| `--repeat-button-foreground-color`          | Color  | The foreground color of the Repeat Button.       |
| `--repeat-button-gap`                       | String | The gap between elements of the Repeat Button.   |
| `--repeat-button-height`                    | String | The button height CSS custom property.           |
| `--repeat-button-icon-min-height`           | String | The button icon min height CSS custom property.  |
| `--repeat-button-icon-min-width`            | String | The button icon min width CSS custom property.   |
| `--repeat-button-line-height`               | String | The line height of the Repeat Button text.       |
| `--repeat-button-min-height`                | String | The button min height CSS custom property.       |
| `--repeat-button-min-width`                 | String | The button min width CSS custom property.        |
| `--repeat-button-padding-bottom`            | String | The padding bottom of the Repeat Button.         |
| `--repeat-button-padding-left`              | String | The padding left of the Repeat Button.           |
| `--repeat-button-padding-right`             | String | The padding right of the Repeat Button.          |
| `--repeat-button-padding-top`               | String | The padding top of the Repeat Button.            |
| `--repeat-button-progress-ring-width`       | String | The button progress ring width CSS custom property. |
| `--repeat-button-progress-thickness`        | String | The button progress thickness CSS custom property. |
| `--repeat-button-ripple-color`              | Color  | The button ripple color CSS custom property.     |
| `--repeat-button-ripple-duration`           | String | The button ripple duration CSS custom property.  |
| `--repeat-button-shadow`                    | String | The shadow of the Repeat Button.                 |
| `--repeat-button-shadow-blur`               | String | The button shadow blur CSS custom property.      |
| `--repeat-button-shadow-color`              | String | The button shadow color CSS custom property.     |
| `--repeat-button-shadow-offset-x`           | String | The button shadow offset x CSS custom property.  |
| `--repeat-button-shadow-offset-y`           | String | The button shadow offset y CSS custom property.  |
| `--repeat-button-shadow-spread`             | String | The button shadow spread CSS custom property.    |
| `--repeat-button-transition-duration`       | String | The transition duration for the Repeat Button.   |
| `--repeat-button-transition-mode`           | String | The transition mode for the Repeat Button.       |
| `--repeat-button-transition-property`       | String | The transition property for the Repeat Button.   |
| `--repeat-button-translate`                 | String | The button translate CSS custom property.        |
| `--repeat-button-width`                     | String | The button width CSS custom property.            |

# mosaik-resize-adorner

Resize Adorner - An interactive UI element typically used to resize an element.

**Mixins:** Themeable, Disableable

## Example

```html
<mosaik-resize-adorner></mosaik-resize-adorner>
```

## Properties

| Property          | Attribute         | Modifiers | Type                                         | Description                                      |
|-------------------|-------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `angle`           | `angle`           |           | `number`                                     | Gets or sets the `angle` property.               |
| `changed`         |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`             |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`        |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`            | `lang`            |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`       |                   |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `transformOrigin` | `transformOrigin` |           | `{ x: number; y: number; }`                  | Gets or sets the `transformOrigin` property.     |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The content of the resize adorner.               |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        |
|-------------|
| `resizable` |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--resize-adorner-border-color`           | Color  |                                                  |
| `--resize-adorner-border-radius`          | String |                                                  |
| `--resize-adorner-border-style`           | String |                                                  |
| `--resize-adorner-border-width`           | String |                                                  |
| `--resize-adorner-font-family`            | String | The adorner font family CSS custom property.     |
| `--resize-adorner-font-letter-spacing`    | String | The adorner font letter spacing CSS custom property. |
| `--resize-adorner-font-line-height`       | String | The adorner font line height CSS custom property. |
| `--resize-adorner-font-size`              | String | The adorner font size CSS custom property.       |
| `--resize-adorner-font-text-decoration`   | String | The adorner font text decoration CSS custom property. |
| `--resize-adorner-font-text-transform`    | String | The adorner font text transform CSS custom property. |
| `--resize-adorner-font-weight`            | String | The adorner font weight CSS custom property.     |
| `--resize-adorner-gap`                    | String | The adorner gap CSS custom property.             |
| `--resize-adorner-padding-bottom`         | String | The adorner padding bottom CSS custom property.  |
| `--resize-adorner-padding-left`           | String | The adorner padding left CSS custom property.    |
| `--resize-adorner-padding-right`          | String | The adorner padding right CSS custom property.   |
| `--resize-adorner-padding-top`            | String | The adorner padding top CSS custom property.     |
| `--resize-adorner-shadow`                 | String | The adorner shadow CSS custom property.          |
| `--resize-adorner-shadow-blur`            | String | The adorner shadow blur CSS custom property.     |
| `--resize-adorner-shadow-color`           | String | The adorner shadow color CSS custom property.    |
| `--resize-adorner-shadow-offset-x`        | String | The adorner shadow offset x CSS custom property. |
| `--resize-adorner-shadow-offset-y`        | String | The adorner shadow offset y CSS custom property. |
| `--resize-adorner-shadow-spread`          | String | The adorner shadow spread CSS custom property.   |
| `--resize-adorner-thumb-background-color` | Color  |                                                  |
| `--resize-adorner-thumb-border-radius`    | String |                                                  |
| `--resize-adorner-transition-duration`    | String | The adorner transition duration CSS custom property. |
| `--resize-adorner-transition-mode`        | String | The adorner transition mode CSS custom property. |
| `--resize-adorner-transition-property`    | String | The adorner transition property CSS custom property. |
| `--resize-adorner-translate`              | String | The adorner translate CSS custom property.       |

# mosaik-resize-thumb

ResizeThumb - A primitive element that provides resize handle functionality.

**Mixins:** Themeable, Disableable, Attachable

## Example

```html
<!-- Inside a parent element (attaches to parent) -->
<mosaik-dialog>
  <mosaik-resize-thumb direction="south-east"></mosaik-resize-thumb>
</mosaik-dialog>

<!-- Attached to specific element via for attribute -->
<div id="resizable-box" style="width: 200px; height: 150px;">
  Content
</div>
<mosaik-resize-thumb for="resizable-box" direction="south-east"></mosaik-resize-thumb>

<!-- With constraints -->
<mosaik-resize-thumb
  direction="south-east"
  min-width="100"
  min-height="80"
  max-width="500"
  max-height="400">
</mosaik-resize-thumb>

<!-- Manual resize handling via events (auto-apply disabled via JavaScript) -->
<mosaik-resize-thumb id="manualThumb" direction="east"></mosaik-resize-thumb>
<script>
  document.querySelector('#manualThumb').autoApply = false;
</script>
```

## Properties

| Property            | Attribute           | Modifiers | Type                                         | Description                                      |
|---------------------|---------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `allowedDirections` | `allowedDirections` |           | `readonly ResizeDirection[]`                 | Gets or sets the `allowedDirections` array.<br /><br />When set, only the specified directions are permitted for resizing.<br />If the current direction is not in the allowed list, resize operations<br />will be blocked. |
| `autoApply`         | `auto-apply`        |           | `boolean`                                    | Gets or sets whether resize changes are automatically applied to the control element.<br />If false, only events are emitted and the control is responsible for applying changes.<br />Defaults to true. |
| `changed`           |                     | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                     | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`           |                     | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`               | `dir`               |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `direction`         | `direction`         |           | `ResizeDirection`                            | Gets or sets the resize `direction`.<br /><br />Determines which direction this resize thumb represents.<br />The cursor style is automatically updated based on this direction. |
| `disabled`          | `disabled`          |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                     | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `for`               | `for`               |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `isResizing`        |                     | readonly  | `boolean`                                    | Gets whether a resize operation is currently in progress. |
| `lang`              | `lang`              |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxHeight`         | `max-height`        |           | `number`                                     | Gets or sets the maximum height the control can be resized to. |
| `maxWidth`          | `max-width`         |           | `number`                                     | Gets or sets the maximum width the control can be resized to. |
| `minHeight`         | `min-height`        |           | `number`                                     | Gets or sets the minimum height the control can be resized to. |
| `minWidth`          | `min-width`         |           | `number`                                     | Gets or sets the minimum width the control can be resized to. |
| `resizeEnd`         |                     | readonly  | `IEventEmitter<IResizeEndEventDetail>`       | Called when a resize operation ends.<br />Provides reference to `IResizeEndEventDetail` as event detail. |
| `resizeStart`       |                     | readonly  | `IEventEmitter<IResizeStartEventDetail>`     | Called when a resize operation starts.<br />Provides reference to `IResizeStartEventDetail` as event detail. |
| `resizing`          |                     | readonly  | `IEventEmitter<IResizingEventDetail>`        | Called during a resize operation.<br />Provides reference to `IResizingEventDetail` as event detail. |
| `themeName`         |                     |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `detach`        | `(): void`                                       | Detaches the element from its current control.   |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `resizeEnd`    | `ResizeEndEvent`       | Fired when a resize operation ends.              |
| `resizeStart`  | `ResizeStartEvent`     | Fired when a resize operation begins.            |
| `resizing`     | `ResizingEvent`        | Fired continuously during a resize operation.    |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description             |
|---------|-------------------------|
| `thumb` | The main thumb element. |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--resize-thumb-border-color`           | String | The thumb border color CSS custom property.      |
| `--resize-thumb-border-radius`          | String | The thumb border radius CSS custom property.     |
| `--resize-thumb-border-style`           | String | The thumb border style CSS custom property.      |
| `--resize-thumb-border-width`           | String | The thumb border width CSS custom property.      |
| `--resize-thumb-font-family`            | String | The thumb font family CSS custom property.       |
| `--resize-thumb-font-letter-spacing`    | String | The thumb font letter spacing CSS custom property. |
| `--resize-thumb-font-line-height`       | String | The thumb font line height CSS custom property.  |
| `--resize-thumb-font-size`              | String | The thumb font size CSS custom property.         |
| `--resize-thumb-font-text-decoration`   | String | The thumb font text decoration CSS custom property. |
| `--resize-thumb-font-text-transform`    | String | The thumb font text transform CSS custom property. |
| `--resize-thumb-font-weight`            | String | The thumb font weight CSS custom property.       |
| `--resize-thumb-gap`                    | String | The thumb gap CSS custom property.               |
| `--resize-thumb-padding-bottom`         | String | The thumb padding bottom CSS custom property.    |
| `--resize-thumb-padding-left`           | String | The thumb padding left CSS custom property.      |
| `--resize-thumb-padding-right`          | String | The thumb padding right CSS custom property.     |
| `--resize-thumb-padding-top`            | String | The thumb padding top CSS custom property.       |
| `--resize-thumb-shadow`                 | String | The thumb shadow CSS custom property.            |
| `--resize-thumb-shadow-blur`            | String | The thumb shadow blur CSS custom property.       |
| `--resize-thumb-shadow-color`           | String | The thumb shadow color CSS custom property.      |
| `--resize-thumb-shadow-offset-x`        | String | The thumb shadow offset x CSS custom property.   |
| `--resize-thumb-shadow-offset-y`        | String | The thumb shadow offset y CSS custom property.   |
| `--resize-thumb-shadow-spread`          | String | The thumb shadow spread CSS custom property.     |
| `--resize-thumb-thumb-background-color` | String | The thumb thumb background color CSS custom property. |
| `--resize-thumb-thumb-border-radius`    | String | The thumb thumb border radius CSS custom property. |
| `--resize-thumb-transition-duration`    | String | The thumb transition duration CSS custom property. |
| `--resize-thumb-transition-mode`        | String | The thumb transition mode CSS custom property.   |
| `--resize-thumb-transition-property`    | String | The thumb transition property CSS custom property. |
| `--resize-thumb-translate`              | String | The thumb translate CSS custom property.         |

# mosaik-resize

Resize - a container that allows its content to be resized via drag handles.

**Mixins:** Themeable, Slottable

## Example

```html
<mosaik-resize mode="immediate">
  <div style="width: 200px; height: 150px; background-color: lightgray;">
    Resizable Content
  </div>
</mosaik-resize>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `active`       | `active`  |           | `boolean`                                    | Gets or sets the `active` property.              |
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `ghostFactory` |           |           | `ResizeGhostFactory \| undefined`            | Gets or sets the `ghostFactory` property.        |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `mode`         | `mode`    |           | `ContainerResizeMode`                        | Gets or sets the `mode` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                  | Type                   | Description                                      |
|------------------------|------------------------|--------------------------------------------------|
| `changed`              | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`            | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`         | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `resizeResizeCanceled` | `ResizeCancelEvent`    | Fired when a resize operation is canceled.       |
| `resizeResizeEnded`    | `ResizeEndEvent`       | Fired when a resize operation is ended.          |
| `resizeResizeStarted`  | `ResizeStartEvent`     | Fired when a resize operation is started.        |
| `resizeResized`        | `ResizingEvent`        | Fired when a resize operation is in progress.    |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for the content to be resized.  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-ribbon

Ribbon - A decorative label component for highlighting status, features, or promotional content.

**Mixins:** Themeable, Sizeable, Variantable, Disableable, Labelable

## Examples

Basic ribbon with label:

```html
<mosaik-ribbon label="New" variant="primary"></mosaik-ribbon>
```

Ribbon with icon (set via JavaScript):

```html
<mosaik-ribbon id="featuredRibbon" label="Featured" variant="success"></mosaik-ribbon>
<script>
  document.querySelector('#featuredRibbon').icon = 'star-icon-path';
</script>
```

Sale badge on product card:

```html
<div class="product-card" style="position: relative;">
  <img src="product.jpg" alt="Product">
  <mosaik-ribbon
    label="50% OFF"
    variant="error"
    size="large"
    style="position: absolute; top: 10px; right: 10px;">
  </mosaik-ribbon>
</div>
```

Status indicator:

```html
<mosaik-ribbon label="Beta" variant="warning" size="small"></mosaik-ribbon>
```

Disabled ribbon:

```html
<mosaik-ribbon label="Expired" disabled></mosaik-ribbon>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |            |           | `string`                                     | Gets or sets the `icon` property.                |
| `iconSize`     |            |           | `Size \| null`                               | Gets or sets the `iconSize` property.            |
| `label`        |            |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`     |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`  |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                               |
|--------|-------------------------------------------|
| `root` | The root container element for the ribbon |
| `text` | The text display element                  |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--ribbon-background-color`     | String | Background color of the ribbon                |
| `--ribbon-border-color`         | String | Border color of the ribbon outline            |
| `--ribbon-border-radius`        | String | Corner rounding radius                        |
| `--ribbon-border-style`         | String | Border line style                             |
| `--ribbon-border-width`         | String | Border thickness                              |
| `--ribbon-font`                 | String | Combined font shorthand property              |
| `--ribbon-font-family`          | String | Font family for ribbon text                   |
| `--ribbon-font-letter-spacing`  | String | Letter spacing for ribbon text                |
| `--ribbon-font-line-height`     | String | The font line height CSS custom property.     |
| `--ribbon-font-size`            | String | Font size for ribbon text                     |
| `--ribbon-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--ribbon-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--ribbon-font-weight`          | String | Font weight for ribbon text                   |
| `--ribbon-foreground-color`     | String | Text and icon color                           |
| `--ribbon-gap`                  | String | Spacing between icon and text                 |
| `--ribbon-padding-bottom`       | String | Bottom padding inside the ribbon              |
| `--ribbon-padding-left`         | String | Left padding inside the ribbon                |
| `--ribbon-padding-right`        | String | Right padding inside the ribbon               |
| `--ribbon-padding-top`          | String | Top padding inside the ribbon                 |
| `--ribbon-shadow`               | String | Drop shadow or elevation effect               |
| `--ribbon-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--ribbon-shadow-color`         | String | The shadow color CSS custom property.         |
| `--ribbon-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--ribbon-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--ribbon-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--ribbon-transition-duration`  | String | Duration of visual transitions                |
| `--ribbon-transition-mode`      | String | Timing function for transitions               |
| `--ribbon-transition-property`  | String | CSS properties to transition                  |
| `--ribbon-translate`            | String | The translate CSS custom property.            |

# RichTextBoxToolboxElement - Toolbar for RichTextBox editor

## Description
The RichTextBoxToolbox component provides a customizable toolbar for the RichTextBox editor with formatting controls. Features include text formatting buttons (bold, italic, underline), paragraph styling, alignment options, list controls, link/image insertion, undo/redo buttons, and customizable button sets.

## Element
- **Tag**: `mosaik-richtextbox-toolbox`
- **Category**: Inputs

## Slots
- **default** - Custom toolbar buttons

## CSS Parts
- `toolbar` - The main toolbar container
- `group` - Button group container
- `button` - Individual toolbar button
- `separator` - Visual separator between groups

## CSS Custom Properties
- `--rich-text-box-toolbox-background-color` - Toolbar background
- `--rich-text-box-toolbox-border-color` - Border color
- `--rich-text-box-toolbox-padding` - Toolbar padding
- `--rich-text-box-toolbox-gap` - Gap between buttons

## Examples

### Basic toolbar
```html
<mosaik-richtextbox-toolbox></mosaik-richtextbox-toolbox>
```

### Custom tool selection
```html
<mosaik-richtextbox-toolbox 
    tools='["bold", "italic", "underline", "|", "link", "image"]'>
</mosaik-richtextbox-toolbox>
```

### Minimal toolbar
```html
<mosaik-richtextbox-toolbox 
    tools='["bold", "italic", "link"]'>
</mosaik-richtextbox-toolbox>
```

### Full toolbar
```html
<mosaik-richtextbox-toolbox 
    tools='[
        "bold", "italic", "underline", "strikethrough", "|",
        "h1", "h2", "h3", "paragraph", "|",
        "alignLeft", "alignCenter", "alignRight", "|",
        "orderedList", "unorderedList", "|",
        "link", "image", "table", "|",
        "undo", "redo"
    ]'>
</mosaik-richtextbox-toolbox>
```

### With custom buttons
```html
<mosaik-richtextbox-toolbox>
    <mosaik-button 
        slot="custom" 
        icon="highlight-icon" 
        aria-label="Highlight"
        data-command="highlight">
    </mosaik-button>
</mosaik-richtextbox-toolbox>
```

### Standalone toolbar (connected to editor)
```html
<mosaik-richtextbox-toolbox id="toolbar"></mosaik-richtextbox-toolbox>
<mosaik-richtextbox id="editor" toolbar="toolbar"></mosaik-richtextbox>
```

# RichTextBoxElement - WYSIWYG rich text editor

## Description
The RichTextBox component provides a full-featured WYSIWYG editor for creating and editing formatted text content. Features include text formatting (bold, italic, underline), paragraph styles, lists, links, images, tables, undo/redo, customizable toolbars, HTML output, and keyboard shortcuts.

## Element
- **Tag**: `mosaik-richtextbox`
- **Category**: Inputs

## Slots
- `toolbar` - Custom toolbar content
- **default** - Initial editor content

## CSS Parts
- `container` - The main container
- `toolbar` - The toolbar area
- `editor` - The contenteditable editor area
- `statusbar` - The status bar

## CSS Custom Properties
- `--rich-text-box-background-color` - Editor background
- `--rich-text-box-border-color` - Border color
- `--rich-text-box-border-radius` - Border radius
- `--rich-text-box-font-family` - Font family
- `--rich-text-box-font-size` - Font size
- `--rich-text-box-min-height` - Minimum editor height
- `--rich-text-box-padding` - Editor padding

## Dependencies
- `mosaik-richtextbox-toolbox` - Default toolbar component

## Examples

### Basic rich text editor
```html
<mosaik-richtextbox 
    label="Description" 
    placeholder="Enter text...">
</mosaik-richtextbox>
```

### With initial content
```html
<mosaik-richtextbox label="Article">
    <p>Initial <strong>formatted</strong> content</p>
</mosaik-richtextbox>
```

### Custom toolbar
```html
<mosaik-richtextbox>
    <mosaik-richtextbox-toolbox 
        slot="toolbar" 
        tools='["bold", "italic", "link"]'>
    </mosaik-richtextbox-toolbox>
</mosaik-richtextbox>
```

### Get HTML content
```html
<mosaik-richtextbox id="editor"></mosaik-richtextbox>
<mosaik-button id="save" label="Save"></mosaik-button>

<script>
    document.getElementById('save').addEventListener('click', () => {
        const editor = document.getElementById('editor');
        const html = editor.getHTML();
        console.log('Content:', html);
    });
</script>
```

### With max length
```html
<mosaik-richtextbox 
    label="Bio" 
    max-length="500" 
    show-counter="true">
</mosaik-richtextbox>
```

# mosaik-richtextbox-toolbox

Rich Text Box Toolbox - A formatting toolbar for rich text editing controls.

**Mixins:** Themeable

## Examples

Basic toolbox with editor reference:

```html
<mosaik-richtextbox-toolbox id="toolbox"></mosaik-richtextbox-toolbox>
<mosaik-richtextbox id="editor"></mosaik-richtextbox>
<script>
  document.getElementById('toolbox').editor = document.getElementById('editor');
</script>
```

Standalone toolbox (editor connected later):

```html
<mosaik-richtextbox-toolbox id="toolbox"></mosaik-richtextbox-toolbox>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `editor`       |           |           | `RichTextBoxElement \| null`                 | Gets or sets the `editor` property.              |
| `intl`         |           | readonly  | `RichTextBoxElementIntl`                     | Returns the `intl` property.                     |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onAction`      | `(name: RichTextBoxTool): void`                  | **name**: The toolbox action.                    |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `divider` | The vertical separator between tool groups       |
| `group`   | A logical grouping of related formatting buttons |

## CSS Custom Properties

| Property                                       | Type   | Description                                      |
|------------------------------------------------|--------|--------------------------------------------------|
| `--rich-text-box-toolbox-background-color`     | String | The background color of the toolbox              |
| `--rich-text-box-toolbox-border-color`         | String | The border color                                 |
| `--rich-text-box-toolbox-border-radius`        | String | The corner rounding radius                       |
| `--rich-text-box-toolbox-border-style`         | String | The border line style                            |
| `--rich-text-box-toolbox-border-width`         | String | The border thickness                             |
| `--rich-text-box-toolbox-font-family`          | String | The text box toolbox font family CSS custom property. |
| `--rich-text-box-toolbox-font-letter-spacing`  | String | The text box toolbox font letter spacing CSS custom property. |
| `--rich-text-box-toolbox-font-line-height`     | String | The text box toolbox font line height CSS custom property. |
| `--rich-text-box-toolbox-font-size`            | String | The text box toolbox font size CSS custom property. |
| `--rich-text-box-toolbox-font-text-decoration` | String | The text box toolbox font text decoration CSS custom property. |
| `--rich-text-box-toolbox-font-text-transform`  | String | The text box toolbox font text transform CSS custom property. |
| `--rich-text-box-toolbox-font-weight`          | String | The text box toolbox font weight CSS custom property. |
| `--rich-text-box-toolbox-foreground-color`     | String | The button icon/text color                       |
| `--rich-text-box-toolbox-gap`                  | String | The spacing between tool groups                  |
| `--rich-text-box-toolbox-orientation`          | String | The text box toolbox orientation CSS custom property. |
| `--rich-text-box-toolbox-padding-bottom`       | String | The bottom padding inside the toolbox            |
| `--rich-text-box-toolbox-padding-left`         | String | The left padding inside the toolbox              |
| `--rich-text-box-toolbox-padding-right`        | String | The right padding inside the toolbox             |
| `--rich-text-box-toolbox-padding-top`          | String | The top padding inside the toolbox               |
| `--rich-text-box-toolbox-shadow`               | String | The drop shadow or elevation effect              |
| `--rich-text-box-toolbox-shadow-blur`          | String | The text box toolbox shadow blur CSS custom property. |
| `--rich-text-box-toolbox-shadow-color`         | String | The text box toolbox shadow color CSS custom property. |
| `--rich-text-box-toolbox-shadow-offset-x`      | String | The text box toolbox shadow offset x CSS custom property. |
| `--rich-text-box-toolbox-shadow-offset-y`      | String | The text box toolbox shadow offset y CSS custom property. |
| `--rich-text-box-toolbox-shadow-spread`        | String | The text box toolbox shadow spread CSS custom property. |
| `--rich-text-box-toolbox-transition-duration`  | String | The text box toolbox transition duration CSS custom property. |
| `--rich-text-box-toolbox-transition-mode`      | String | The text box toolbox transition mode CSS custom property. |
| `--rich-text-box-toolbox-transition-property`  | String | The text box toolbox transition property CSS custom property. |
| `--rich-text-box-toolbox-translate`            | String | The text box toolbox translate CSS custom property. |

# mosaik-richtextbox

Rich Text Box - A user interface component for inputting and displaying formatted text.

**Mixins:** Themeable, Clearable, Valueable, Disableable, Slottable, Appearanceable, Variantable, Invalidable, Labelable, Focusable

## Example

```html
<mosaik-richtextbox></mosaik-richtextbox>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`  | `autocomplete`  |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`     |                 |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`       |                 |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`     |                 |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `intl`          |                 | readonly  | `RichTextBoxElementIntl`                     | Returns the `intl` property.                     |
| `invalid`       | `invalid`       |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`   | `is-clearable`  |           | `boolean`                                    | Gets or sets the `isClearable` property.<br />The default value is `false`, which means the element is not clearable. |
| `isFocused`     | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`         |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxlength`     | `maxlength`     |           | `number \| null`                             | Gets or sets the `maxlength` property.           |
| `minlength`     | `minlength`     |           | `number \| null`                             | Gets or sets the `minlength` property.           |
| `multilineRows` | `multilineRows` |           | `number`                                     | Gets or sets the `multilineRows` property.       |
| `name`          | `name`          |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`        |                 |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `pattern`       | `pattern`       |           | `string`                                     | Gets or sets the `pattern` property.             |
| `placeholder`   | `placeholder`   |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`      | `readonly`      |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`      | `required`      |           | `boolean`                                    | Gets or sets the `required` property.            |
| `resize`        | `resize`        |           | `ResizeMode`                                 | Gets or sets the `resize` property.              |
| `showToolbar`   | `showToolbar`   |           | `boolean`                                    | Gets or sets the `showToolbar` property.         |
| `state`         | `state`         |           | `InputState`                                 | Gets or sets the `state` property.               |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`         | `value`         |           | `string`                                     | Gets or sets the `value` property.               |
| `variant`       | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       | Removes focus from the element.                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `command`               | `(name: RichTextBoxTool): boolean`               |                                                  |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       | Sets focus to the element.                       |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | The prefix slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The suffix slot.                                 |

## CSS Shadow Parts

| Part        | Description         |
|-------------|---------------------|
| `focusRing` | The focusRing part. |
| `inner`     |                     |
| `input`     |                     |
| `label`     | The label part.     |
| `prefix`    |                     |
| `suffix`    |                     |
| `toolbox`   | The toolbox part.   |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--rich-text-box-background-color`     | String | The text box background color CSS custom property. |
| `--rich-text-box-border-color`         | String | The text box border color CSS custom property.   |
| `--rich-text-box-border-radius`        | String | The text box border radius CSS custom property.  |
| `--rich-text-box-border-style`         | String | The text box border style CSS custom property.   |
| `--rich-text-box-border-width`         | String | The text box border width CSS custom property.   |
| `--rich-text-box-font-family`          | String | The text box font family CSS custom property.    |
| `--rich-text-box-font-letter-spacing`  | String | The text box font letter spacing CSS custom property. |
| `--rich-text-box-font-line-height`     | String | The text box font line height CSS custom property. |
| `--rich-text-box-font-size`            | String | The text box font size CSS custom property.      |
| `--rich-text-box-font-text-decoration` | String | The text box font text decoration CSS custom property. |
| `--rich-text-box-font-text-transform`  | String | The text box font text transform CSS custom property. |
| `--rich-text-box-font-weight`          | String | The text box font weight CSS custom property.    |
| `--rich-text-box-foreground-color`     | String | The text box foreground color CSS custom property. |
| `--rich-text-box-gap`                  | String | The text box gap CSS custom property.            |
| `--rich-text-box-height`               | String | The text box height CSS custom property.         |
| `--rich-text-box-padding-bottom`       | String | The text box padding bottom CSS custom property. |
| `--rich-text-box-padding-left`         | String | The text box padding left CSS custom property.   |
| `--rich-text-box-padding-right`        | String | The text box padding right CSS custom property.  |
| `--rich-text-box-padding-top`          | String | The text box padding top CSS custom property.    |
| `--rich-text-box-shadow`               | String | The text box shadow CSS custom property.         |
| `--rich-text-box-shadow-blur`          | String | The text box shadow blur CSS custom property.    |
| `--rich-text-box-shadow-color`         | String | The text box shadow color CSS custom property.   |
| `--rich-text-box-shadow-offset-x`      | String | The text box shadow offset x CSS custom property. |
| `--rich-text-box-shadow-offset-y`      | String | The text box shadow offset y CSS custom property. |
| `--rich-text-box-shadow-spread`        | String | The text box shadow spread CSS custom property.  |
| `--rich-text-box-transition-duration`  | String | The text box transition duration CSS custom property. |
| `--rich-text-box-transition-mode`      | String | The text box transition mode CSS custom property. |
| `--rich-text-box-transition-property`  | String | The text box transition property CSS custom property. |
| `--rich-text-box-translate`            | String | The text box translate CSS custom property.      |

# mosaik-ripple

Ripple - An interactive visual effect component that creates expanding circular animations on user interaction.

**Mixins:** Themeable, Variantable, Disableable, Attachable

## Examples

Basic ripple attached to an interactive element:

```html
<div id="interactive-element" style="padding: 16px; cursor: pointer;">Click Me</div>
<mosaik-ripple for="interactive-element"></mosaik-ripple>
```

Ripple with variant and centered mode:

```html
<div id="custom-card" class="interactive-card">Click anywhere on this card</div>
<mosaik-ripple for="custom-card" variant="primary" centered></mosaik-ripple>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `centered`     | `centered` |           | `boolean`                                    | Gets or sets the `centered` property.            |
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `control`      |            | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `duration`     | `duration` |           | `CssTime`                                    | Gets or sets the `duration` property.            |
| `for`          | `for`      |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`  |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.<br /><br />**control**: The element or id that controls the attachable element. |
| `detach`        | `(): void`                                       | Detaches the element from its current control.   |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                        | Type   | Description                                      |
|---------------------------------|--------|--------------------------------------------------|
| `--ripple-background-color`     | String | The background color of the ripple animation circles |
| `--ripple-font-family`          | String | The font family CSS custom property.             |
| `--ripple-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--ripple-font-line-height`     | String | The font line height CSS custom property.        |
| `--ripple-font-size`            | String | The font size CSS custom property.               |
| `--ripple-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--ripple-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--ripple-font-weight`          | String | The font weight CSS custom property.             |
| `--ripple-gap`                  | String | The gap CSS custom property.                     |
| `--ripple-padding-bottom`       | String | The padding bottom CSS custom property.          |
| `--ripple-padding-left`         | String | The padding left CSS custom property.            |
| `--ripple-padding-right`        | String | The padding right CSS custom property.           |
| `--ripple-padding-top`          | String | The padding top CSS custom property.             |
| `--ripple-shadow`               | String | The shadow CSS custom property.                  |
| `--ripple-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--ripple-shadow-color`         | String | The shadow color CSS custom property.            |
| `--ripple-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--ripple-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--ripple-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--ripple-transition-duration`  | String | The transition duration CSS custom property.     |
| `--ripple-transition-mode`      | String | The transition mode CSS custom property.         |
| `--ripple-transition-property`  | String | The transition property CSS custom property.     |
| `--ripple-translate`            | String | The translate CSS custom property.               |

# mosaik-scale

Scale - A component for displaying scales, such as sliders or rating scales.

**Mixins:** Themeable, Disableable, Attachable

## Examples

Scale effect attached to a card element:

```html
<div id="product-card" style="width: 200px; height: 150px;">Product Card</div>
<mosaik-scale for="product-card"></mosaik-scale>
```

Scale with shrink mode and custom factor:

```html
<div id="button-el" style="display: inline-block; padding: 8px 16px;">Hover Me</div>
<mosaik-scale for="button-el" mode="shrink" factor="0.05"></mosaik-scale>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `duration`     | `duration` |           | `CssTime`                                    | Gets or sets the `duration` property.            |
| `factor`       | `factor`   |           | `number`                                     | Gets or sets the `factor` property.              |
| `for`          | `for`      |           | `string \| null`                             | Gets or sets the `for` property.<br />The `for` property reflects the value of the `for` attribute, which is the ID of the element's associated control. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `mode`         | `mode`     |           | `ScaleMode`                                  | Gets or sets the `mode` property.                |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method            | Type                                             | Description                                      |
|-------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`      | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`          | `(control: string \| HTMLElement): void`         | **control**: The control or id to attach.        |
| `detach`          | `(): void`                                       |                                                  |
| `emit`            | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`             | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`              | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate` | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `requestUpdate`   | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--scale-font-family`          | String | The font family CSS custom property.          |
| `--scale-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--scale-font-line-height`     | String | The font line height CSS custom property.     |
| `--scale-font-size`            | String | The font size CSS custom property.            |
| `--scale-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--scale-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--scale-font-weight`          | String | The font weight CSS custom property.          |
| `--scale-gap`                  | String | The gap CSS custom property.                  |
| `--scale-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--scale-padding-left`         | String | The padding left CSS custom property.         |
| `--scale-padding-right`        | String | The padding right CSS custom property.        |
| `--scale-padding-top`          | String | The padding top CSS custom property.          |
| `--scale-shadow`               | String | The shadow CSS custom property.               |
| `--scale-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--scale-shadow-color`         | String | The shadow color CSS custom property.         |
| `--scale-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--scale-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--scale-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--scale-transition-duration`  | String | The transition duration CSS custom property.  |
| `--scale-transition-mode`      | String | The transition mode CSS custom property.      |
| `--scale-transition-property`  | String | The transition property CSS custom property.  |
| `--scale-translate`            | String | The translate CSS custom property.            |

# mosaik-scheduler-agenda-view

Scheduler Agenda View - A chronological list view of events.

**Mixins:** Themeable, Sizeable, Appearanceable, Variantable, Localeable, Disableable

## Example

```html
<mosaik-scheduler-agenda-view days-ahead="14"></mosaik-scheduler-agenda-view>
```

## Properties

| Property                       | Attribute              | Modifiers | Type                                             | Description                                      |
|--------------------------------|------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `agendaItems`                  |                        | readonly  | `IAgendaViewDay[]`                               | Gets the agenda items for rendering.             |
| `appearance`                   | `appearance`           |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`                |                        |           | `Date[]`                                         | Gets or sets the blackout dates that should be disabled. |
| `changed`                      |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collectedEvents`              |                        |           | `ICollectedEvent[]`                              | Gets or sets the collected events to display.    |
| `connected`                    |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `datescaleItems`               |                        | readonly  | `IDatescaleItem[]`                               | Gets the datescale items for the datescale component. |
| `dayFormat`                    | `dayFormat`            |           | `string`                                         | Gets or sets the format string for day numbers.  |
| `daysAhead`                    | `daysAhead`            |           | `number`                                         | Gets or sets the number of days ahead to display. |
| `dir`                          | `dir`                  |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                     | `disabled`             |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`                 |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `firstDayOfWeek`               | `firstDayOfWeek`       |           | `DayOfWeek`                                      | Gets or sets the first day of the week.          |
| `hasEvents`                    |                        | readonly  | `boolean`                                        | Returns whether there are any events to display. |
| `intl`                         |                        |           | `SchedulerElementIntl \| null`                   | Gets or sets the internationalization helper.    |
| `isTodayHighlighted`           | `isTodayHighlighted`   |           | `boolean`                                        | Gets or sets whether today is highlighted.       |
| `isWeekendHighlighted`         | `isWeekendHighlighted` |           | `boolean`                                        | Gets or sets whether weekends are highlighted.   |
| `lang`                         | `lang`                 |           | `string`                                         | The lang property indicates the language of the element's content. |
| `locale`                       |                        |           | `string`                                         | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `monthDayFormat`               | `monthDayFormat`       |           | `string`                                         | Gets or sets the format string for month-day display. |
| `schedulerBeforeEventActivate` |                        | readonly  | `IEventEmitter<ISchedulerBeforeEventActivateEventDetail>` | Called before an event is activated (cancelable). |
| `schedulerBeforeSelectRange`   |                        | readonly  | `IEventEmitter<ISchedulerBeforeSelectRangeEventDetail>` | Called before a range is selected (cancelable).  |
| `schedulerEventActivate`       |                        | readonly  | `IEventEmitter<ISchedulerEventActivateEventDetail>` | Called after an event is activated.              |
| `schedulerSelectRange`         |                        | readonly  | `IEventEmitter<ISchedulerSelectRangeEventDetail>` | Called after a range is selected.                |
| `size`                         | `size`                 |           | `Size`                                           | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `specialDates`                 |                        |           | `Date[]`                                         | Gets or sets the special dates that should be highlighted. |
| `startDate`                    | `startDate`            |           | `Date \| null`                                   | Gets or sets the start date for the visible range. |
| `themeName`                    |                        |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeFormat`                   | `timeFormat`           |           | `string`                                         | Gets or sets the format string for time display. |
| `variant`                      | `variant`              |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                         |                        | readonly  | `SchedulerView`                                  | Gets the layout mode for this view.              |
| `weekdayFormat`                | `weekdayFormat`        |           | `string`                                         | Gets or sets the format string for weekday headers. |

## Methods

| Method            | Type                                             | Description                                      |
|-------------------|--------------------------------------------------|--------------------------------------------------|
| `activateEvent`   | `(eventKey: string, trigger?: SchedulerEventActivateTrigger): boolean` | Activates an event programmatically.<br /><br />**eventKey**: The event key to activate.<br />**trigger**: The activation trigger. |
| `adoptStyle`      | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`            | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `formatTimeRange` | `(startTime: Date, endTime: Date): string`       | Formats the time range for display.<br /><br />**startTime**: The start time.<br />**endTime**: The end time. |
| `isBlackoutDate`  | `(date: Date): boolean`                          | Returns true when a date is configured as blackout date.<br /><br />**date**: The date to check. |
| `isSpecialDate`   | `(date: Date): boolean`                          | Returns true when a date is configured as special date.<br /><br />**date**: The date to check. |
| `isToday`         | `(date: Date): boolean`                          | Returns true when the given date is today.<br /><br />**date**: The date to check. |
| `isWeekend`       | `(date: Date): boolean`                          | Returns true when the given date is weekend.<br /><br />**date**: The date to check. |
| `off`             | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`              | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`   | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                          | Type                                | Description                                      |
|--------------------------------|-------------------------------------|--------------------------------------------------|
| `changed`                      | `PropertyChangedEvent`              | Emitted when any attribute changes before update |
| `connected`                    | `ConnectedEvent`                    | Emitted when the element is connected to the DOM |
| `disconnected`                 | `DisconnectedEvent`                 | Emitted when the element is disconnected from the DOM |
| `schedulerBeforeEventActivate` | `SchedulerBeforeEventActivateEvent` | Emitted before an event is activated (cancelable) |
| `schedulerBeforeSelectRange`   | `SchedulerBeforeSelectRangeEvent`   | Emitted before a range is selected (cancelable)  |
| `schedulerEventActivate`       | `SchedulerEventActivateEvent`       | Emitted after an event is activated              |
| `schedulerSelectRange`         | `SchedulerSelectRangeEvent`         | Emitted after a range is selected                |

## Slots

| Name                               | Description                                      |
|------------------------------------|--------------------------------------------------|
| `empty-state`                      | The empty-state slot.                            |
| `event-${item.events[0].eventKey}` | The event-${item.events[0].eventKey} slot.       |
| `style`                            | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part              | Description                              |
|-------------------|------------------------------------------|
| `body`            | The body containing datescale and events |
| `container`       | The main container                       |
| `datescale`       | The datescale component on the left      |
| `empty-state`     | Shown when no events exist               |
| `event-content`   | The event content area                   |
| `event-indicator` | The colored indicator bar                |
| `events-wrapper`  | The wrapper for event rows               |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-agenda-view-background-color`       | Color  | Background color of the view                     |
| `--scheduler-agenda-view-border-color`           | Color  | Border color                                     |
| `--scheduler-agenda-view-border-radius`          | String | Border radius                                    |
| `--scheduler-agenda-view-border-style`           | String | Border style                                     |
| `--scheduler-agenda-view-border-width`           | String | Border width                                     |
| `--scheduler-agenda-view-day-header-font-size`   | String | Font size for day headers                        |
| `--scheduler-agenda-view-day-header-font-weight` | String | Font weight for day headers                      |
| `--scheduler-agenda-view-event-item-padding-bottom` | String | Bottom padding for event items                   |
| `--scheduler-agenda-view-event-item-padding-left` | String | Left padding for event items                     |
| `--scheduler-agenda-view-event-item-padding-right` | String | Right padding for event items                    |
| `--scheduler-agenda-view-event-item-padding-top` | String | Top padding for event items                      |
| `--scheduler-agenda-view-event-row-min-height`   | String | Minimum height for event rows                    |
| `--scheduler-agenda-view-event-time-font-size`   | String | Font size for event time display                 |
| `--scheduler-agenda-view-event-title-font-size`  | String | Font size for event titles                       |
| `--scheduler-agenda-view-event-title-font-weight` | String | Font weight for event titles                     |
| `--scheduler-agenda-view-font-family`            | String | The agenda view font family CSS custom property. |
| `--scheduler-agenda-view-font-letter-spacing`    | String | The agenda view font letter spacing CSS custom property. |
| `--scheduler-agenda-view-font-line-height`       | String | The agenda view font line height CSS custom property. |
| `--scheduler-agenda-view-font-size`              | String | The agenda view font size CSS custom property.   |
| `--scheduler-agenda-view-font-text-decoration`   | String | The agenda view font text decoration CSS custom property. |
| `--scheduler-agenda-view-font-text-transform`    | String | The agenda view font text transform CSS custom property. |
| `--scheduler-agenda-view-font-weight`            | String | The agenda view font weight CSS custom property. |
| `--scheduler-agenda-view-foreground-color`       | Color  | Foreground/text color                            |
| `--scheduler-agenda-view-gap`                    | String | Gap between elements                             |
| `--scheduler-agenda-view-padding-bottom`         | String | Bottom padding                                   |
| `--scheduler-agenda-view-padding-left`           | String | Left padding                                     |
| `--scheduler-agenda-view-padding-right`          | String | Right padding                                    |
| `--scheduler-agenda-view-padding-top`            | String | Top padding                                      |
| `--scheduler-agenda-view-shadow`                 | String | The agenda view shadow CSS custom property.      |
| `--scheduler-agenda-view-shadow-blur`            | String | The agenda view shadow blur CSS custom property. |
| `--scheduler-agenda-view-shadow-color`           | String | The agenda view shadow color CSS custom property. |
| `--scheduler-agenda-view-shadow-offset-x`        | String | The agenda view shadow offset x CSS custom property. |
| `--scheduler-agenda-view-shadow-offset-y`        | String | The agenda view shadow offset y CSS custom property. |
| `--scheduler-agenda-view-shadow-spread`          | String | The agenda view shadow spread CSS custom property. |
| `--scheduler-agenda-view-today-background-color` | Color  | Background color for today's row                 |
| `--scheduler-agenda-view-transition-duration`    | String | The agenda view transition duration CSS custom property. |
| `--scheduler-agenda-view-transition-mode`        | String | The agenda view transition mode CSS custom property. |
| `--scheduler-agenda-view-transition-property`    | String | The agenda view transition property CSS custom property. |
| `--scheduler-agenda-view-translate`              | String | The agenda view translate CSS custom property.   |
| `--scheduler-agenda-view-weekend-background-color` | Color  | Background color for weekend rows                |

# mosaik-scheduler-column-header

SchedulerColumnHeader - The header for a day column showing weekday and date.

**Mixins:** Themeable, Localeable

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `date`         |           |           | `string`                                     | Gets or sets the date for this header.           |
| `dayNumber`    |           | readonly  | `number`                                     | Gets the day number.                             |
| `dir`          | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isToday`      |           |           | `boolean`                                    | Gets or sets whether this column represents today. |
| `lang`         | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `locale`       |           |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `weekdayName`  |           | readonly  | `string`                                     | Gets the weekday name.                           |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part        | Description        |
|-------------|--------------------|
| `container` | The main container |
| `day`       | The day number     |
| `weekday`   | The weekday text   |

## CSS Custom Properties

| Property                                     | Type   | Description           |
|----------------------------------------------|--------|-----------------------|
| `--scheduler-column-header-background-color` | String | Background color      |
| `--scheduler-column-header-color`            | String | Text color            |
| `--scheduler-column-header-today-color`      | String | Text color when today |

# mosaik-scheduler-column

SchedulerColumn - A single day column in the scheduler.

**Mixins:** Themeable, Localeable

## Properties

| Property              | Attribute | Modifiers | Type                                         | Description                                      |
|-----------------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`           |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `date`                |           |           | `string`                                     | Gets or sets the date for this column.           |
| `dir`                 | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected`        |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `events`              |           |           | `IPositionedEvent[]`                         | Gets or sets the positioned events for this column. |
| `hourEnd`             |           | readonly  | `number`                                     | Gets the hour end from inheritance.              |
| `hourStart`           |           | readonly  | `number`                                     | Gets the hour start from inheritance.            |
| `isToday`             |           |           | `boolean`                                    | Gets whether this column represents today.       |
| `lang`                | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `locale`              |           |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `nowIndicatorTop`     |           | readonly  | `number`                                     | Gets the now indicator top position.             |
| `nowIndicatorVisible` |           | readonly  | `boolean`                                    | Gets whether the now indicator is visible.       |
| `selection`           |           | readonly  | `{ top: number; height: number; } \| null`   | Gets the selection state for rendering.          |
| `stepMinutes`         |           | readonly  | `number`                                     | Gets the step minutes from inheritance.          |
| `themeName`           |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onTimelinePointerDown` | `(event: PointerEvent): void`                    | Handles pointer down on the timeline for selection. |
| `onTimelinePointerMove` | `(event: PointerEvent): void`                    | Handles pointer move for selection.              |
| `onTimelinePointerUp`   | `(_event: PointerEvent): void`                   | Handles pointer up to complete selection.        |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part            | Description                                   |
|-----------------|-----------------------------------------------|
| `container`     | The main container holding all column content |
| `events`        | The events container                          |
| `now-indicator` | The now indicator line                        |
| `selection`     | The selection overlay for drag selection      |
| `timeline`      | The timeline grid for time slots              |

## CSS Custom Properties

| Property                              | Type   | Description      |
|---------------------------------------|--------|------------------|
| `--scheduler-column-background-color` | String | Background color |
| `--scheduler-column-border-color`     | String | Border color     |

# mosaik-scheduler-columns

SchedulerColumns - Container for day columns in the scheduler.

**Mixins:** Themeable

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part        | Description        |
|-------------|--------------------|
| `container` | The main container |

## CSS Custom Properties

| Property                  | Type   | Description         |
|---------------------------|--------|---------------------|
| `--scheduler-columns-gap` | String | Gap between columns |

# mosaik-scheduler-datescale

SchedulerDatescale - Container for date labels in the scheduler.

**Mixins:** Themeable, Localeable

## Example

```html
<!-- Internal component - used by the scheduler to display date labels.
     Configure via the parent scheduler's properties. -->
<mosaik-scheduler-datescale></mosaik-scheduler-datescale>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `items`        |           |           | `IDatescaleItem[]`                           | Gets or sets the date items to display.          |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`       |           |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                  |
|--------------|------------------------------|
| `date-panel` | The container for date items |
| `day-number` | The day number label         |
| `weekday`    | The weekday label            |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-datescale-background-color`         | Color  | Background color of the datescale                |
| `--scheduler-datescale-blackout-stripe-color`    | Color  | Color of blackout day stripes                    |
| `--scheduler-datescale-blackout-stripe-size`     | String | Size of blackout day stripe pattern              |
| `--scheduler-datescale-cell-width`               | String | Width of each date cell                          |
| `--scheduler-datescale-day-number-color`         | Color  | Color of the day number                          |
| `--scheduler-datescale-day-number-font-size`     | String | Font size of the day number                      |
| `--scheduler-datescale-day-number-font-weight`   | String | Font weight of the day number                    |
| `--scheduler-datescale-font-family`              | String | Font family for datescale text                   |
| `--scheduler-datescale-font-letter-spacing`      | String | Letter spacing for datescale text                |
| `--scheduler-datescale-font-line-height`         | String | Line height for datescale text                   |
| `--scheduler-datescale-font-size`                | String | Font size for datescale text                     |
| `--scheduler-datescale-font-text-decoration`     | String | Text decoration for datescale text               |
| `--scheduler-datescale-font-text-transform`      | String | Text transform for datescale text                |
| `--scheduler-datescale-font-weight`              | String | Font weight for datescale text                   |
| `--scheduler-datescale-gap`                      | String | The datescale gap CSS custom property.           |
| `--scheduler-datescale-padding-bottom`           | String | Bottom padding for date cells                    |
| `--scheduler-datescale-padding-left`             | String | Left padding for date cells                      |
| `--scheduler-datescale-padding-right`            | String | Right padding for date cells                     |
| `--scheduler-datescale-padding-top`              | String | Top padding for date cells                       |
| `--scheduler-datescale-row-border-color`         | Color  | Border color for date rows                       |
| `--scheduler-datescale-row-border-style`         | String | Border style for date rows                       |
| `--scheduler-datescale-row-border-width`         | String | Border width for date rows                       |
| `--scheduler-datescale-row-height`               | String | Height of each date row                          |
| `--scheduler-datescale-shadow`                   | String | The datescale shadow CSS custom property.        |
| `--scheduler-datescale-shadow-blur`              | String | The datescale shadow blur CSS custom property.   |
| `--scheduler-datescale-shadow-color`             | String | The datescale shadow color CSS custom property.  |
| `--scheduler-datescale-shadow-offset-x`          | String | The datescale shadow offset x CSS custom property. |
| `--scheduler-datescale-shadow-offset-y`          | String | The datescale shadow offset y CSS custom property. |
| `--scheduler-datescale-shadow-spread`            | String | The datescale shadow spread CSS custom property. |
| `--scheduler-datescale-today-background-color`   | Color  | Background color for today's date                |
| `--scheduler-datescale-today-day-number-color`   | Color  | Color of today's day number                      |
| `--scheduler-datescale-today-weekday-color`      | Color  | Color of today's weekday label                   |
| `--scheduler-datescale-transition-duration`      | String | The datescale transition duration CSS custom property. |
| `--scheduler-datescale-transition-mode`          | String | The datescale transition mode CSS custom property. |
| `--scheduler-datescale-transition-property`      | String | The datescale transition property CSS custom property. |
| `--scheduler-datescale-translate`                | String | The datescale translate CSS custom property.     |
| `--scheduler-datescale-weekday-color`            | Color  | Color of weekday labels                          |
| `--scheduler-datescale-weekday-font-size`        | String | Font size for weekday labels                     |
| `--scheduler-datescale-weekday-font-weight`      | String | Font weight for weekday labels                   |
| `--scheduler-datescale-weekday-text-transform`   | String | Text transform for weekday labels                |
| `--scheduler-datescale-weekend-background-color` | Color  | Background color for weekend dates               |

# mosaik-scheduler-event-renderer

SchedulerEventRenderer - The visual representation of an event in the grid.

**Mixins:** Themeable

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `color`        |           |           | `string`                                     | Gets or sets the color token for the event.      |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `eventKey`     |           |           | `string`                                     | Gets or sets the event key.                      |
| `height`       |           |           | `number`                                     | Gets or sets the height as percentage.           |
| `lang`         | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `left`         |           |           | `number`                                     | Gets or sets the left position as percentage (for lane calculation). |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `top`          |           |           | `number`                                     | Gets or sets the top position as percentage.     |
| `width`        |           |           | `number`                                     | Gets or sets the width as percentage (for lane calculation). |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part        | Description                 |
|-------------|-----------------------------|
| `container` | The main container          |
| `content`   | The content area            |
| `footer`    | The footer slot container   |
| `meta`      | The meta slot container     |
| `subtitle`  | The subtitle slot container |
| `title`     | The title slot container    |

## CSS Custom Properties

| Property                                       | Type   | Description                         |
|------------------------------------------------|--------|-------------------------------------|
| `--scheduler-event-renderer-background-color`  | String | Background color                    |
| `--scheduler-event-renderer-border-left-width` | String | Left border width (color indicator) |
| `--scheduler-event-renderer-border-radius`     | String | Border radius                       |

# mosaik-scheduler-event

SchedulerEvent - A public event definition element for the Scheduler.

**Mixins:** Themeable, Rippleable, Slottable, Focusable, Disableable, Variantable, Valueable, Appearanceable, Boundable

## Example

Basic event definition:

```html
<mosaik-scheduler>
  <mosaik-scheduler-event event-key="meeting-1" start="2026-02-13T10:00" end="2026-02-13T11:00">
    <span slot="title">Team Meeting</span>
    <span slot="content">Discuss project progress</span>
    <span slot="footer">Microsoft Teams</span>
  </mosaik-scheduler-event>
</mosaik-scheduler>
```

## Properties

| Property               | Attribute    | Modifiers | Type                                             | Description                                      |
|------------------------|--------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `allDay`               | `allDay`     |           | `boolean`                                        | Gets or sets whether this is an all-day event.   |
| `appearance`           | `appearance` |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`              |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |              | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                  | `dir`        |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`             | `disabled`   |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`         |              | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `end`                  | `end`        |           | `Date`                                           | Gets or sets the `end` property.<br />The default value is the current date and time. |
| `eventKey`             | `eventKey`   |           | `string`                                         | Gets or sets the unique key for the event.<br />If not provided, a key will be generated on connect. |
| `isFocused`            | `is-focused` |           | `boolean`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`                 | `lang`       |           | `string`                                         | The lang property indicates the language of the element's content. |
| `ripple`               | `ripple`     |           | `boolean`                                        | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `schedulerEventChange` |              | readonly  | `IEventEmitter<ISchedulerEventChangeEventDetail>` | Called when the event data changes (start, end).<br />Provides reference to `ISchedulerEventChangeEventDetail` as event detail. |
| `start`                | `start`      |           | `Date`                                           | Gets or sets the `start` property.<br />The default value is the current date and time. |
| `status`               | `status`     |           | `SchedulerEventStatus`                           | Gets or sets the status of the event.            |
| `themeName`            |              |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`                | `value`      |           | `TType`                                          | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`              | `variant`    |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                 | `view`       | readonly  | `SchedulerView`                                  | Gets the layout mode for rendering the event.<br />This value is inherited from the parent scheduler view.<br /><br />- `timeGrid` - Vertical card layout with title, content, footer (default)<br />- `month` - Compact chip layout with time and title only<br />- `agenda` - Horizontal row layout for list views |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`    | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `content` | The content of the event (timeGrid and agenda layouts) |
| `footer`  | Footer content (timeGrid layout only)            |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |
| `title`   | The title content of the event (all layouts)     |

## CSS Shadow Parts

| Part        | Description                               |
|-------------|-------------------------------------------|
| `content`   | The content wrapper                       |
| `focusRing` | The focus indicator ring                  |
| `footer`    | The footer slot container (timeGrid only) |
| `popup`     | The popup element (timeGrid only)         |
| `ripple`    | The ripple effect container               |
| `subtitle`  | The content/subtitle slot container       |
| `title`     | The title slot container                  |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-event-agenda-gap`                | String | Gap between elements in agenda layout            |
| `--scheduler-event-agenda-min-height`         | String | Minimum height in agenda layout                  |
| `--scheduler-event-agenda-padding`            | String | Padding in agenda layout                         |
| `--scheduler-event-all-day-background-color`  | Color  | Background color for all-day events              |
| `--scheduler-event-all-day-foreground-color`  | Color  | Foreground color for all-day events              |
| `--scheduler-event-background-color`          | Color  | Default background color                         |
| `--scheduler-event-border-color`              | Color  | Border color                                     |
| `--scheduler-event-border-radius`             | String | Border radius                                    |
| `--scheduler-event-border-style`              | String | Border style                                     |
| `--scheduler-event-border-width`              | String | Border width                                     |
| `--scheduler-event-box-shadow`                | String | Box shadow                                       |
| `--scheduler-event-focus-ring-active-width`   | String | The event focus ring active width CSS custom property. |
| `--scheduler-event-focus-ring-color`          | Color  | Color of the focus ring                          |
| `--scheduler-event-focus-ring-inward-offset`  | String | The event focus ring inward offset CSS custom property. |
| `--scheduler-event-focus-ring-outward-offset` | String | The event focus ring outward offset CSS custom property. |
| `--scheduler-event-font-family`               | String | Font family                                      |
| `--scheduler-event-font-letter-spacing`       | String | The event font letter spacing CSS custom property. |
| `--scheduler-event-font-line-height`          | String | Line height                                      |
| `--scheduler-event-font-size`                 | String | Font size                                        |
| `--scheduler-event-font-text-decoration`      | String | The event font text decoration CSS custom property. |
| `--scheduler-event-font-text-transform`       | String | The event font text transform CSS custom property. |
| `--scheduler-event-font-weight`               | String | Font weight                                      |
| `--scheduler-event-foreground-color`          | Color  | Foreground/text color                            |
| `--scheduler-event-gap`                       | String | The event gap CSS custom property.               |
| `--scheduler-event-hover-background-color`    | Color  | Background color on hover                        |
| `--scheduler-event-month-border-radius`       | String | Border radius in month layout                    |
| `--scheduler-event-month-font-size`           | String | Font size in month layout                        |
| `--scheduler-event-month-gap`                 | String | Gap between elements in month layout             |
| `--scheduler-event-month-line-height`         | String | Line height in month layout                      |
| `--scheduler-event-month-min-height`          | String | Minimum height in month layout                   |
| `--scheduler-event-month-padding`             | String | Padding in month layout                          |
| `--scheduler-event-padding`                   | String | Default padding                                  |
| `--scheduler-event-padding-bottom`            | String | The event padding bottom CSS custom property.    |
| `--scheduler-event-padding-left`              | String | The event padding left CSS custom property.      |
| `--scheduler-event-padding-right`             | String | The event padding right CSS custom property.     |
| `--scheduler-event-padding-top`               | String | The event padding top CSS custom property.       |
| `--scheduler-event-ripple-color`              | Color  | The event ripple color CSS custom property.      |
| `--scheduler-event-ripple-duration`           | String | The event ripple duration CSS custom property.   |
| `--scheduler-event-shadow`                    | String | The event shadow CSS custom property.            |
| `--scheduler-event-shadow-blur`               | String | Shadow blur radius                               |
| `--scheduler-event-shadow-color`              | Color  | Shadow color                                     |
| `--scheduler-event-shadow-offset-x`           | String | Shadow horizontal offset                         |
| `--scheduler-event-shadow-offset-y`           | String | Shadow vertical offset                           |
| `--scheduler-event-shadow-spread`             | String | Shadow spread radius                             |
| `--scheduler-event-transition-duration`       | String | Transition duration                              |
| `--scheduler-event-transition-mode`           | String | Transition timing function                       |
| `--scheduler-event-transition-property`       | String | CSS properties to transition                     |
| `--scheduler-event-translate`                 | String | The event translate CSS custom property.         |

# mosaik-scheduler-month-view

Scheduler Month View - A calendar-style month view with event chips.

**Mixins:** Themeable, Sizeable, Appearanceable, Variantable, Localeable, Disableable

## Example

```html
<mosaik-scheduler-month-view show-week-numbers show-adjacent></mosaik-scheduler-month-view>
```

## Properties

| Property                       | Attribute              | Modifiers | Type                                             | Description                                      |
|--------------------------------|------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`                   | `appearance`           |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`                |                        |           | `Date[]`                                         | Gets or sets the blackout dates that should be disabled. |
| `changed`                      |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collectedEvents`              |                        |           | `ICollectedEvent[]`                              | Gets or sets the collected events to display.    |
| `connected`                    |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dayFormat`                    | `dayFormat`            |           | `string`                                         | Gets or sets the format string for day numbers.  |
| `dir`                          | `dir`                  |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                     | `disabled`             |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`                 |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `firstDayOfWeek`               | `firstDayOfWeek`       |           | `DayOfWeek`                                      | Gets or sets the first day of the week.          |
| `intl`                         |                        |           | `SchedulerElementIntl \| null`                   | Gets or sets the internationalization helper.    |
| `isTodayHighlighted`           | `isTodayHighlighted`   |           | `boolean`                                        | Gets or sets whether today is highlighted.       |
| `isWeekendHighlighted`         | `isWeekendHighlighted` |           | `boolean`                                        | Gets or sets whether weekends are highlighted.   |
| `lang`                         | `lang`                 |           | `string`                                         | The lang property indicates the language of the element's content. |
| `locale`                       |                        |           | `string`                                         | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `monthDayFormat`               | `monthDayFormat`       |           | `string`                                         | Gets or sets the format string for month-day display. |
| `schedulerBeforeEventActivate` |                        | readonly  | `IEventEmitter<ISchedulerBeforeEventActivateEventDetail>` | Called before an event is activated (cancelable). |
| `schedulerBeforeSelectRange`   |                        | readonly  | `IEventEmitter<ISchedulerBeforeSelectRangeEventDetail>` | Called before a range is selected (cancelable).  |
| `schedulerEventActivate`       |                        | readonly  | `IEventEmitter<ISchedulerEventActivateEventDetail>` | Called after an event is activated.              |
| `schedulerSelectRange`         |                        | readonly  | `IEventEmitter<ISchedulerSelectRangeEventDetail>` | Called after a range is selected.                |
| `showAdjacent`                 | `showAdjacent`         |           | `boolean`                                        | Gets or sets whether to show adjacent month days. |
| `showWeekNumbers`              | `showWeekNumbers`      |           | `boolean`                                        | Gets or sets whether to show week numbers.       |
| `size`                         | `size`                 |           | `Size`                                           | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `specialDates`                 |                        |           | `Date[]`                                         | Gets or sets the special dates that should be highlighted. |
| `startDate`                    | `startDate`            |           | `Date \| null`                                   | Gets or sets the start date for the visible range. |
| `themeName`                    |                        |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeFormat`                   | `timeFormat`           |           | `string`                                         | Gets or sets the format string for time display. |
| `variant`                      | `variant`              |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                         |                        | readonly  | `SchedulerView`                                  | Gets the layout mode for this view.              |
| `weekdayFormat`                | `weekdayFormat`        |           | `string`                                         | Gets or sets the format string for weekday headers. |
| `weekdayHeaders`               |                        | readonly  | `string[]`                                       | Gets the weekday headers.                        |
| `weeks`                        |                        | readonly  | `IMonthViewWeek[]`                               | Gets the weeks data for rendering.               |

## Methods

| Method            | Type                                             | Description                                      |
|-------------------|--------------------------------------------------|--------------------------------------------------|
| `activateEvent`   | `(eventKey: string, trigger?: SchedulerEventActivateTrigger): boolean` | Activates an event programmatically.<br /><br />**eventKey**: The event key to activate.<br />**trigger**: The activation trigger. |
| `adoptStyle`      | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`            | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getEventsForDay` | `(dayKey: string): IMonthViewEvent[]`            | Gets events for a specific day.<br /><br />**dayKey**: The day key (YYYY-MM-DD). |
| `isBlackoutDate`  | `(date: Date): boolean`                          | Returns true when a date is configured as blackout date.<br /><br />**date**: The date to check. |
| `isSpecialDate`   | `(date: Date): boolean`                          | Returns true when a date is configured as special date.<br /><br />**date**: The date to check. |
| `isToday`         | `(date: Date): boolean`                          | Returns true when the given date is today.<br /><br />**date**: The date to check. |
| `isWeekend`       | `(date: Date): boolean`                          | Returns true when the given date is weekend.<br /><br />**date**: The date to check. |
| `off`             | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`              | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onDayCellClick`  | `(date: Date): void`                             | Handles click on a day cell.<br /><br />**date**: The date of the cell. |
| `requestUpdate`   | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                          | Type                                | Description                                      |
|--------------------------------|-------------------------------------|--------------------------------------------------|
| `changed`                      | `PropertyChangedEvent`              | Emitted when any attribute changes before update |
| `connected`                    | `ConnectedEvent`                    | Emitted when the element is connected to the DOM |
| `disconnected`                 | `DisconnectedEvent`                 | Emitted when the element is disconnected from the DOM |
| `schedulerBeforeEventActivate` | `SchedulerBeforeEventActivateEvent` | Emitted before an event is activated (cancelable) |
| `schedulerBeforeSelectRange`   | `SchedulerBeforeSelectRangeEvent`   | Emitted before a range is selected (cancelable)  |
| `schedulerEventActivate`       | `SchedulerEventActivateEvent`       | Emitted after an event is activated              |
| `schedulerSelectRange`         | `SchedulerSelectRangeEvent`         | Emitted after a range is selected                |

## Slots

| Name                      | Description                                      |
|---------------------------|--------------------------------------------------|
|                           | Default slot for event content                   |
| `event-${event.eventKey}` | The event-${event.eventKey} slot.                |
| `style`                   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                 | Description                                      |
|----------------------|--------------------------------------------------|
| `body`               | The scrollable body area                         |
| `container`          | The main container                               |
| `day`                | cell day-cell-empty - The day-cell day-cell-empty part. |
| `day-events`         | Container for event chips in a day               |
| `day-number`         | The day number within a cell                     |
| `event-chip`         | Individual event chip                            |
| `event-time`         | The event-time part.                             |
| `events-slot`        | The events-slot part.                            |
| `header`             | The header row with day labels                   |
| `header-cell`        | Individual day header cells (Sun, Mon, etc.)     |
| `more-events`        | The more-events part.                            |
| `week-number`        | The week number cell                             |
| `week-number-header` | The week number column header                    |
| `week-row`           | A single week row                                |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-month-view-background-color`        | Color  | Background color of the view                     |
| `--scheduler-month-view-border-color`            | Color  | Border color                                     |
| `--scheduler-month-view-border-radius`           | String | Border radius                                    |
| `--scheduler-month-view-border-style`            | String | Border style                                     |
| `--scheduler-month-view-border-width`            | String | Border width                                     |
| `--scheduler-month-view-cell-min-height`         | String | Minimum height for day cells                     |
| `--scheduler-month-view-day-number-font-size`    | String | Font size for day numbers                        |
| `--scheduler-month-view-day-number-font-weight`  | String | Font weight for day numbers                      |
| `--scheduler-month-view-event-chip-border-radius` | String | Border radius for event chips                    |
| `--scheduler-month-view-event-chip-font-size`    | String | Font size for event chip text                    |
| `--scheduler-month-view-event-chip-height`       | String | Height of event chips                            |
| `--scheduler-month-view-font-family`             | String | The month view font family CSS custom property.  |
| `--scheduler-month-view-font-letter-spacing`     | String | The month view font letter spacing CSS custom property. |
| `--scheduler-month-view-font-line-height`        | String | The month view font line height CSS custom property. |
| `--scheduler-month-view-font-size`               | String | The month view font size CSS custom property.    |
| `--scheduler-month-view-font-text-decoration`    | String | The month view font text decoration CSS custom property. |
| `--scheduler-month-view-font-text-transform`     | String | The month view font text transform CSS custom property. |
| `--scheduler-month-view-font-weight`             | String | The month view font weight CSS custom property.  |
| `--scheduler-month-view-foreground-color`        | Color  | Foreground/text color                            |
| `--scheduler-month-view-gap`                     | String | Gap between cells and elements                   |
| `--scheduler-month-view-header-day-font-family`  | String | Font family for day headers                      |
| `--scheduler-month-view-header-day-font-letter-spacing` | String | Letter spacing for day headers                   |
| `--scheduler-month-view-header-day-font-line-height` | String | Line height for day headers                      |
| `--scheduler-month-view-header-day-font-size`    | String | Font size for day headers                        |
| `--scheduler-month-view-header-day-font-text-decoration` | String | Text decoration for day headers                  |
| `--scheduler-month-view-header-day-font-text-transform` | String | Text transform for day headers                   |
| `--scheduler-month-view-header-day-font-weight`  | String | Font weight for day headers                      |
| `--scheduler-month-view-header-font-family`      | String | Font family for headers                          |
| `--scheduler-month-view-header-font-letter-spacing` | String | Letter spacing for headers                       |
| `--scheduler-month-view-header-font-line-height` | String | Line height for headers                          |
| `--scheduler-month-view-header-font-size`        | String | Font size for headers                            |
| `--scheduler-month-view-header-font-text-decoration` | String | Text decoration for headers                      |
| `--scheduler-month-view-header-font-text-transform` | String | Text transform for headers                       |
| `--scheduler-month-view-header-font-weight`      | String | Font weight for headers                          |
| `--scheduler-month-view-header-weekday-font-family` | String | Font family for weekday labels                   |
| `--scheduler-month-view-header-weekday-font-letter-spacing` | String | Letter spacing for weekday labels                |
| `--scheduler-month-view-header-weekday-font-line-height` | String | Line height for weekday labels                   |
| `--scheduler-month-view-header-weekday-font-size` | String | Font size for weekday labels                     |
| `--scheduler-month-view-header-weekday-font-text-decoration` | String | Text decoration for weekday labels               |
| `--scheduler-month-view-header-weekday-font-text-transform` | String | Text transform for weekday labels                |
| `--scheduler-month-view-header-weekday-font-weight` | String | Font weight for weekday labels                   |
| `--scheduler-month-view-padding-bottom`          | String | Bottom padding                                   |
| `--scheduler-month-view-padding-left`            | String | Left padding                                     |
| `--scheduler-month-view-padding-right`           | String | Right padding                                    |
| `--scheduler-month-view-padding-top`             | String | Top padding                                      |
| `--scheduler-month-view-shadow`                  | String | The month view shadow CSS custom property.       |
| `--scheduler-month-view-shadow-blur`             | String | The month view shadow blur CSS custom property.  |
| `--scheduler-month-view-shadow-color`            | String | The month view shadow color CSS custom property. |
| `--scheduler-month-view-shadow-offset-x`         | String | The month view shadow offset x CSS custom property. |
| `--scheduler-month-view-shadow-offset-y`         | String | The month view shadow offset y CSS custom property. |
| `--scheduler-month-view-shadow-spread`           | String | The month view shadow spread CSS custom property. |
| `--scheduler-month-view-today-background-color`  | Color  | Background color for today's cell                |
| `--scheduler-month-view-transition-duration`     | String | The month view transition duration CSS custom property. |
| `--scheduler-month-view-transition-mode`         | String | The month view transition mode CSS custom property. |
| `--scheduler-month-view-transition-property`     | String | The month view transition property CSS custom property. |
| `--scheduler-month-view-translate`               | String | The month view translate CSS custom property.    |
| `--scheduler-month-view-week-number-width`       | String | The month view week number width CSS custom property. |
| `--scheduler-month-view-weekend-background-color` | Color  | Background color for weekend cells               |

# mosaik-scheduler-now-indicator

Scheduler Now Indicator - A real-time visual indicator showing the current time position in scheduler views.

**Mixins:** Themeable

## Examples

Scheduler with now indicator (internal usage):

```html
<mosaik-scheduler>
  <!-- Now indicator automatically rendered and positioned -->
  <mosaik-scheduler-now-indicator top="35.5" visible></mosaik-scheduler-now-indicator>
</mosaik-scheduler>
```

Hidden indicator (outside visible range):

```html
<mosaik-scheduler-now-indicator top="0"></mosaik-scheduler-now-indicator>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `top`          |           |           | `number`                                     | Gets or sets the top position as percentage.     |
| `visible`      |           |           | `boolean`                                    | Gets or sets whether the indicator is visible.   |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                                      |
|--------|--------------------------------------------------|
| `dot`  | The circular marker positioned at the start of the indicator line |
| `line` | The horizontal indicator line spanning across the scheduler |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-now-indicator-color`                | String | The color of both the indicator line and dot     |
| `--scheduler-now-indicator-dot-size`             | String | The diameter of the circular dot marker          |
| `--scheduler-now-indicator-font-family`          | String | The now indicator font family CSS custom property. |
| `--scheduler-now-indicator-font-letter-spacing`  | String | The now indicator font letter spacing CSS custom property. |
| `--scheduler-now-indicator-font-line-height`     | String | The now indicator font line height CSS custom property. |
| `--scheduler-now-indicator-font-size`            | String | The now indicator font size CSS custom property. |
| `--scheduler-now-indicator-font-text-decoration` | String | The now indicator font text decoration CSS custom property. |
| `--scheduler-now-indicator-font-text-transform`  | String | The now indicator font text transform CSS custom property. |
| `--scheduler-now-indicator-font-weight`          | String | The now indicator font weight CSS custom property. |
| `--scheduler-now-indicator-gap`                  | String | The now indicator gap CSS custom property.       |
| `--scheduler-now-indicator-line-height`          | String | The thickness of the horizontal line             |
| `--scheduler-now-indicator-padding-bottom`       | String | The now indicator padding bottom CSS custom property. |
| `--scheduler-now-indicator-padding-left`         | String | The now indicator padding left CSS custom property. |
| `--scheduler-now-indicator-padding-right`        | String | The now indicator padding right CSS custom property. |
| `--scheduler-now-indicator-padding-top`          | String | The now indicator padding top CSS custom property. |
| `--scheduler-now-indicator-shadow`               | String | The now indicator shadow CSS custom property.    |
| `--scheduler-now-indicator-shadow-blur`          | String | The now indicator shadow blur CSS custom property. |
| `--scheduler-now-indicator-shadow-color`         | String | The now indicator shadow color CSS custom property. |
| `--scheduler-now-indicator-shadow-offset-x`      | String | The now indicator shadow offset x CSS custom property. |
| `--scheduler-now-indicator-shadow-offset-y`      | String | The now indicator shadow offset y CSS custom property. |
| `--scheduler-now-indicator-shadow-spread`        | String | The now indicator shadow spread CSS custom property. |
| `--scheduler-now-indicator-transition-duration`  | String | The duration of position transitions             |
| `--scheduler-now-indicator-transition-mode`      | String | The timing function for transitions              |
| `--scheduler-now-indicator-transition-property`  | String | The CSS properties to transition                 |
| `--scheduler-now-indicator-translate`            | String | The now indicator translate CSS custom property. |

# mosaik-scheduler-time-grid-view

Scheduler TimeGrid View - A time grid view with configurable day columns.

**Mixins:** Themeable, Sizeable, Appearanceable, Variantable, Localeable, Disableable

## Example

```html
<mosaik-scheduler-time-grid-view days="5" hour-start="8" hour-end="18"></mosaik-scheduler-time-grid-view>
```

## Properties

| Property                       | Attribute              | Modifiers | Type                                             | Description                                      |
|--------------------------------|------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `allDayVisibility`             | `allDayVisibility`     |           | `AllDayVisibility`                               | Gets or sets the visibility mode for all-day events. |
| `appearance`                   | `appearance`           |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`                |                        |           | `Date[]`                                         | Gets or sets the blackout dates that should be disabled. |
| `changed`                      |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collectedEvents`              |                        |           | `ICollectedEvent[]`                              | Gets or sets the collected events to display.    |
| `connected`                    |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dayFormat`                    | `dayFormat`            |           | `string`                                         | Gets or sets the format string for day numbers.  |
| `days`                         | `days`                 |           | `number`                                         | Gets or sets the number of days to display.      |
| `dir`                          | `dir`                  |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                     | `disabled`             |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`                 |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `eventsByDay`                  |                        | readonly  | `Map<string, IPositionedEvent[]>`                | Gets the events organized by day.                |
| `firstDayOfWeek`               | `firstDayOfWeek`       |           | `DayOfWeek`                                      | Gets or sets the first day of the week.          |
| `hasAllDayEvents`              |                        | readonly  | `boolean`                                        | Returns whether there are any all-day events.    |
| `hourEnd`                      | `hourEnd`              |           | `number`                                         | Gets or sets the end hour of the time range.     |
| `hourStart`                    | `hourStart`            |           | `number`                                         | Gets or sets the start hour of the time range.   |
| `intl`                         |                        |           | `SchedulerElementIntl \| null`                   | Gets or sets the internationalization helper.    |
| `isTodayHighlighted`           | `isTodayHighlighted`   |           | `boolean`                                        | Gets or sets whether today is highlighted.       |
| `isWeekendHighlighted`         | `isWeekendHighlighted` |           | `boolean`                                        | Gets or sets whether weekends are highlighted.   |
| `lang`                         | `lang`                 |           | `string`                                         | The lang property indicates the language of the element's content. |
| `locale`                       |                        |           | `string`                                         | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `monthDayFormat`               | `monthDayFormat`       |           | `string`                                         | Gets or sets the format string for month-day display. |
| `schedulerBeforeEventActivate` |                        | readonly  | `IEventEmitter<ISchedulerBeforeEventActivateEventDetail>` | Called before an event is activated (cancelable). |
| `schedulerBeforeSelectRange`   |                        | readonly  | `IEventEmitter<ISchedulerBeforeSelectRangeEventDetail>` | Called before a range is selected (cancelable).  |
| `schedulerEventActivate`       |                        | readonly  | `IEventEmitter<ISchedulerEventActivateEventDetail>` | Called after an event is activated.              |
| `schedulerSelectRange`         |                        | readonly  | `IEventEmitter<ISchedulerSelectRangeEventDetail>` | Called after a range is selected.                |
| `size`                         | `size`                 |           | `Size`                                           | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `specialDates`                 |                        |           | `Date[]`                                         | Gets or sets the special dates that should be highlighted. |
| `startDate`                    | `startDate`            |           | `Date \| null`                                   | Gets or sets the start date for the visible range. |
| `stepMinutes`                  | `stepMinutes`          |           | `number`                                         | Gets or sets the step interval in minutes.       |
| `themeName`                    |                        |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeFormat`                   | `timeFormat`           |           | `string`                                         | Gets or sets the format string for time display. |
| `timeSlots`                    |                        | readonly  | `{ time: string; label: string; isHour: boolean; isLastOfHour: boolean; }[]` | Gets the time slots for rendering the grid.      |
| `variant`                      | `variant`              |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                         |                        | readonly  | `SchedulerView`                                  | Gets the layout mode for this view.              |
| `visibleDates`                 |                        | readonly  | `Date[]`                                         | Gets the visible dates array.                    |
| `weekdayFormat`                | `weekdayFormat`        |           | `string`                                         | Gets or sets the format string for weekday headers. |

## Methods

| Method               | Type                                             | Description                                      |
|----------------------|--------------------------------------------------|--------------------------------------------------|
| `activateEvent`      | `(eventKey: string, trigger?: SchedulerEventActivateTrigger): boolean` | Activates an event programmatically.<br /><br />**eventKey**: The event key to activate.<br />**trigger**: The activation trigger. |
| `adoptStyle`         | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`               | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getAllDayEvents`    | `(): IAllDayEvent[]`                             | Gets all all-day events across all visible days. |
| `getEventsForDay`    | `(dayKey: string): IPositionedEvent[]`           | Gets events for a specific day.<br /><br />**dayKey**: The day key (YYYY-MM-DD). |
| `getNowIndicatorTop` | `(): number`                                     | Calculates the now indicator top position as percentage. |
| `isBlackoutDate`     | `(date: Date): boolean`                          | Returns true when a date is configured as blackout date.<br /><br />**date**: The date to check. |
| `isSpecialDate`      | `(date: Date): boolean`                          | Returns true when a date is configured as special date.<br /><br />**date**: The date to check. |
| `isToday`            | `(date: Date): boolean`                          | Returns true when the given date is today.<br /><br />**date**: The date to check. |
| `isWeekend`          | `(date: Date): boolean`                          | Returns true when the given date is weekend.<br /><br />**date**: The date to check. |
| `off`                | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                 | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onAllDayCellClick`  | `(date: Date): void`                             | Handles click on an all-day cell to create a new all-day event.<br /><br />**date**: The date of the cell. |
| `onGridCellClick`    | `(date: Date, time: string): void`               | Handles click on a grid cell to create a new event.<br /><br />**date**: The date of the cell.<br />**time**: The time slot string (e.g., "09:00"). |
| `requestUpdate`      | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                          | Type                                | Description                                      |
|--------------------------------|-------------------------------------|--------------------------------------------------|
| `changed`                      | `PropertyChangedEvent`              | Emitted when any attribute changes before update |
| `connected`                    | `ConnectedEvent`                    | Emitted when the element is connected to the DOM |
| `disconnected`                 | `DisconnectedEvent`                 | Emitted when the element is disconnected from the DOM |
| `schedulerBeforeEventActivate` | `SchedulerBeforeEventActivateEvent` | Emitted before an event is activated (cancelable) |
| `schedulerBeforeSelectRange`   | `SchedulerBeforeSelectRangeEvent`   | Emitted before a range is selected (cancelable)  |
| `schedulerEventActivate`       | `SchedulerEventActivateEvent`       | Emitted after an event is activated              |
| `schedulerSelectRange`         | `SchedulerSelectRangeEvent`         | Emitted after a range is selected                |

## Slots

| Name                       | Description                                      |
|----------------------------|--------------------------------------------------|
|                            | Default slot for event content                   |
| `allday-${event.eventKey}` | The allday-${event.eventKey} slot.               |
| `event-${event.eventKey}`  | The event-${event.eventKey} slot.                |
| `style`                    | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                 | Description                                 |
|----------------------|---------------------------------------------|
| `all-day-event`      | Individual all-day event chip               |
| `all-day-events`     | Container for all-day event chips           |
| `all-day-label`      | The "All day" label                         |
| `all-day-panel`      | The all-day events panel                    |
| `all-day-row`        | Container for all-day cells                 |
| `appointment-column` | Column container for events of a day        |
| `appointments`       | Overlay container for positioned events     |
| `body`               | The scrollable body area                    |
| `container`          | The main container                          |
| `events-slot`        | The events-slot part.                       |
| `grid`               | The time slot grid                          |
| `grid-wrapper`       | Container for grid and appointments overlay |
| `header`             | The header row with day labels              |
| `header-columns`     | Container for day header cells              |
| `header-day`         | The day number in the header                |
| `header-row`         | The header-row part.                        |
| `header-spacer`      | Spacer aligned with timescale width         |
| `header-weekday`     | The weekday name in the header              |
| `indicator`          | The now indicator                           |
| `timescale`          | The time labels on the left                 |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-time-grid-view-background-color`    | Color  | Background color of the view                     |
| `--scheduler-time-grid-view-border-color`        | Color  | Border color                                     |
| `--scheduler-time-grid-view-border-radius`       | String | Border radius                                    |
| `--scheduler-time-grid-view-border-style`        | String | Border style                                     |
| `--scheduler-time-grid-view-border-width`        | String | Border width                                     |
| `--scheduler-time-grid-view-cell-border-color`   | Color  | Border color for time cells                      |
| `--scheduler-time-grid-view-cell-border-radius`  | String | Border radius for time cells                     |
| `--scheduler-time-grid-view-cell-border-style`   | String | Border style for time cells                      |
| `--scheduler-time-grid-view-cell-border-width`   | String | Border width for time cells                      |
| `--scheduler-time-grid-view-cell-height`         | String | Height of time slot cells                        |
| `--scheduler-time-grid-view-column-min-width`    | String | Minimum width of day columns                     |
| `--scheduler-time-grid-view-font-family`         | String | The time grid view font family CSS custom property. |
| `--scheduler-time-grid-view-font-letter-spacing` | String | The time grid view font letter spacing CSS custom property. |
| `--scheduler-time-grid-view-font-line-height`    | String | The time grid view font line height CSS custom property. |
| `--scheduler-time-grid-view-font-size`           | String | The time grid view font size CSS custom property. |
| `--scheduler-time-grid-view-font-text-decoration` | String | The time grid view font text decoration CSS custom property. |
| `--scheduler-time-grid-view-font-text-transform` | String | The time grid view font text transform CSS custom property. |
| `--scheduler-time-grid-view-font-weight`         | String | The time grid view font weight CSS custom property. |
| `--scheduler-time-grid-view-foreground-color`    | Color  | Foreground/text color                            |
| `--scheduler-time-grid-view-gap`                 | String | Gap between elements                             |
| `--scheduler-time-grid-view-header-cell-padding-bottom` | String | Bottom padding for header cells                  |
| `--scheduler-time-grid-view-header-cell-padding-left` | String | Left padding for header cells                    |
| `--scheduler-time-grid-view-header-cell-padding-right` | String | Right padding for header cells                   |
| `--scheduler-time-grid-view-header-cell-padding-top` | String | Top padding for header cells                     |
| `--scheduler-time-grid-view-header-day-font-family` | String | Font family for day number in header             |
| `--scheduler-time-grid-view-header-day-font-letter-spacing` | String | Letter spacing for day number                    |
| `--scheduler-time-grid-view-header-day-font-line-height` | String | Line height for day number                       |
| `--scheduler-time-grid-view-header-day-font-size` | String | Font size for day number                         |
| `--scheduler-time-grid-view-header-day-font-text-decoration` | String | Text decoration for day number                   |
| `--scheduler-time-grid-view-header-day-font-text-transform` | String | Text transform for day number                    |
| `--scheduler-time-grid-view-header-day-font-weight` | String | Font weight for day number                       |
| `--scheduler-time-grid-view-header-font-family`  | String | Font family for header                           |
| `--scheduler-time-grid-view-header-font-letter-spacing` | String | Letter spacing for header                        |
| `--scheduler-time-grid-view-header-font-line-height` | String | Line height for header                           |
| `--scheduler-time-grid-view-header-font-size`    | String | Font size for header                             |
| `--scheduler-time-grid-view-header-font-text-decoration` | String | Text decoration for header                       |
| `--scheduler-time-grid-view-header-font-text-transform` | String | Text transform for header                        |
| `--scheduler-time-grid-view-header-font-weight`  | String | Font weight for header                           |
| `--scheduler-time-grid-view-header-weekday-font-family` | String | Font family for weekday labels                   |
| `--scheduler-time-grid-view-header-weekday-font-letter-spacing` | String | Letter spacing for weekday labels                |
| `--scheduler-time-grid-view-header-weekday-font-line-height` | String | Line height for weekday labels                   |
| `--scheduler-time-grid-view-header-weekday-font-size` | String | Font size for weekday labels                     |
| `--scheduler-time-grid-view-header-weekday-font-text-decoration` | String | Text decoration for weekday labels               |
| `--scheduler-time-grid-view-header-weekday-font-text-transform` | String | Text transform for weekday labels                |
| `--scheduler-time-grid-view-header-weekday-font-weight` | String | Font weight for weekday labels                   |
| `--scheduler-time-grid-view-hour-border-color`   | Color  | Border color for hour boundaries                 |
| `--scheduler-time-grid-view-hour-border-radius`  | String | Border radius for hour boundaries                |
| `--scheduler-time-grid-view-hour-border-style`   | String | Border style for hour boundaries                 |
| `--scheduler-time-grid-view-hour-border-width`   | String | Border width for hour boundaries                 |
| `--scheduler-time-grid-view-padding-bottom`      | String | Bottom padding                                   |
| `--scheduler-time-grid-view-padding-left`        | String | Left padding                                     |
| `--scheduler-time-grid-view-padding-right`       | String | Right padding                                    |
| `--scheduler-time-grid-view-padding-top`         | String | Top padding                                      |
| `--scheduler-time-grid-view-shadow`              | String | The time grid view shadow CSS custom property.   |
| `--scheduler-time-grid-view-shadow-blur`         | String | The time grid view shadow blur CSS custom property. |
| `--scheduler-time-grid-view-shadow-color`        | String | The time grid view shadow color CSS custom property. |
| `--scheduler-time-grid-view-shadow-offset-x`     | String | The time grid view shadow offset x CSS custom property. |
| `--scheduler-time-grid-view-shadow-offset-y`     | String | The time grid view shadow offset y CSS custom property. |
| `--scheduler-time-grid-view-shadow-spread`       | String | The time grid view shadow spread CSS custom property. |
| `--scheduler-time-grid-view-timescale-width`     | String | Width of the timescale column                    |
| `--scheduler-time-grid-view-today-background-color` | Color  | Background color for today's column              |
| `--scheduler-time-grid-view-transition-duration` | String | Duration for transitions                         |
| `--scheduler-time-grid-view-transition-mode`     | String | Timing function for transitions                  |
| `--scheduler-time-grid-view-transition-property` | String | CSS properties to transition                     |
| `--scheduler-time-grid-view-translate`           | String | The time grid view translate CSS custom property. |

# mosaik-scheduler-time-label

SchedulerTimeLabel - A single hour label in the timescale.

**Mixins:** Themeable, Localeable

## Properties

| Property        | Attribute | Modifiers | Type                                         | Description                                      |
|-----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`       |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected`  |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formattedHour` |           | readonly  | `string`                                     | Gets the formatted hour string.                  |
| `hour`          |           |           | `number`                                     | Gets or sets the hour to display.                |
| `lang`          | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `locale`        |           |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `themeName`     |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part    | Description            |
|---------|------------------------|
| `label` | The label text element |

## CSS Custom Properties

| Property                           | Type   | Description |
|------------------------------------|--------|-------------|
| `--scheduler-time-label-color`     | String | Text color  |
| `--scheduler-time-label-font-size` | String | Font size   |

# mosaik-scheduler-timeline-row

SchedulerTimelineRow - A single time slot row in the timeline.

**Mixins:** Themeable

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isHour`       |           |           | `boolean`                                    | Gets or sets whether this is a full-hour row.    |
| `lang`         | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `time`         |           |           | `string`                                     | Gets or sets the time for this row.              |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part  | Description     |
|-------|-----------------|
| `row` | The row element |

## CSS Custom Properties

| Property                                | Type   | Description        |
|-----------------------------------------|--------|--------------------|
| `--scheduler-timeline-row-border-color` | String | Border color       |
| `--scheduler-timeline-row-height`       | String | Height of each row |

# mosaik-scheduler-timeline

SchedulerTimeline - The grid of time slots within a column.

**Mixins:** Themeable

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | Gets or sets the `dir` property.                 |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hourEnd`      |           |           | `number`                                     | Gets or sets the end hour.                       |
| `hourStart`    |           |           | `number`                                     | Gets or sets the start hour.                     |
| `lang`         | `lang`    |           | `string`                                     | Gets or sets the `lang` property.                |
| `stepMinutes`  |           |           | `number`                                     | Gets or sets the step interval in minutes.       |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeSlots`    |           | readonly  | `{ time: string; isHour: boolean; }[]`       | Gets the array of time slots.                    |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Called when the element will be updated.         |
| `connected`    | `ConnectedEvent`       | Called when the element is connected to the DOM. |
| `disconnected` | `DisconnectedEvent`    | Called when the element is disconnected from the DOM. |

## CSS Shadow Parts

| Part        | Description        |
|-------------|--------------------|
| `container` | The main container |

## CSS Custom Properties

| Property                                | Type   | Description      |
|-----------------------------------------|--------|------------------|
| `--scheduler-timeline-background-color` | String | Background color |

# mosaik-scheduler-timescale

SchedulerTimescale - Container for time labels in the scheduler.

**Mixins:** Themeable, Localeable

## Example

```html
<!-- Internal component - used by the scheduler to display time labels.
     Configure via the parent scheduler's properties. -->
<mosaik-scheduler-timescale></mosaik-scheduler-timescale>
```

## Properties

| Property       | Attribute | Modifiers | Type                                             | Description                                      |
|----------------|-----------|-----------|--------------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hourEnd`      |           |           | `number`                                         | Gets or sets the end hour.                       |
| `hourStart`    |           |           | `number`                                         | Gets or sets the start hour.                     |
| `lang`         | `lang`    |           | `string`                                         | The lang property indicates the language of the element's content. |
| `locale`       |           |           | `string`                                         | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `stepMinutes`  |           |           | `number`                                         | Gets or sets the step interval in minutes.       |
| `themeName`    |           |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeFormat`   |           |           | `string`                                         | Gets or sets the time format string.             |
| `timeSlots`    |           | readonly  | `{ time: string; label: string; isHour: boolean; isLastOfHour: boolean; }[]` | Gets the time slots to display.                  |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                        |
|--------------|------------------------------------|
| `time-cell`  | The cell containing the time label |
| `time-label` | The time-label part.               |
| `time-panel` | The table containing time labels   |

## CSS Custom Properties

| Property                                        | Type   | Description                                      |
|-------------------------------------------------|--------|--------------------------------------------------|
| `--scheduler-timescale-background-color`        | Color  | Background color of the timescale                |
| `--scheduler-timescale-cell-border-color`       | Color  | Border color for time cells                      |
| `--scheduler-timescale-cell-border-radius`      | String | The timescale cell border radius CSS custom property. |
| `--scheduler-timescale-cell-border-style`       | String | Border style for time cells                      |
| `--scheduler-timescale-cell-border-width`       | String | Border width for time cells                      |
| `--scheduler-timescale-cell-height`             | String | Height of each time cell                         |
| `--scheduler-timescale-font-family`             | String | Font family for time labels                      |
| `--scheduler-timescale-font-letter-spacing`     | String | Letter spacing for time labels                   |
| `--scheduler-timescale-font-line-height`        | String | Line height for time labels                      |
| `--scheduler-timescale-font-size`               | String | Font size for time labels                        |
| `--scheduler-timescale-font-text-decoration`    | String | Text decoration for time labels                  |
| `--scheduler-timescale-font-text-transform`     | String | Text transform for time labels                   |
| `--scheduler-timescale-font-weight`             | String | Font weight for time labels                      |
| `--scheduler-timescale-gap`                     | String | The timescale gap CSS custom property.           |
| `--scheduler-timescale-hour-cell-border-color`  | Color  | Border color for hour cells                      |
| `--scheduler-timescale-hour-cell-border-radius` | String | The timescale hour cell border radius CSS custom property. |
| `--scheduler-timescale-hour-cell-border-style`  | String | Border style for hour cells                      |
| `--scheduler-timescale-hour-cell-border-width`  | String | Border width for hour cells                      |
| `--scheduler-timescale-label-color`             | Color  | Color of the time labels                         |
| `--scheduler-timescale-padding-bottom`          | String | Bottom padding for time cells                    |
| `--scheduler-timescale-padding-left`            | String | Left padding for time cells                      |
| `--scheduler-timescale-padding-right`           | String | Right padding for time cells                     |
| `--scheduler-timescale-padding-top`             | String | Top padding for time cells                       |
| `--scheduler-timescale-shadow`                  | String | The timescale shadow CSS custom property.        |
| `--scheduler-timescale-shadow-blur`             | String | The timescale shadow blur CSS custom property.   |
| `--scheduler-timescale-shadow-color`            | String | The timescale shadow color CSS custom property.  |
| `--scheduler-timescale-shadow-offset-x`         | String | The timescale shadow offset x CSS custom property. |
| `--scheduler-timescale-shadow-offset-y`         | String | The timescale shadow offset y CSS custom property. |
| `--scheduler-timescale-shadow-spread`           | String | The timescale shadow spread CSS custom property. |
| `--scheduler-timescale-timescale-width`         | String | The timescale timescale width CSS custom property. |
| `--scheduler-timescale-transition-duration`     | String | The timescale transition duration CSS custom property. |
| `--scheduler-timescale-transition-mode`         | String | The timescale transition mode CSS custom property. |
| `--scheduler-timescale-transition-property`     | String | The timescale transition property CSS custom property. |
| `--scheduler-timescale-translate`               | String | The timescale translate CSS custom property.     |

# mosaik-scheduler

Scheduler - A calendar-like time grid component with day and week views.

**Mixins:** Themeable, Appearanceable, Variantable, Localeable, Sizeable, Slottable, Disableable

## Example

Day view:

```html
<mosaik-scheduler view="day" start-date="2026-02-13" hour-start="9" hour-end="18">
  <mosaik-scheduler-event event-key="meeting" start="2026-02-13T10:00" end="2026-02-13T11:00">
    <div slot="title">Team Meeting</div>
  </mosaik-scheduler-event>
</mosaik-scheduler>
```

## Properties

| Property                       | Attribute              | Modifiers | Type                                             | Default   | Description                                      |
|--------------------------------|------------------------|-----------|--------------------------------------------------|-----------|--------------------------------------------------|
| `allDayVisibility`             | `allDayVisibility`     |           | `AllDayVisibility`                               |           | Gets or sets the visibility mode for all-day events. |
| `appearance`                   | `appearance`           |           | `Appearance`                                     |           | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `blackoutDates`                |                        |           | `Date[]`                                         |           | Gets or sets the blackout dates that should be disabled. |
| `changed`                      |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     |           | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collectedEvents`              |                        | readonly  | `ICollectedEvent[]`                              |           | Gets the collected events.                       |
| `connected`                    |                        | readonly  | `IEventEmitter<void>`                            |           | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dayFormat`                    | `dayFormat`            |           | `string`                                         | "'d'"     | Gets or sets the format string for day numbers.  |
| `days`                         | `days`                 |           | `number`                                         |           | Gets or sets the number of days to display.      |
| `daysAhead`                    | `daysAhead`            |           | `number`                                         |           | Gets or sets the number of days ahead to show in agenda view. |
| `dir`                          | `dir`                  |           | `FlowDirection`                                  |           | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                     | `disabled`             |           | `boolean`                                        |           | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`                 |                        | readonly  | `IEventEmitter<void>`                            |           | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `eventsByDay`                  |                        | readonly  | `Map<string, IPositionedEvent[]>`                |           | Gets the events organized by day.                |
| `firstDayOfWeek`               | `firstDayOfWeek`       |           | `DayOfWeek`                                      |           | Gets or sets the first day of the week.          |
| `hasAllDayEvents`              |                        | readonly  | `boolean`                                        |           | Returns whether there are any all-day events.    |
| `hourEnd`                      | `hourEnd`              |           | `number`                                         |           | Gets or sets the end hour of the time range.     |
| `hourStart`                    | `hourStart`            |           | `number`                                         |           | Gets or sets the start hour of the time range.   |
| `intl`                         |                        | readonly  | `SchedulerElementIntl`                           |           | Gets the internationalization helper.            |
| `isTodayHighlighted`           | `isTodayHighlighted`   |           | `boolean`                                        |           | Gets or sets whether today is highlighted.       |
| `isWeekendHighlighted`         | `isWeekendHighlighted` |           | `boolean`                                        |           | Gets or sets whether weekends are highlighted.   |
| `lang`                         | `lang`                 |           | `string`                                         |           | The lang property indicates the language of the element's content. |
| `locale`                       |                        |           | `string`                                         |           | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `monthDayFormat`               | `monthDayFormat`       |           | `string`                                         | "'MMM d'" | Gets or sets the format string for month-day display. |
| `schedulerBeforeEventActivate` |                        | readonly  | `IEventEmitter<ISchedulerBeforeEventActivateEventDetail>` |           | Called before an event is activated (cancelable).<br />Provides reference to `ISchedulerBeforeEventActivateEventDetail` as event detail. |
| `schedulerBeforeSelectRange`   |                        | readonly  | `IEventEmitter<ISchedulerBeforeSelectRangeEventDetail>` |           | Called before a range is selected (cancelable).<br />Provides reference to `ISchedulerBeforeSelectRangeEventDetail` as event detail. |
| `schedulerEventActivate`       |                        | readonly  | `IEventEmitter<ISchedulerEventActivateEventDetail>` |           | Called after an event is activated.<br />Provides reference to `ISchedulerEventActivateEventDetail` as event detail. |
| `schedulerRangeChange`         |                        | readonly  | `IEventEmitter<ISchedulerRangeChangeEventDetail>` |           | Called when the visible date range changes.<br />Provides reference to `ISchedulerRangeChangeEventDetail` as event detail. |
| `schedulerSelectRange`         |                        | readonly  | `IEventEmitter<ISchedulerSelectRangeEventDetail>` |           | Called after a range is selected.<br />Provides reference to `ISchedulerSelectRangeEventDetail` as event detail. |
| `showAdjacent`                 | `showAdjacent`         |           | `boolean`                                        |           | Gets or sets whether to show days from adjacent months in month view. |
| `showWeekNumbers`              | `showWeekNumbers`      |           | `boolean`                                        |           | Gets or sets whether to show week numbers in month view. |
| `size`                         | `size`                 |           | `Size`                                           |           | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `specialDates`                 |                        |           | `Date[]`                                         |           | Gets or sets the special dates that should be highlighted. |
| `startDate`                    | `startDate`            |           | `Date \| null`                                   |           | Gets or sets the start date for the visible range.<br />When null, defaults to today. |
| `stepMinutes`                  | `stepMinutes`          |           | `number`                                         |           | Gets or sets the step interval in minutes.       |
| `themeName`                    |                        |           | `string`                                         |           | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeFormat`                   | `timeFormat`           |           | `string`                                         | "'HH:mm'" | Gets or sets the format string for time display. |
| `timeSlots`                    |                        | readonly  | `{ time: string; label: string; isHour: boolean; isLastOfHour: boolean; }[]` |           | Gets the time slots for rendering the grid.      |
| `timezone`                     | `timezone`             |           | `string`                                         |           | Gets or sets the timezone for calculations.      |
| `variant`                      | `variant`              |           | `Variant`                                        |           | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `view`                         | `view`                 |           | `SchedulerView`                                  |           | Gets or sets the current view mode of the scheduler. |
| `visibleDates`                 |                        | readonly  | `Date[]`                                         |           | Gets the visible dates array.                    |
| `weekdayFormat`                | `weekdayFormat`        |           | `string`                                         | "'ddd'"   | Gets or sets the format string for weekday headers. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `activateEvent`         | `(eventKey: string, trigger?: SchedulerEventActivateTrigger): boolean` | Activates an event programmatically.<br /><br />**eventKey**: The event key to activate.<br />**trigger**: The activation trigger. |
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getAllDayEvents`       | `(): IAllDayEvent[]`                             | Gets all all-day events across all visible days. |
| `getAllDayEventsForDay` | `(dayKey: string): IAllDayEvent[]`               | Gets all-day events for a specific day.<br /><br />**dayKey**: The day key (YYYY-MM-DD). |
| `getEventsForDay`       | `(dayKey: string): IPositionedEvent[]`           | Gets events for a specific day.<br /><br />**dayKey**: The day key (YYYY-MM-DD). |
| `getNowIndicatorTop`    | `(): number`                                     | Calculates the now indicator top position as percentage. |
| `getSlotAssignments`    | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `isBlackoutDate`        | `(date: Date): boolean`                          | Returns true when a date is configured as blackout date.<br /><br />**date**: The date to check. |
| `isSpecialDate`         | `(date: Date): boolean`                          | Returns true when a date is configured as special date.<br /><br />**date**: The date to check. |
| `isToday`               | `(date: Date): boolean`                          | Returns true when the given date is today.<br /><br />**date**: The date to check. |
| `isWeekend`             | `(date: Date): boolean`                          | Returns true when the given date is weekend.<br /><br />**date**: The date to check. |
| `navigateNext`          | `(): void`                                       | Navigates to the next period.                    |
| `navigatePrevious`      | `(): void`                                       | Navigates to the previous period.                |
| `navigateToDate`        | `(date: Date): void`                             | Navigates to a specific date.<br /><br />**date**: The date to navigate to. |
| `navigateToday`         | `(): void`                                       | Navigates to today.                              |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onAllDayCellClick`     | `(date: Date): void`                             | Handles click on an all-day cell to create a new all-day event.<br /><br />**date**: The date of the cell. |
| `onEventClick`          | `(eventKey: string): void`                       | Handles click on an event renderer.              |
| `onEventKeydown`        | `(event: KeyboardEvent, eventKey: string): void` | Handles keyboard activation of an event.         |
| `onGridCellClick`       | `(date: Date, time: string): void`               | Handles click on a grid cell to create a new event.<br /><br />**date**: The date of the cell.<br />**time**: The time slot string (e.g., "09:00"). |
| `onSlotChanges`         | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                          | Type                                | Description                                      |
|--------------------------------|-------------------------------------|--------------------------------------------------|
| `changed`                      | `PropertyChangedEvent`              | Emitted when any attribute changes before update |
| `connected`                    | `ConnectedEvent`                    | Emitted when the element is connected to the DOM |
| `disconnected`                 | `DisconnectedEvent`                 | Emitted when the element is disconnected from the DOM |
| `schedulerBeforeEventActivate` | `SchedulerBeforeEventActivateEvent` | Before event activation (cancelable)             |
| `schedulerBeforeSelectRange`   | `SchedulerBeforeSelectRangeEvent`   | Before range selection (cancelable)              |
| `schedulerEventActivate`       | `SchedulerEventActivateEvent`       | After event activation                           |
| `schedulerRangeChange`         | `SchedulerRangeChangeEvent`         | When visible range changes                       |
| `schedulerSelectRange`         | `SchedulerSelectRangeEvent`         | After range selection                            |

## Slots

| Name                    | Description                                      |
|-------------------------|--------------------------------------------------|
|                         | Default slot for mosaik-scheduler-event elements |
| `allday-${ev.eventKey}` | The allday-${ev.eventKey} slot.                  |
| `event-${ev.eventKey}`  | The event-${ev.eventKey} slot.                   |
| `style`                 | Custom styles injection slot for shadow DOM styling escape hatch |
| `toolbar`               | The toolbar slot.                                |

## CSS Shadow Parts

| Part             | Description                  |
|------------------|------------------------------|
| `agenda-view`    | The agenda-view part.        |
| `container`      | The main scheduler container |
| `events-slot`    | The events-slot part.        |
| `month-view`     | The month-view part.         |
| `next-day`       | The next-day part.           |
| `previous-day`   | The previous-day part.       |
| `time-grid-view` | The time-grid-view part.     |
| `today`          | The today part.              |
| `toolbar`        | The toolbar container        |

## CSS Custom Properties

| Property                                         | Type          | Description                                      |
|--------------------------------------------------|---------------|--------------------------------------------------|
| `--scheduler-background-color`                   | Color         | Background color of the scheduler                |
| `--scheduler-border-color`                       | Color         | Border color                                     |
| `--scheduler-border-radius`                      | String        | Border radius                                    |
| `--scheduler-border-style`                       | String        | Border style                                     |
| `--scheduler-border-width`                       | String        | Border width                                     |
| `--scheduler-cell-border-color`                  | Color         | Border color for time cells                      |
| `--scheduler-cell-border-radius`                 | String        | Border radius for time cells                     |
| `--scheduler-cell-border-style`                  | String        | Border style for time cells                      |
| `--scheduler-cell-border-width`                  | String        | Border width for time cells                      |
| `--scheduler-cell-height`                        | String        | Height of each time slot cell                    |
| `--scheduler-column-min-width`                   | String        | Minimum width of day columns                     |
| `--scheduler-event-padding-bottom`               | String        | Bottom padding for events                        |
| `--scheduler-event-padding-left`                 | String        | Left padding for events                          |
| `--scheduler-event-padding-right`                | String        | Right padding for events                         |
| `--scheduler-event-padding-top`                  | String        | Top padding for events                           |
| `--scheduler-focus-ring-active-width`            | String        | The focus ring active width CSS custom property. |
| `--scheduler-focus-ring-color`                   | String        | The focus ring color CSS custom property.        |
| `--scheduler-focus-ring-inward-offset`           | String        | The focus ring inward offset CSS custom property. |
| `--scheduler-focus-ring-outward-offset`          | String        | The focus ring outward offset CSS custom property. |
| `--scheduler-font-family`                        | String        | Font family                                      |
| `--scheduler-font-letter-spacing`                | String        | Letter spacing                                   |
| `--scheduler-font-line-height`                   | String        | Line height                                      |
| `--scheduler-font-size`                          | String        | Font size                                        |
| `--scheduler-font-text-decoration`               | String        | Text decoration                                  |
| `--scheduler-font-text-transform`                | String        | Text transform                                   |
| `--scheduler-font-weight`                        | String        | Font weight                                      |
| `--scheduler-foreground-color`                   | Color         | Foreground/text color                            |
| `--scheduler-gap`                                | String        | The gap CSS custom property.                     |
| `--scheduler-header-cell-padding-bottom`         | String        | Bottom padding for header cells                  |
| `--scheduler-header-cell-padding-left`           | String        | Left padding for header cells                    |
| `--scheduler-header-cell-padding-right`          | String        | Right padding for header cells                   |
| `--scheduler-header-cell-padding-top`            | String        | Top padding for header cells                     |
| `--scheduler-header-day-font-family`             | String        | Font family for day numbers in header            |
| `--scheduler-header-day-font-letter-spacing`     | String        | Letter spacing for day numbers                   |
| `--scheduler-header-day-font-line-height`        | String        | Line height for day numbers                      |
| `--scheduler-header-day-font-size`               | String        | Font size for day numbers                        |
| `--scheduler-header-day-font-text-decoration`    | String        | Text decoration for day numbers                  |
| `--scheduler-header-day-font-text-transform`     | String        | Text transform for day numbers                   |
| `--scheduler-header-day-font-weight`             | String        | Font weight for day numbers                      |
| `--scheduler-header-font-family`                 | String        | Font family for header                           |
| `--scheduler-header-font-letter-spacing`         | String        | Letter spacing for header                        |
| `--scheduler-header-font-line-height`            | String        | Line height for header                           |
| `--scheduler-header-font-size`                   | String        | Font size for header                             |
| `--scheduler-header-font-text-decoration`        | String        | Text decoration for header                       |
| `--scheduler-header-font-text-transform`         | String        | Text transform for header                        |
| `--scheduler-header-font-weight`                 | String        | Font weight for header                           |
| `--scheduler-header-weekday-font-family`         | String        | Font family for weekday labels                   |
| `--scheduler-header-weekday-font-letter-spacing` | String        | Letter spacing for weekday labels                |
| `--scheduler-header-weekday-font-line-height`    | String        | Line height for weekday labels                   |
| `--scheduler-header-weekday-font-size`           | String        | Font size for weekday labels                     |
| `--scheduler-header-weekday-font-text-decoration` | String        | Text decoration for weekday labels               |
| `--scheduler-header-weekday-font-text-transform` | String        | Text transform for weekday labels                |
| `--scheduler-header-weekday-font-weight`         | String        | Font weight for weekday labels                   |
| `--scheduler-hour-border-color`                  | Color         | Border color for hour boundaries                 |
| `--scheduler-hour-border-radius`                 | String        | Border radius for hour boundaries                |
| `--scheduler-hour-border-style`                  | String        | Border style for hour boundaries                 |
| `--scheduler-hour-border-width`                  | String        | Border width for hour boundaries                 |
| `--scheduler-padding-bottom`                     | String        | The padding bottom CSS custom property.          |
| `--scheduler-padding-left`                       | String        | The padding left CSS custom property.            |
| `--scheduler-padding-right`                      | String        | The padding right CSS custom property.           |
| `--scheduler-padding-top`                        | String        | The padding top CSS custom property.             |
| `--scheduler-shadow`                             | String        | The shadow CSS custom property.                  |
| `--scheduler-shadow-blur`                        | String        | The shadow blur CSS custom property.             |
| `--scheduler-shadow-color`                       | String        | The shadow color CSS custom property.            |
| `--scheduler-shadow-offset-x`                    | String        | The shadow offset x CSS custom property.         |
| `--scheduler-shadow-offset-y`                    | String        | The shadow offset y CSS custom property.         |
| `--scheduler-shadow-spread`                      | String        | The shadow spread CSS custom property.           |
| `--scheduler-timescale-width`                    | String        | Width of the timescale                           |
| `--scheduler-today-background-color`             | Color         | Background color for today's column              |
| `--scheduler-transition-duration`                | String        | Duration for transitions                         |
| `--scheduler-transition-mode`                    | String        | Timing function for transitions                  |
| `--scheduler-transition-property`                | Array<String> | CSS properties to transition                     |
| `--scheduler-translate`                          | String        | The translate CSS custom property.               |

# mosaik-scroll

Scroll - A scrollable container with scroll position detection and optional navigation buttons.

**Mixins:** Themeable, Orientable, Slottable

## Examples

Basic scrollable container:

```html
<mosaik-scroll>
  <div>Long content here...</div>
</mosaik-scroll>
```

Horizontal scroller with navigation buttons:

```html
<mosaik-scroll show-scroll-buttons style="white-space: nowrap;">
  <mosaik-button label="Item 1"></mosaik-button>
  <mosaik-button label="Item 2"></mosaik-button>
  <mosaik-button label="Item 3"></mosaik-button>
  <!-- many more items -->
</mosaik-scroll>
```

Detecting scroll position:

```html
<mosaik-scroll id="myScroll">
  <div>Content...</div>
</mosaik-scroll>
<script>
  const scroll = document.querySelector('#myScroll');
  scroll.addEventListener('changed', (e) => {
    if (e.detail.propertyName === 'isAtScrollBottom' && e.detail.value) {
      console.log('Scrolled to bottom!');
    }
  });
</script>
```

## Properties

| Property            | Attribute           | Modifiers | Type                                         | Description                                      |
|---------------------|---------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`           |                     | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                     | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`               |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`      |                     | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isAtScrollBottom`  | `isAtScrollBottom`  |           | `boolean`                                    | Gets or sets the `isAtScrollBottom` property.    |
| `isAtScrollEnd`     | `isAtScrollEnd`     |           | `boolean`                                    | Gets the `isAtScrollEnd` property.<br />Indicates whether the scroll area is at the horizontal end (right in LTR). |
| `isAtScrollStart`   | `isAtScrollStart`   |           | `boolean`                                    | Gets the `isAtScrollStart` property.<br />Indicates whether the scroll area is at the horizontal start (left in LTR). |
| `isAtScrollTop`     | `isAtScrollTop`     |           | `boolean`                                    | Gets or sets the `isAtScrollTop` property.       |
| `isScrollable`      |                     | readonly  | `boolean`                                    | Returns whether horizontal scrolling is possible. |
| `lang`              | `lang`              |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`       | `orientation`       |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `showScrollButtons` | `showScrollButtons` |           | `boolean`                                    | Gets or sets the `showScrollButtons` property.<br />When `true`, prev/next navigation buttons are shown overlaying the scroll area.<br />The buttons are positioned at the edges and hidden when the scroll position is<br />already at the respective boundary. This property is independent of gradient<br />indicators and scrollbar visibility.<br />When `false`, no navigation buttons are shown.<br />The default value is `false`. |
| `showScrollbar`     | `showScrollbar`     |           | `boolean`                                    | Gets or sets the `scrollbar` property.<br />When `true`, the native scrollbar is visible.<br />When `false`, the scrollbar is hidden.<br />The default value is `false`. |
| `themeName`         |                     |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `scrollByDirection`    | `(direction: "prev" \| "next"): void`            | Scrolls the content in the specified direction by approximately 80% of the visible dimension.<br />The scroll axis depends on the current `orientation`.<br /><br />**direction**: The scroll direction (`'prev'` or `'next'`). |
| `scrollToPosition`     | `(position: number, isSmooth?: boolean): void`   | Scrolls the content to a specific position in pixels.<br />The scroll axis depends on the current `orientation`.<br /><br />**position**: The target scroll position in pixels.<br />**isSmooth**: Whether the scrolling should be animated (smooth) or immediate. Defaults to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot for scrollable content  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part               | Description                                      |
|--------------------|--------------------------------------------------|
| `actionNext`       | The wrapper for the next scroll button (overlays the scroll area) |
| `actionPrev`       | The wrapper for the previous scroll button (overlays the scroll area) |
| `anchorBottom`     | The bottom anchor element for vertical scroll detection |
| `anchorTop`        | The top anchor element for vertical scroll detection |
| `content`          | The inner scroll wrapper (inline-flex, holds slot and triggers) |
| `root`             | The outer grid container element                 |
| `scrollButtonNext` | The next (right/down) navigation button          |
| `scrollButtonPrev` | The previous (left/up) navigation button         |
| `scroller`         | The scrollable area element (spans the full grid) |
| `triggerEnd`       | The triggerEnd part.                             |
| `triggerStart`     | The triggerStart part.                           |

## CSS Custom Properties

| Property                        | Type   | Description                                      |
|---------------------------------|--------|--------------------------------------------------|
| `--scroll-action-button-width`  | String | The width of the action button wrapper area      |
| `--scroll-font-family`          | String | The font family CSS custom property.             |
| `--scroll-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--scroll-font-line-height`     | String | The font line height CSS custom property.        |
| `--scroll-font-size`            | String | The font size CSS custom property.               |
| `--scroll-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--scroll-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--scroll-font-weight`          | String | The font weight CSS custom property.             |
| `--scroll-gap`                  | String | The gap CSS custom property.                     |
| `--scroll-gradient-size`        | String | The size of the gradient fade indicator at scroll edges |
| `--scroll-padding-bottom`       | String | The padding bottom CSS custom property.          |
| `--scroll-padding-left`         | String | The padding left CSS custom property.            |
| `--scroll-padding-right`        | String | The padding right CSS custom property.           |
| `--scroll-padding-top`          | String | The padding top CSS custom property.             |
| `--scroll-shadow`               | String | The shadow CSS custom property.                  |
| `--scroll-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--scroll-shadow-color`         | String | The shadow color CSS custom property.            |
| `--scroll-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--scroll-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--scroll-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--scroll-transition-duration`  | String | The duration of the opacity transition for action buttons |
| `--scroll-transition-mode`      | String | The easing function of the opacity transition for action buttons |
| `--scroll-transition-property`  | String | The CSS properties to transition (e.g. background-color, box-shadow, transform) |
| `--scroll-translate`            | String | The translate CSS custom property.               |

# mosaik-scrub-slider

Scrub Slider – A customizable slider component for precise value selection.

**Mixins:** Themeable, Orientable, Disableable, Variantable, Appearanceable, Focusable, Invalidable, Valueable, Rangeable

## Examples

Basic scrub slider:

```html
<mosaik-scrub-slider min="0" max="100" value="50"></mosaik-scrub-slider>
```

Scrub slider with ticks and track:

```html
<mosaik-scrub-slider
  min="0"
  max="200"
  value="100"
  step="5"
  ticks="10"
  tick-placement="both"
  show-tick-labels
  track>
</mosaik-scrub-slider>
```

Scrub slider with tooltip and custom pixels-per-step:

```html
<mosaik-scrub-slider
  id="scrubber"
  min="0"
  max="1000"
  value="0"
  step="1"
  tooltip-placement="top"
  px-per-step="4"
  variant="primary">
</mosaik-scrub-slider>
<script>
  document.getElementById('scrubber').tooltipAccessor = (v) => `${v} ms`;
</script>
```

## Properties

| Property            | Attribute     | Modifiers | Type                                         | Default | Description                                      |
|---------------------|---------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `accelerate`        |               |           | `boolean`                                    | "true"  | Accelerate the slider when dragging.             |
| `appearance`        | `appearance`  |           | `Appearance`                                 |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`           |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |               | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`         |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`    |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |               | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`           | `invalid`     |           | `boolean`                                    |         | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isFocused`         | `is-focused`  |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`              | `lang`        |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `max`               | `max`         |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`         |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `orientation`       | `orientation` |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `pxPerStep`         |               |           | `number`                                     |         |                                                  |
| `rangeValueChanged` |               | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `showTickLabels`    |               |           | `boolean`                                    |         |                                                  |
| `step`              |               |           | `number`                                     |         |                                                  |
| `themeName`         |               |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tickLabelAccessor` |               |           | `(value: number) => string`                  |         |                                                  |
| `tickPlacement`     |               |           | `TickPlacement`                              |         |                                                  |
| `ticks`             |               |           | `number`                                     |         |                                                  |
| `tooltipAccessor`   |               |           | `(value: number) => string`                  |         |                                                  |
| `tooltipPlacement`  |               |           | `AutoToolTipPlacement`                       |         |                                                  |
| `track`             |               |           | `boolean`                                    |         |                                                  |
| `value`             | `value`       |           | `TType`                                      |         | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`           | `variant`     |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `change`            |                          |                                                  |
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `input`             | `InputEvent`             |                                                  |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the value property changes, providing both old and new numeric values |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `hint`  | The hint slot.                                   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `center`  | The center part.  |
| `hint`    | The hint part.    |
| `input`   | The input part.   |
| `labels`  | The labels part.  |
| `root`    | The root part.    |
| `surface` | The surface part. |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--scrub-slider-background-color`             | String | The slider background color CSS custom property. |
| `--scrub-slider-border-color`                 | String | The slider border color CSS custom property.     |
| `--scrub-slider-border-radius`                | String | The slider border radius CSS custom property.    |
| `--scrub-slider-border-style`                 | String | The slider border style CSS custom property.     |
| `--scrub-slider-border-width`                 | String | The slider border width CSS custom property.     |
| `--scrub-slider-font-family`                  | String | The slider font family CSS custom property.      |
| `--scrub-slider-font-letter-spacing`          | String | The slider font letter spacing CSS custom property. |
| `--scrub-slider-font-line-height`             | String | The slider font line height CSS custom property. |
| `--scrub-slider-font-size`                    | String | The slider font size CSS custom property.        |
| `--scrub-slider-font-text-decoration`         | String | The slider font text decoration CSS custom property. |
| `--scrub-slider-font-text-transform`          | String | The slider font text transform CSS custom property. |
| `--scrub-slider-font-weight`                  | String | The slider font weight CSS custom property.      |
| `--scrub-slider-foreground-color`             | String | The slider foreground color CSS custom property. |
| `--scrub-slider-gap`                          | String | The slider gap CSS custom property.              |
| `--scrub-slider-padding-bottom`               | String | The slider padding bottom CSS custom property.   |
| `--scrub-slider-padding-left`                 | String | The slider padding left CSS custom property.     |
| `--scrub-slider-padding-right`                | String | The slider padding right CSS custom property.    |
| `--scrub-slider-padding-top`                  | String | The slider padding top CSS custom property.      |
| `--scrub-slider-shadow`                       | String | The slider shadow CSS custom property.           |
| `--scrub-slider-shadow-blur`                  | String | The slider shadow blur CSS custom property.      |
| `--scrub-slider-shadow-color`                 | String | The slider shadow color CSS custom property.     |
| `--scrub-slider-shadow-offset-x`              | String | The slider shadow offset x CSS custom property.  |
| `--scrub-slider-shadow-offset-y`              | String | The slider shadow offset y CSS custom property.  |
| `--scrub-slider-shadow-spread`                | String | The slider shadow spread CSS custom property.    |
| `--scrub-slider-thumb-background-color`       | String | The slider thumb background color CSS custom property. |
| `--scrub-slider-thumb-border-color`           | String | The slider thumb border color CSS custom property. |
| `--scrub-slider-thumb-border-radius`          | String | The slider thumb border radius CSS custom property. |
| `--scrub-slider-thumb-border-style`           | String | The slider thumb border style CSS custom property. |
| `--scrub-slider-thumb-border-width`           | String | The slider thumb border width CSS custom property. |
| `--scrub-slider-thumb-foreground-color`       | String | The slider thumb foreground color CSS custom property. |
| `--scrub-slider-thumb-size`                   | String | The slider thumb size CSS custom property.       |
| `--scrub-slider-tick-gap`                     | String | The slider tick gap CSS custom property.         |
| `--scrub-slider-tooltip-background-color`     | String | The slider tooltip background color CSS custom property. |
| `--scrub-slider-tooltip-border-color`         | String | The slider tooltip border color CSS custom property. |
| `--scrub-slider-tooltip-border-radius`        | String | The slider tooltip border radius CSS custom property. |
| `--scrub-slider-tooltip-border-style`         | String | The slider tooltip border style CSS custom property. |
| `--scrub-slider-tooltip-border-width`         | String | The slider tooltip border width CSS custom property. |
| `--scrub-slider-tooltip-font-family`          | String | The slider tooltip font family CSS custom property. |
| `--scrub-slider-tooltip-font-letter-spacing`  | String | The slider tooltip font letter spacing CSS custom property. |
| `--scrub-slider-tooltip-font-line-height`     | String | The slider tooltip font line height CSS custom property. |
| `--scrub-slider-tooltip-font-size`            | String | The slider tooltip font size CSS custom property. |
| `--scrub-slider-tooltip-font-text-decoration` | String | The slider tooltip font text decoration CSS custom property. |
| `--scrub-slider-tooltip-font-text-transform`  | String | The slider tooltip font text transform CSS custom property. |
| `--scrub-slider-tooltip-font-weight`          | String | The slider tooltip font weight CSS custom property. |
| `--scrub-slider-tooltip-foreground-color`     | String | The slider tooltip foreground color CSS custom property. |
| `--scrub-slider-tooltip-gap`                  | String | The slider tooltip gap CSS custom property.      |
| `--scrub-slider-tooltip-padding-bottom`       | String | The slider tooltip padding bottom CSS custom property. |
| `--scrub-slider-tooltip-padding-left`         | String | The slider tooltip padding left CSS custom property. |
| `--scrub-slider-tooltip-padding-right`        | String | The slider tooltip padding right CSS custom property. |
| `--scrub-slider-tooltip-padding-top`          | String | The slider tooltip padding top CSS custom property. |
| `--scrub-slider-tooltip-shadow`               | String | The slider tooltip shadow CSS custom property.   |
| `--scrub-slider-tooltip-transition-duration`  | String | The slider tooltip transition duration CSS custom property. |
| `--scrub-slider-tooltip-transition-mode`      | String | The slider tooltip transition mode CSS custom property. |
| `--scrub-slider-tooltip-transition-property`  | String | The slider tooltip transition property CSS custom property. |
| `--scrub-slider-track-size`                   | String | The slider track size CSS custom property.       |
| `--scrub-slider-transition-duration`          | String | The slider transition duration CSS custom property. |
| `--scrub-slider-transition-mode`              | String | The slider transition mode CSS custom property.  |
| `--scrub-slider-transition-property`          | String | The slider transition property CSS custom property. |
| `--scrub-slider-translate`                    | String | The slider translate CSS custom property.        |

# SearchBoxElement - Specialized search input with integrated functionality

## Description
The Search Box component provides a dedicated interface for entering and executing search queries with built-in search functionality and visual indicators. Features include a search icon, clear functionality, configurable search trigger modes (on enter, on input, manual), debounced search execution to prevent excessive queries, progress indication for ongoing searches, and comprehensive keyboard support. Perfect for search forms, filter interfaces, and content discovery.

## Element
- **Tag**: `mosaik-searchbox`
- **Category**: Inputs

## Slots
- `prefix` - Content placed before the search input
- `suffix` - Content placed after the search input

## CSS Parts
- `prefix` - The prefix content container
- `search` - The search icon element
- `inner` - The inner container wrapper
- `input` - The search input field
- `suffix` - The suffix content container
- `clear` - The clear button element
- `focusRing` - The focus ring indicator
- `progressRing` - The progress ring for loading state

## CSS Custom Properties
- `--search-box-background-color` - Background color
- `--search-box-border-color` - Border color
- `--search-box-border-radius` - Border radius
- `--search-box-border-style` - Border style
- `--search-box-border-width` - Border width
- `--search-box-font-family` - Font family
- `--search-box-font-size` - Font size
- `--search-box-font-weight` - Font weight
- `--search-box-foreground-color` - Text color
- `--search-box-gap` - Gap between elements
- `--search-box-height` - Height
- `--search-box-padding-top/right/bottom/left` - Padding
- `--search-box-shadow` - Shadow effect
- `--search-box-transition-duration` - Transition duration

## Dependencies
- `mosaik-focus-ring` - Focus indication
- `mosaik-icon` - Search and clear icons

## Examples

### Basic search box
```html
<mosaik-searchbox placeholder="Search..."></mosaik-searchbox>
```

### With search event handler
```html
<mosaik-searchbox 
    id="search" 
    placeholder="Search products...">
</mosaik-searchbox>

<script>
    document.getElementById('search').addEventListener('search', (e) => {
        console.log('Searching for:', e.detail.value);
    });
</script>
```

### With debounce
```html
<mosaik-searchbox 
    placeholder="Type to search..." 
    debounce="500">
</mosaik-searchbox>
```

# mosaik-searchbox

Search Box - A specialized input control for search queries with integrated search functionality.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Invalidable, Variantable, Busyable, Appearanceable, Focusable

## Examples

```html
<mosaik-searchbox
  placeholder="Search products..."
  mode="debounced"
  delay="300">
</mosaik-searchbox>
```

```html
<mosaik-searchbox
  placeholder="Search..."
  mode="enter"
  is-clearable>
</mosaik-searchbox>
```

## Properties

| Property       | Attribute      | Modifiers | Type                                         | Description                                      |
|----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete` | `autocomplete` |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`    |                |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `changed`      |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`      |                |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`    |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `delay`        | `delay`        |           | `number`                                     | Gets or sets the `delay` property.               |
| `dir`          | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |                |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`      | `invalid`      |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isBusy`       | `is-busy`      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isClearable`  | `is-clearable` |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isFocused`    | `is-focused`   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `mode`         | `mode`         |           | `SearchTriggerMode`                          | Gets or sets the `mode` property.                |
| `name`         | `name`         |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`       |                |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `pattern`      | `pattern`      |           | `string`                                     | Gets or sets the `pattern` property.             |
| `placeholder`  | `placeholder`  |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`     | `readonly`     |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`     | `required`     |           | `boolean`                                    | Gets or sets the `required` property.            |
| `searched`     |                | readonly  | `IEventEmitter<IEventDetail>`                | Called when the search is triggered.<br />Provides reference to `IEventDetail` as event detail. |
| `state`        | `state`        |           | `InputState`                                 | Gets or sets the `state` property.               |
| `textAlign`    | `textAlign`    |           | `TextAlignment`                              | Determines the text alignment of the component.  |
| `themeName`    |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`        |           | `string`                                     | Gets or sets the `value` property.               |
| `variant`      | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       |                                                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       |                                                  |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `search`                | `(): void`                                       |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `searched`     | `SearchedEvent`        | Fired when the element is searched.              |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the search input.          |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the search input.           |

## CSS Shadow Parts

| Part           | Description                          |
|----------------|--------------------------------------|
| `clear`        | The clear button element.            |
| `focusRing`    | The focus ring indicator.            |
| `inner`        | The inner container wrapper.         |
| `input`        | The search input field.              |
| `prefix`       | The prefix content container.        |
| `progressRing` | The progress ring for loading state. |
| `search`       | The search icon element.             |
| `suffix`       | The suffix content container.        |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--search-box-background-color`          | Color  | The background color.                            |
| `--search-box-border-color`              | Color  | The border color.                                |
| `--search-box-border-radius`             | String | The border radius.                               |
| `--search-box-border-style`              | String | The border style.                                |
| `--search-box-border-width`              | String | The border width.                                |
| `--search-box-focus-ring-active-width`   | String | The box focus ring active width CSS custom property. |
| `--search-box-focus-ring-color`          | String | The box focus ring color CSS custom property.    |
| `--search-box-focus-ring-inward-offset`  | String | The box focus ring inward offset CSS custom property. |
| `--search-box-focus-ring-outward-offset` | String | The box focus ring outward offset CSS custom property. |
| `--search-box-focus-ring-width`          | String | The box focus ring width CSS custom property.    |
| `--search-box-font-family`               | String | The font family.                                 |
| `--search-box-font-letter-spacing`       | String | The box font letter spacing CSS custom property. |
| `--search-box-font-line-height`          | String | The box font line height CSS custom property.    |
| `--search-box-font-size`                 | String | The font size.                                   |
| `--search-box-font-text-decoration`      | String | The box font text decoration CSS custom property. |
| `--search-box-font-text-transform`       | String | The box font text transform CSS custom property. |
| `--search-box-font-weight`               | String | The font weight.                                 |
| `--search-box-foreground-color`          | Color  | The foreground color.                            |
| `--search-box-gap`                       | String | The gap between elements.                        |
| `--search-box-height`                    | String | The height.                                      |
| `--search-box-padding-bottom`            | String | The padding bottom.                              |
| `--search-box-padding-left`              | String | The padding left.                                |
| `--search-box-padding-right`             | String | The padding right.                               |
| `--search-box-padding-top`               | String | The padding top.                                 |
| `--search-box-shadow`                    | String | The shadow.                                      |
| `--search-box-shadow-blur`               | String | The box shadow blur CSS custom property.         |
| `--search-box-shadow-color`              | String | The box shadow color CSS custom property.        |
| `--search-box-shadow-offset-x`           | String | The box shadow offset x CSS custom property.     |
| `--search-box-shadow-offset-y`           | String | The box shadow offset y CSS custom property.     |
| `--search-box-shadow-spread`             | String | The box shadow spread CSS custom property.       |
| `--search-box-transition-duration`       | String | The transition duration.                         |
| `--search-box-transition-mode`           | String | The box transition mode CSS custom property.     |
| `--search-box-transition-property`       | String | The box transition property CSS custom property. |
| `--search-box-translate`                 | String | The box translate CSS custom property.           |

# mosaik-segment-item

Segment Item - An individual selectable button within a Segment control.

**Mixins:** Themeable, Orientable, Checkable, Labelable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic segment item with slotted label:

```html
<mosaik-segment-item><span slot="label">Daily</span></mosaik-segment-item>
```

Segment item with icon-position and checked state:

```html
<mosaik-segment-item is-checked icon-position="before">
  <span slot="label">Grid View</span>
</mosaik-segment-item>
```

Disabled segment item:

```html
<mosaik-segment-item disabled>
  <span slot="label">Unavailable</span>
</mosaik-segment-item>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance`  |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`      |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |               |           | `string`                                     | Gets or sets the `icon` property.                |
| `iconPosition` |               |           | `IconPosition`                               | Gets or sets the `iconPosition` property.        |
| `iconSize`     |               |           | `Size \| null`                               | Gets or sets the `iconSize` property.            |
| `isChecked`    | `is-checked`  |           | `boolean`                                    | Gets or sets the `isChecked` property.<br />The default value is `false`, which means the element is not checked. |
| `isFocused`    | `is-focused`  |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`        |               |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `ripple`       | `ripple`      |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`         | `size`        |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`      |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property changes (either direction).<br />Provides reference to the `IEventDetail` as event argument. |
| `type`         | `type`        |           | `ButtonType`                                 | The type of the button.                          |
| `unchecked`    |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `value`        | `value`       |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `check`                 | `(): void`                                       | Checks the element.                              |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`                | `(): void`                                       |                                                  |
| `uncheck`               | `(): void`                                       | Unchecks the element.                            |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `checked`      | `CheckedEvent`         | Fired when the segment item is checked           |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `toggled`      | `ToggledEvent`         | Dispatched when the segment item is toggled, regardless of the new state |
| `unchecked`    | `UncheckedEvent`       | Fired when the segment item is unchecked         |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `icon`  | The icon displayed within the segment item       |
| `label` | The text label displayed within the segment item |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                               |
|--------------|-------------------------------------------|
| `button`     | The main button element container         |
| `icon`       | The icon display area                     |
| `innerStack` | The inner layout stack for icon and label |
| `label`      | The text label display area               |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--segment-item-background`                 | String | The item background CSS custom property.         |
| `--segment-item-background-checked`         | String | The item background checked CSS custom property. |
| `--segment-item-background-color`           | String | The background fill color                        |
| `--segment-item-background-focused`         | String | The item background focused CSS custom property. |
| `--segment-item-background-focused-opacity` | String | The item background focused opacity CSS custom property. |
| `--segment-item-background-hover`           | String | The item background hover CSS custom property.   |
| `--segment-item-background-hover-opacity`   | String | The item background hover opacity CSS custom property. |
| `--segment-item-border-color`               | String | The item border color CSS custom property.       |
| `--segment-item-border-radius`              | String | The item border radius CSS custom property.      |
| `--segment-item-border-style`               | String | The item border style CSS custom property.       |
| `--segment-item-border-width`               | String | The item border width CSS custom property.       |
| `--segment-item-color`                      | String | The item color CSS custom property.              |
| `--segment-item-color-checked`              | String | The item color checked CSS custom property.      |
| `--segment-item-color-disabled`             | String | The item color disabled CSS custom property.     |
| `--segment-item-color-hover`                | String | The item color hover CSS custom property.        |
| `--segment-item-font-family`                | String | The font family for segment item text            |
| `--segment-item-font-letter-spacing`        | String | The letter spacing for segment item text         |
| `--segment-item-font-line-height`           | String | The line height for segment item text            |
| `--segment-item-font-size`                  | String | The font size for segment item text              |
| `--segment-item-font-text-decoration`       | String | The text decoration style                        |
| `--segment-item-font-text-transform`        | String | The text transformation style                    |
| `--segment-item-font-weight`                | String | The font weight for segment item text            |
| `--segment-item-gap`                        | String | The item gap CSS custom property.                |
| `--segment-item-padding-bottom`             | String | The item padding bottom CSS custom property.     |
| `--segment-item-padding-end`                | String | The item padding end CSS custom property.        |
| `--segment-item-padding-left`               | String | The item padding left CSS custom property.       |
| `--segment-item-padding-right`              | String | The item padding right CSS custom property.      |
| `--segment-item-padding-start`              | String | The item padding start CSS custom property.      |
| `--segment-item-padding-top`                | String | The item padding top CSS custom property.        |
| `--segment-item-shadow`                     | String | The item shadow CSS custom property.             |
| `--segment-item-shadow-blur`                | String | The item shadow blur CSS custom property.        |
| `--segment-item-shadow-color`               | String | The item shadow color CSS custom property.       |
| `--segment-item-shadow-offset-x`            | String | The item shadow offset x CSS custom property.    |
| `--segment-item-shadow-offset-y`            | String | The item shadow offset y CSS custom property.    |
| `--segment-item-shadow-spread`              | String | The item shadow spread CSS custom property.      |
| `--segment-item-transition-duration`        | String | The item transition duration CSS custom property. |
| `--segment-item-transition-mode`            | String | The item transition mode CSS custom property.    |
| `--segment-item-transition-property`        | String | The item transition property CSS custom property. |
| `--segment-item-translate`                  | String | The item translate CSS custom property.          |

# mosaik-segment

Segment - A mutually exclusive button group for toggling between different views or options.

**Mixins:** Themeable, Slottable, Disableable, Variantable, Appearanceable

## Examples

Basic segment with three options:

```html
<mosaik-segment>
  <mosaik-segment-item><span slot="label">Day</span></mosaik-segment-item>
  <mosaik-segment-item is-checked><span slot="label">Week</span></mosaik-segment-item>
  <mosaik-segment-item><span slot="label">Month</span></mosaik-segment-item>
</mosaik-segment>
```

Primary variant segment:

```html
<mosaik-segment variant="primary">
  <mosaik-segment-item><span slot="label">List</span></mosaik-segment-item>
  <mosaik-segment-item is-checked><span slot="label">Grid</span></mosaik-segment-item>
  <mosaik-segment-item><span slot="label">Table</span></mosaik-segment-item>
</mosaik-segment>
```

Disabled segment:

```html
<mosaik-segment disabled>
  <mosaik-segment-item><span slot="label">Option 1</span></mosaik-segment-item>
  <mosaik-segment-item><span slot="label">Option 2</span></mosaik-segment-item>
</mosaik-segment>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for segment items (mosaik-segment-item elements) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                            |
|-------------|----------------------------------------|
| `indicator` | The animated ink bar indicator element |

## CSS Custom Properties

| Property                         | Type   | Description                                      |
|----------------------------------|--------|--------------------------------------------------|
| `--segment-background-color`     | String | The background fill color of the segment container |
| `--segment-border-color`         | String | The border color                                 |
| `--segment-border-radius`        | String | The corner rounding radius                       |
| `--segment-border-style`         | String | The border line style                            |
| `--segment-border-width`         | String | The border thickness                             |
| `--segment-font-family`          | String | The font family CSS custom property.             |
| `--segment-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--segment-font-line-height`     | String | The font line height CSS custom property.        |
| `--segment-font-size`            | String | The font size CSS custom property.               |
| `--segment-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--segment-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--segment-font-weight`          | String | The font weight CSS custom property.             |
| `--segment-foreground-color`     | String | The text and icon color                          |
| `--segment-gap`                  | String | The spacing between segment items                |
| `--segment-indicator-height`     | String | The height of the selection indicator            |
| `--segment-padding-bottom`       | String | The bottom padding inside the segment container  |
| `--segment-padding-left`         | String | The left padding inside the segment container    |
| `--segment-padding-right`        | String | The right padding inside the segment container   |
| `--segment-padding-top`          | String | The top padding inside the segment container     |
| `--segment-shadow`               | String | The shadow CSS custom property.                  |
| `--segment-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--segment-shadow-color`         | String | The shadow color CSS custom property.            |
| `--segment-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--segment-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--segment-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--segment-transition-duration`  | String | The transition duration CSS custom property.     |
| `--segment-transition-mode`      | String | The transition mode CSS custom property.         |
| `--segment-transition-property`  | String | The transition property CSS custom property.     |
| `--segment-translate`            | String | The translate CSS custom property.               |

# mosaik-select-item-group

Select Item Group - A labeled collection of related select options within dropdown menus.

**Mixins:** Themeable

## Examples

Basic grouped select items:

```html
<mosaik-select>
  <mosaik-select-item-group header="Recent">
    <mosaik-select-item value="home"></mosaik-select-item>
    <mosaik-select-item value="dashboard"></mosaik-select-item>
  </mosaik-select-item-group>

  <mosaik-select-item-group header="Settings">
    <mosaik-select-item value="profile"></mosaik-select-item>
    <mosaik-select-item value="preferences"></mosaik-select-item>
  </mosaik-select-item-group>
</mosaik-select>
```

Custom header content via slot:

```html
<mosaik-select-item-group>
  <div slot="header">
    <strong>Admin Tools</strong> <em>(restricted)</em>
  </div>
  <mosaik-select-item value="users"></mosaik-select-item>
  <mosaik-select-item value="admin-settings"></mosaik-select-item>
</mosaik-select-item-group>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `header`       | `header`  |           | `string`                                     | Gets or sets the `header` property.              |
| `items`        |           | readonly  | `SelectItemElement[]`                        | Returns the `items` property.                    |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot for Select Item elements within the group |
| `header` | The header slot for custom group label content   |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description                                      |
|----------|--------------------------------------------------|
| `header` | The group header text element displaying the group label |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--select-item-group-background-color`           | String | The background color of the group                |
| `--select-item-group-border-color`               | String | The border color                                 |
| `--select-item-group-border-radius`              | String | The corner rounding radius                       |
| `--select-item-group-border-style`               | String | The border line style                            |
| `--select-item-group-border-width`               | String | The border thickness                             |
| `--select-item-group-font-family`                | String | The font family for group header                 |
| `--select-item-group-font-letter-spacing`        | String | The item group font letter spacing CSS custom property. |
| `--select-item-group-font-line-height`           | String | The item group font line height CSS custom property. |
| `--select-item-group-font-size`                  | String | The font size for group header                   |
| `--select-item-group-font-text-decoration`       | String | The item group font text decoration CSS custom property. |
| `--select-item-group-font-text-transform`        | String | The item group font text transform CSS custom property. |
| `--select-item-group-font-weight`                | String | The font weight for group header                 |
| `--select-item-group-foreground-color`           | String | The header text color                            |
| `--select-item-group-gap`                        | String | The spacing between header and items             |
| `--select-item-group-header-font-family`         | String | The font family for header text                  |
| `--select-item-group-header-font-letter-spacing` | String | The letter spacing for header text               |
| `--select-item-group-header-font-line-height`    | String | The line height for header text                  |
| `--select-item-group-header-font-size`           | String | The font size for header text                    |
| `--select-item-group-header-font-text-decoration` | String | The text decoration for header                   |
| `--select-item-group-header-font-text-transform` | String | The text transformation for header               |
| `--select-item-group-header-font-weight`         | String | The font weight for header text                  |
| `--select-item-group-header-padding-bottom`      | String | The header bottom padding                        |
| `--select-item-group-header-padding-left`        | String | The header left padding                          |
| `--select-item-group-header-padding-right`       | String | The header right padding                         |
| `--select-item-group-header-padding-top`         | String | The header top padding                           |
| `--select-item-group-padding-bottom`             | String | The bottom padding inside the group              |
| `--select-item-group-padding-left`               | String | The left padding inside the group                |
| `--select-item-group-padding-right`              | String | The right padding inside the group               |
| `--select-item-group-padding-top`                | String | The top padding inside the group                 |
| `--select-item-group-shadow`                     | String | The drop shadow or elevation effect              |
| `--select-item-group-shadow-blur`                | String | The item group shadow blur CSS custom property.  |
| `--select-item-group-shadow-color`               | String | The item group shadow color CSS custom property. |
| `--select-item-group-shadow-offset-x`            | String | The item group shadow offset x CSS custom property. |
| `--select-item-group-shadow-offset-y`            | String | The item group shadow offset y CSS custom property. |
| `--select-item-group-shadow-spread`              | String | The item group shadow spread CSS custom property. |
| `--select-item-group-transition-duration`        | String | The duration of state transitions                |
| `--select-item-group-transition-mode`            | String | The timing function for transitions              |
| `--select-item-group-transition-property`        | String | The CSS properties to transition                 |
| `--select-item-group-translate`                  | String | The item group translate CSS custom property.    |

# mosaik-select-item

Select Item - An individual selectable option within dropdown select menus.

**Mixins:** Themeable, Rippleable, Disableable, Valueable, Variantable, Focusable, Labelable

## Examples

Basic select item:

```html
<mosaik-select-item value="opt1"></mosaik-select-item>
```

Selected item with variant:

```html
<mosaik-select-item value="premium" is-selected is-active variant="primary"></mosaik-select-item>
```

Item with custom content slots:

```html
<mosaik-select-item value="advanced">
  <span slot="label">Advanced Features</span>
  <kbd slot="end">⌘A</kbd>
</mosaik-select-item>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |              | readonly  | `string`                                     | Gets the `displayText` property.<br />Falls back to text content if label is empty. |
| `icon`         |              |           | `string`                                     | Gets or sets the `icon` property.                |
| `index`        |              | readonly  | `number`                                     | Gets the index of the item.                      |
| `isActive`     | `isActive`   |           | `boolean`                                    | Gets or sets the `isActive` property.            |
| `isFocused`    | `is-focused` |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isSelected`   | `isSelected` |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `label`        |              |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`       | `ripple`     |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `selected`     |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`              | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`                | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `end`   | Content placed after the label (e.g., shortcuts, metadata) |
| `icon`  | The icon display area alongside the label        |
| `label` | The primary text label for the option            |
| `start` | Content placed before the icon (e.g., status indicators, badges) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                |
|-------------|--------------------------------------------|
| `checkmark` | The selection indicator checkmark          |
| `focusRing` | The keyboard focus indicator ring          |
| `ripple`    | The touch feedback ripple effect container |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--select-item-background-color`          | String | The background color of the option               |
| `--select-item-border-color`              | String | The border color                                 |
| `--select-item-border-radius`             | String | The corner rounding radius                       |
| `--select-item-border-style`              | String | The border line style                            |
| `--select-item-border-width`              | String | The border thickness                             |
| `--select-item-focus-ring-active-width`   | String | The focus ring width when active (from focusRing mixin) |
| `--select-item-focus-ring-color`          | String | The focus ring color (from focusRing mixin)      |
| `--select-item-focus-ring-inward-offset`  | String | The focus ring inward offset (from focusRing mixin) |
| `--select-item-focus-ring-outward-offset` | String | The focus ring outward offset (from focusRing mixin) |
| `--select-item-font-family`               | String | The font family for option text                  |
| `--select-item-font-letter-spacing`       | String | The item font letter spacing CSS custom property. |
| `--select-item-font-line-height`          | String | The item font line height CSS custom property.   |
| `--select-item-font-size`                 | String | The font size for option text                    |
| `--select-item-font-text-decoration`      | String | The item font text decoration CSS custom property. |
| `--select-item-font-text-transform`       | String | The item font text transform CSS custom property. |
| `--select-item-font-weight`               | String | The font weight for option text                  |
| `--select-item-foreground-color`          | String | The text and icon color                          |
| `--select-item-gap`                       | String | The spacing between icon and label elements      |
| `--select-item-padding-bottom`            | String | The bottom padding inside the option             |
| `--select-item-padding-left`              | String | The left padding inside the option               |
| `--select-item-padding-right`             | String | The right padding inside the option              |
| `--select-item-padding-top`               | String | The top padding inside the option                |
| `--select-item-ripple-color`              | String | The ripple effect color (from ripple mixin)      |
| `--select-item-ripple-duration`           | String | The ripple animation duration (from ripple mixin) |
| `--select-item-shadow`                    | String | The drop shadow or elevation effect              |
| `--select-item-shadow-blur`               | String | The item shadow blur CSS custom property.        |
| `--select-item-shadow-color`              | String | The item shadow color CSS custom property.       |
| `--select-item-shadow-offset-x`           | String | The item shadow offset x CSS custom property.    |
| `--select-item-shadow-offset-y`           | String | The item shadow offset y CSS custom property.    |
| `--select-item-shadow-spread`             | String | The item shadow spread CSS custom property.      |
| `--select-item-transition-duration`       | String | The duration of hover/focus transitions          |
| `--select-item-transition-mode`           | String | The timing function for transitions              |
| `--select-item-transition-property`       | String | The CSS properties to transition                 |
| `--select-item-translate`                 | String | The item translate CSS custom property.          |

# mosaik-select

Select - A dropdown input control for choosing from a predefined list of options.

**Mixins:** Slottable, DropDownable, Appearanceable, Variantable, Labelable, Clearable, Valueable, Disableable, Invalidable, Themeable, Filterable

## Example

```html
<mosaik-select>
  <mosaik-select-item value="de"></mosaik-select-item>
  <mosaik-select-item value="fr"></mosaik-select-item>
  <mosaik-select-item value="it"></mosaik-select-item>
</mosaik-select>
```

## Properties

| Property            | Attribute              | Modifiers | Type                                             | Description                                      |
|---------------------|------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance`           |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`           |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`           |                        |           | `IEventEmitter<IEventDetail>`                    | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`         |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                  |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`             |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                        | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`  | `drop-down-distance`   |           | `number`                                         | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`    | `drop-down-height`     |           | `CssLength \| undefined`                         | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight` | `drop-down-max-height` |           | `CssLength`                                      | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`  | `drop-down-max-width`  |           | `CssLength \| undefined`                         | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement` | `drop-down-placement`  |           | `Placement`                                      | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`  | `drop-down-skidding`   |           | `number`                                         | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen` | `drop-down-stays-open` |           | `boolean`                                        | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`  | `drop-down-strategy`   |           | `Strategy`                                       | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`     | `drop-down-width`      |           | `CssLength \| undefined`                         | Gets or sets the `dropDownWidth` property.       |
| `filter`            |                        |           | `string`                                         | Gets or sets the `filter` property.<br />The default value is an empty string, which means no filter is applied. |
| `filterMemberPath`  | `filter-member-path`   |           | `string`                                         | Gets or sets the `filterMemberPath` property.<br />The member path is a dot-separated string that specifies the property to filter by.<br />The default value is an empty string, which means no specific member path is used for filtering. |
| `filterPlaceholder` |                        |           | `string`                                         | Gets or sets the `filterPlaceholder` property.<br />The default value is an empty string, which means no placeholder is shown in the filter input. |
| `intl`              |                        | readonly  | `SelectElementIntl`                              | Returns the `intl` property.                     |
| `invalid`           | `invalid`              |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`       | `is-clearable`         |           | `boolean`                                        | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`    | `is-drop-down-open`    |           | `boolean`                                        | Gets or sets the `isDropDownOpen` property.      |
| `isEditable`        | `isEditable`           |           | `boolean`                                        | Gets or sets the `isEditable` property.          |
| `isReadOnly`        | `isReadOnly`           |           | `boolean`                                        | Gets or sets the `isReadOnly` property.          |
| `itemsChanged`      |                        | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `label`             |                        |           | `string`                                         | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`                 |           | `string`                                         | The lang property indicates the language of the element's content. |
| `placeholder`       |                        |           | `string`                                         | Gets or sets the `placeholder` property.         |
| `required`          | `required`             |           | `boolean`                                        | Determines whether the component is required or not.<br />If `true`, the component will require a value when submitted. |
| `selectedItem`      |                        |           | `TItem \| null`                                  | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectionChanged`  |                        | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `showFilter`        | `show-filter`          |           | `boolean`                                        | Gets or sets the `showFilter` property.<br />The default value is `false`, which means the filter input is not shown. |
| `textAlign`         | `textAlign`            |           | `TextAlignment`                                  | Determines the text alignment of the component.  |
| `themeName`         |                        |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`                |           | `string \| null`                                 | Gets or sets the `value` property.               |
| `variant`           | `variant`              |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `close`                | `(): void`                                       | Closes the drop down.                            |
| `deselect`             | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `resetSelection`       | `(): void`                                       | Resets the current selection.                    |
| `select`               | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`          | `(): void`                                       | Select the first item.                           |
| `selectLast`           | `(): void`                                       | Select the last item.                            |
| `selectNext`           | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious`       | `(): void`                                       | Select the previous item before current selected item/index. |
| `toggle`               | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Fired when any property changes                  |
| `cleared`          | `ClearedEvent`          | Fired when the value is cleared.                 |
| `connected`        | `ConnectedEvent`        | Fired when the element is connected to the DOM   |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `itemsChanged`     | `ItemsChangedEvent`     | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged` | `SelectionChangedEvent` | Fired when the selection has changed.            |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default slot for select items and groups.        |
| `filter` | Custom filter input for the dropdown.            |
| `prefix` | Content placed before the input value.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input value.            |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `caret`      | The dropdown arrow indicator.                    |
| `empty`      | The empty state when no items are available.     |
| `filter`     | The filter input container.                      |
| `input`      | The input field that displays the selected value. |
| `popup`      | The floating dropdown container.                 |
| `portal`     | The portal container for the dropdown.           |
| `projection` | The dropdown content projection area.            |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--select-background-color`          | Color  | The background color.                            |
| `--select-border-color`              | Color  | The border color.                                |
| `--select-border-radius`             | String | The border radius.                               |
| `--select-border-style`              | String | The border style.                                |
| `--select-border-width`              | String | The border width.                                |
| `--select-focus-ring-active-width`   | String | The focus ring active width CSS custom property. |
| `--select-focus-ring-color`          | String | The focus ring color CSS custom property.        |
| `--select-focus-ring-inward-offset`  | String | The focus ring inward offset CSS custom property. |
| `--select-focus-ring-outward-offset` | String | The focus ring outward offset CSS custom property. |
| `--select-font-family`               | String | The font family.                                 |
| `--select-font-letter-spacing`       | String | The font letter spacing CSS custom property.     |
| `--select-font-line-height`          | String | The font line height CSS custom property.        |
| `--select-font-size`                 | String | The font size.                                   |
| `--select-font-text-decoration`      | String | The font text decoration CSS custom property.    |
| `--select-font-text-transform`       | String | The font text transform CSS custom property.     |
| `--select-font-weight`               | String | The font weight.                                 |
| `--select-foreground-color`          | Color  | The foreground color.                            |
| `--select-gap`                       | String | The gap between elements.                        |
| `--select-padding-bottom`            | String | The padding bottom.                              |
| `--select-padding-left`              | String | The padding left.                                |
| `--select-padding-right`             | String | The padding right.                               |
| `--select-padding-top`               | String | The padding top.                                 |
| `--select-shadow`                    | String | The shadow.                                      |
| `--select-shadow-blur`               | String | The shadow blur CSS custom property.             |
| `--select-shadow-color`              | String | The shadow color CSS custom property.            |
| `--select-shadow-offset-x`           | String | The shadow offset x CSS custom property.         |
| `--select-shadow-offset-y`           | String | The shadow offset y CSS custom property.         |
| `--select-shadow-spread`             | String | The shadow spread CSS custom property.           |
| `--select-transition-duration`       | String | The transition duration.                         |
| `--select-transition-mode`           | String | The transition mode CSS custom property.         |
| `--select-transition-property`       | String | The transition property CSS custom property.     |
| `--select-translate`                 | String | The translate CSS custom property.               |

# mosaik-selector-item

Selector Item - An abstract foundation for individual selectable items within selector components.

**Mixins:** Valueable

## Examples

Extending for a dropdown option:

```typescript
class OptionElement extends SelectorItemElement<DropdownElement> {
  protected get parent(): DropdownElement {
    return this.closest('mosaik-dropdown') as DropdownElement;
  }
}
```

Using selection state:

```typescript
const item = document.querySelector('my-item');
item.select();           // Programmatically select
item.deselect();         // Programmatically deselect
console.log(item.isSelected);  // Check selection state
console.log(item.index);       // Get position in parent
console.log(item.value);       // Get item value
```

Listening to selection events:

```typescript
const item = document.querySelector('my-item');
item.addEventListener('selected', () => {
  console.log('Item selected:', item.displayText);
});
item.addEventListener('deselected', () => {
  console.log('Item deselected:', item.displayText);
});
```

Declarative usage in HTML:

```html
<mosaik-selector>
  <mosaik-item value="small" is-selected>Small</mosaik-item>
  <mosaik-item value="medium">Medium</mosaik-item>
  <mosaik-item value="large">Large</mosaik-item>
</mosaik-selector>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |              | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `index`        |              | readonly  | `number`                                     | Gets the index of the item.                      |
| `isSelected`   | `isSelected` |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     |              | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `value`        | `value`      |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-sheet-content

SheetContent - The main content area inside a bottom sheet.

**Mixins:** Themeable, TextFormattable, Slottable

## Example

Sheet content with slotted children:

```html
<mosaik-sheet-content slot="content">
  <p>Sheet body content here.</p>
</mosaik-sheet-content>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for content children.               |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description           |
|---------------|-----------------------|
| `contentText` | The contentText part. |
| `scroll`      | The scroll part.      |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--sheet-content-font-family`          | String | The content font family CSS custom property.     |
| `--sheet-content-font-letter-spacing`  | String | The content font letter spacing CSS custom property. |
| `--sheet-content-font-line-height`     | String | The content font line height CSS custom property. |
| `--sheet-content-font-size`            | String | The content font size CSS custom property.       |
| `--sheet-content-font-text-decoration` | String | The content font text decoration CSS custom property. |
| `--sheet-content-font-text-transform`  | String | The content font text transform CSS custom property. |
| `--sheet-content-font-weight`          | String | The content font weight CSS custom property.     |
| `--sheet-content-gap`                  | String | The content gap CSS custom property.             |
| `--sheet-content-padding-bottom`       | String | The content padding bottom CSS custom property.  |
| `--sheet-content-padding-left`         | String | The content padding left CSS custom property.    |
| `--sheet-content-padding-right`        | String | The content padding right CSS custom property.   |
| `--sheet-content-padding-top`          | String | The content padding top CSS custom property.     |
| `--sheet-content-shadow`               | String | The content shadow CSS custom property.          |
| `--sheet-content-shadow-blur`          | String | The content shadow blur CSS custom property.     |
| `--sheet-content-shadow-color`         | String | The content shadow color CSS custom property.    |
| `--sheet-content-shadow-offset-x`      | String | The content shadow offset x CSS custom property. |
| `--sheet-content-shadow-offset-y`      | String | The content shadow offset y CSS custom property. |
| `--sheet-content-shadow-spread`        | String | The content shadow spread CSS custom property.   |
| `--sheet-content-transition-duration`  | String | The content transition duration CSS custom property. |
| `--sheet-content-transition-mode`      | String | The content transition mode CSS custom property. |
| `--sheet-content-transition-property`  | String | The content transition property CSS custom property. |
| `--sheet-content-translate`            | String | The content translate CSS custom property.       |

# mosaik-sheet-footer

SheetFooter - The footer section within a bottom sheet.

**Mixins:** Themeable, Slottable

## Example

Sheet footer with action button:

```html
<mosaik-sheet-footer slot="footer">
  <mosaik-button variant="primary"><span slot="label">Done</span></mosaik-button>
</mosaik-sheet-footer>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default content slot.                        |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--sheet-footer-font-family`          | String | The footer font family CSS custom property.      |
| `--sheet-footer-font-letter-spacing`  | String | The footer font letter spacing CSS custom property. |
| `--sheet-footer-font-line-height`     | String | The footer font line height CSS custom property. |
| `--sheet-footer-font-size`            | String | The footer font size CSS custom property.        |
| `--sheet-footer-font-text-decoration` | String | The footer font text decoration CSS custom property. |
| `--sheet-footer-font-text-transform`  | String | The footer font text transform CSS custom property. |
| `--sheet-footer-font-weight`          | String | The footer font weight CSS custom property.      |
| `--sheet-footer-gap`                  | String | The footer gap CSS custom property.              |
| `--sheet-footer-padding-bottom`       | String | The footer padding bottom CSS custom property.   |
| `--sheet-footer-padding-left`         | String | The footer padding left CSS custom property.     |
| `--sheet-footer-padding-right`        | String | The footer padding right CSS custom property.    |
| `--sheet-footer-padding-top`          | String | The footer padding top CSS custom property.      |
| `--sheet-footer-shadow`               | String | The footer shadow CSS custom property.           |
| `--sheet-footer-shadow-blur`          | String | The footer shadow blur CSS custom property.      |
| `--sheet-footer-shadow-color`         | String | The footer shadow color CSS custom property.     |
| `--sheet-footer-shadow-offset-x`      | String | The footer shadow offset x CSS custom property.  |
| `--sheet-footer-shadow-offset-y`      | String | The footer shadow offset y CSS custom property.  |
| `--sheet-footer-shadow-spread`        | String | The footer shadow spread CSS custom property.    |
| `--sheet-footer-transition-duration`  | String | The footer transition duration CSS custom property. |
| `--sheet-footer-transition-mode`      | String | The footer transition mode CSS custom property.  |
| `--sheet-footer-transition-property`  | String | The footer transition property CSS custom property. |
| `--sheet-footer-translate`            | String | The footer translate CSS custom property.        |

# mosaik-sheet-header-sub-text

SheetHeaderSubText - The sub-heading within a sheet header.

**Mixins:** Themeable, TextFormattable

## Example

Sub-text inside a sheet header:

```html
<mosaik-sheet-header slot="header">
  <mosaik-sheet-header-sub-text id="sheetSubTitle" slot="subHeader"></mosaik-sheet-header-sub-text>
</mosaik-sheet-header>
<script>
  document.getElementById('sheetSubTitle').text = 'Optional subtitle';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                       | Type   | Description                                      |
|------------------------------------------------|--------|--------------------------------------------------|
| `--sheet-header-sub-text-background-color`     | String | The header sub text background color CSS custom property. |
| `--sheet-header-sub-text-border-color`         | String | The header sub text border color CSS custom property. |
| `--sheet-header-sub-text-font-family`          | String | The header sub text font family CSS custom property. |
| `--sheet-header-sub-text-font-letter-spacing`  | String | The header sub text font letter spacing CSS custom property. |
| `--sheet-header-sub-text-font-line-height`     | String | The header sub text font line height CSS custom property. |
| `--sheet-header-sub-text-font-size`            | String | The header sub text font size CSS custom property. |
| `--sheet-header-sub-text-font-text-decoration` | String | The header sub text font text decoration CSS custom property. |
| `--sheet-header-sub-text-font-text-transform`  | String | The header sub text font text transform CSS custom property. |
| `--sheet-header-sub-text-font-weight`          | String | The header sub text font weight CSS custom property. |
| `--sheet-header-sub-text-foreground-color`     | String | The header sub text foreground color CSS custom property. |
| `--sheet-header-sub-text-gap`                  | String | The header sub text gap CSS custom property.     |
| `--sheet-header-sub-text-padding-bottom`       | String | The header sub text padding bottom CSS custom property. |
| `--sheet-header-sub-text-padding-left`         | String | The header sub text padding left CSS custom property. |
| `--sheet-header-sub-text-padding-right`        | String | The header sub text padding right CSS custom property. |
| `--sheet-header-sub-text-padding-top`          | String | The header sub text padding top CSS custom property. |
| `--sheet-header-sub-text-shadow`               | String | The header sub text shadow CSS custom property.  |
| `--sheet-header-sub-text-shadow-blur`          | String | The header sub text shadow blur CSS custom property. |
| `--sheet-header-sub-text-shadow-color`         | String | The header sub text shadow color CSS custom property. |
| `--sheet-header-sub-text-shadow-offset-x`      | String | The header sub text shadow offset x CSS custom property. |
| `--sheet-header-sub-text-shadow-offset-y`      | String | The header sub text shadow offset y CSS custom property. |
| `--sheet-header-sub-text-shadow-spread`        | String | The header sub text shadow spread CSS custom property. |
| `--sheet-header-sub-text-transition-duration`  | String | The header sub text transition duration CSS custom property. |
| `--sheet-header-sub-text-transition-mode`      | String | The header sub text transition mode CSS custom property. |
| `--sheet-header-sub-text-transition-property`  | String | The header sub text transition property CSS custom property. |
| `--sheet-header-sub-text-translate`            | String | The header sub text translate CSS custom property. |

# mosaik-sheet-header-text

SheetHeaderText - The main heading within a sheet header.

**Mixins:** Themeable, TextFormattable

## Example

Title inside a sheet header:

```html
<mosaik-sheet-header slot="header">
  <mosaik-sheet-header-text id="sheetTitle" slot="header"></mosaik-sheet-header-text>
</mosaik-sheet-header>
<script>
  document.getElementById('sheetTitle').text = 'Options';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--sheet-header-text-background-color`     | String | The header text background color CSS custom property. |
| `--sheet-header-text-border-color`         | String | The header text border color CSS custom property. |
| `--sheet-header-text-font-family`          | String | The header text font family CSS custom property. |
| `--sheet-header-text-font-letter-spacing`  | String | The header text font letter spacing CSS custom property. |
| `--sheet-header-text-font-line-height`     | String | The header text font line height CSS custom property. |
| `--sheet-header-text-font-size`            | String | The header text font size CSS custom property.   |
| `--sheet-header-text-font-text-decoration` | String | The header text font text decoration CSS custom property. |
| `--sheet-header-text-font-text-transform`  | String | The header text font text transform CSS custom property. |
| `--sheet-header-text-font-weight`          | String | The header text font weight CSS custom property. |
| `--sheet-header-text-foreground-color`     | String | The header text foreground color CSS custom property. |
| `--sheet-header-text-gap`                  | String | The header text gap CSS custom property.         |
| `--sheet-header-text-padding-bottom`       | String | The header text padding bottom CSS custom property. |
| `--sheet-header-text-padding-left`         | String | The header text padding left CSS custom property. |
| `--sheet-header-text-padding-right`        | String | The header text padding right CSS custom property. |
| `--sheet-header-text-padding-top`          | String | The header text padding top CSS custom property. |
| `--sheet-header-text-shadow`               | String | The header text shadow CSS custom property.      |
| `--sheet-header-text-shadow-blur`          | String | The header text shadow blur CSS custom property. |
| `--sheet-header-text-shadow-color`         | String | The header text shadow color CSS custom property. |
| `--sheet-header-text-shadow-offset-x`      | String | The header text shadow offset x CSS custom property. |
| `--sheet-header-text-shadow-offset-y`      | String | The header text shadow offset y CSS custom property. |
| `--sheet-header-text-shadow-spread`        | String | The header text shadow spread CSS custom property. |
| `--sheet-header-text-transition-duration`  | String | The header text transition duration CSS custom property. |
| `--sheet-header-text-transition-mode`      | String | The header text transition mode CSS custom property. |
| `--sheet-header-text-transition-property`  | String | The header text transition property CSS custom property. |
| `--sheet-header-text-translate`            | String | The header text translate CSS custom property.   |

# mosaik-sheet-header

SheetHeader - The header section within a bottom sheet.

**Mixins:** Themeable, TextFormattable, Slottable

## Example

Sheet header with slotted title:

```html
<mosaik-sheet-header slot="header">
  <mosaik-sheet-header-text slot="header"></mosaik-sheet-header-text>
</mosaik-sheet-header>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subText`      |           |           | `string`                                     | Gets or sets the `subText` property.             |
| `text`         |           |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate`      | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `header`    | The header slot.                                 |
| `prefix`    | The prefix slot.                                 |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `subHeader` | The subHeader slot.                              |
| `suffix`    | The suffix slot.                                 |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `heading` | The heading part. |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--sheet-header-font-family`          | String | The header font family CSS custom property.      |
| `--sheet-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--sheet-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--sheet-header-font-size`            | String | The header font size CSS custom property.        |
| `--sheet-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--sheet-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--sheet-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--sheet-header-gap`                  | String | The header gap CSS custom property.              |
| `--sheet-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--sheet-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--sheet-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--sheet-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--sheet-header-shadow`               | String | The header shadow CSS custom property.           |
| `--sheet-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--sheet-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--sheet-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--sheet-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--sheet-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--sheet-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--sheet-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--sheet-header-transition-property`  | String | The header transition property CSS custom property. |
| `--sheet-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-sheet

Sheet - A bottom-sheet overlay element that slides up from the bottom of the viewport.

**Mixins:** Themeable, Slottable, Openable, Closeable

## Examples

Basic bottom sheet:

```html
<mosaik-sheet></mosaik-sheet>
```

Bottom sheet with custom height:

```html
<mosaik-sheet height="50vh"></mosaik-sheet>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                 |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    | Gets or sets the `hasBackdrop` property.         |
| `height`              | `height`              |           | `CssLength`                                  | Gets or sets the `height` property.              |
| `isOpen`              | `isOpen`              |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    | Gets or sets the `pressEscapeToClose` property.  |
| `themeName`           |                       |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `close`                | `(): Promise<boolean>`                           | Closes the `SheetElement`.                       |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onBackdrop`           | `(): void`                                       | Handles the backdrop click event.<br />Only closes the sheet if `clickOutsideToClose` is enabled. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the `SheetElement`.                        |
| `partial`              | `(): void`                                       | Sets the sheet to a partial (peek) state, showing only the heading area. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`               | `(): Promise<void>`                              | Toggles between open and partial states.         |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the overlay completes its close transition (isOpen becomes false) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the overlay completes its open transition (isOpen becomes true) |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `content` | The content slot for `SheetContentElement`.      |
| `footer`  | The footer slot for `SheetFooterElement`.        |
| `header`  | The header slot for `SheetHeaderElement`.        |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description        |
|------------|--------------------|
| `backdrop` | The backdrop part. |
| `heading`  | The heading part.  |
| `root`     | The root part.     |
| `thumb`    | The thumb part.    |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--sheet-background-color`     | String | The background color CSS custom property.     |
| `--sheet-border-color`         | String | The border color CSS custom property.         |
| `--sheet-border-width`         | String | The border width CSS custom property.         |
| `--sheet-font-family`          | String | The font family CSS custom property.          |
| `--sheet-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--sheet-font-line-height`     | String | The font line height CSS custom property.     |
| `--sheet-font-size`            | String | The font size CSS custom property.            |
| `--sheet-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--sheet-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--sheet-font-weight`          | String | The font weight CSS custom property.          |
| `--sheet-foreground-color`     | String | The foreground color CSS custom property.     |
| `--sheet-gap`                  | String | The gap CSS custom property.                  |
| `--sheet-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--sheet-padding-left`         | String | The padding left CSS custom property.         |
| `--sheet-padding-right`        | String | The padding right CSS custom property.        |
| `--sheet-padding-top`          | String | The padding top CSS custom property.          |
| `--sheet-shadow`               | String | The shadow CSS custom property.               |
| `--sheet-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--sheet-shadow-color`         | String | The shadow color CSS custom property.         |
| `--sheet-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--sheet-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--sheet-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--sheet-transition-duration`  | String | The transition duration CSS custom property.  |
| `--sheet-transition-mode`      | String | The transition mode CSS custom property.      |
| `--sheet-transition-property`  | String | The transition property CSS custom property.  |
| `--sheet-translate`            | String | The translate CSS custom property.            |
| `--sheet-translate-y`          | String | The translate y CSS custom property.          |

# SignaturePadElement - Digital signature capture

## Description
The SignaturePad component provides a canvas-based interface for capturing digital signatures with touch and mouse support. Features include smooth drawing, undo/redo functionality, clear signature option, export to image formats, line width/color customization, and responsive canvas sizing.

## Element
- **Tag**: `mosaik-signaturepad`
- **Category**: Inputs

## Slots
None - renders a canvas element

## CSS Parts
- `container` - The main container
- `canvas` - The signature canvas
- `controls` - Control buttons container
- `clear` - Clear button
- `undo` - Undo button

## Examples

### Basic signature pad
```html
<mosaik-signaturepad label="Sign here"></mosaik-signaturepad>
```

### With custom dimensions
```html
<mosaik-signaturepad 
    width="600" 
    height="200">
</mosaik-signaturepad>
```

### Export signature
```html
<mosaik-signaturepad id="signature"></mosaik-signaturepad>
<mosaik-button id="save" label="Save Signature"></mosaik-button>

<script>
    document.getElementById('save').addEventListener('click', () => {
        const pad = document.getElementById('signature');
        const dataUrl = pad.toDataURL();
        // Send dataUrl to server or display
    });
</script>
```

### Custom pen color and width
```html
<mosaik-signaturepad 
    pen-color="#0000ff" 
    pen-width="3">
</mosaik-signaturepad>
```

# mosaik-signaturepad

Signature Pad - A user interface component for capturing and displaying digital signatures.

**Mixins:** Themeable, Clearable, Valueable, Disableable, Focusable, Variantable, Invalidable, Labelable, Appearanceable

## Example

```html
<mosaik-signaturepad width="400" height="200"></mosaik-signaturepad>
```

## Properties

| Property                 | Attribute              | Modifiers | Type                                         | Description                                      |
|--------------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`             | `appearance`           |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `backgroundColor`        | `backgroundColor`      |           | `CssColor`                                   | Gets or sets the `backgroundColor` property.     |
| `changed`                |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`                |                        |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`              |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                    | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`               | `disabled`             |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`           |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dotSize`                | `dotSize`              |           | `number`                                     | Gets or sets the `dotSize` property.             |
| `height`                 | `height`               |           | `number`                                     | Gets or sets the `height` property.              |
| `invalid`                | `invalid`              |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`            | `is-clearable`         |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isEmpty`                |                        | readonly  | `boolean`                                    | Returns true if canvas is empty, otherwise returns false. |
| `isFocused`              | `is-focused`           |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`                  |                        |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                   | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxWidth`               | `maxWidth`             |           | `number`                                     | Gets or sets the `maxWidth` property.            |
| `minDistance`            | `minDistance`          |           | `number`                                     | Gets or sets the `minDistance` property.         |
| `minWidth`               | `minWidth`             |           | `number`                                     | Gets or sets the `minWidth` property.            |
| `penColor`               | `penColor`             |           | `CssColor`                                   | Gets or sets the `penColor` property.            |
| `placeholder`            | `placeholder`          |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `required`               | `required`             |           | `boolean`                                    | Gets or sets the `required` property.            |
| `signEnded`              |                        | readonly  | `IEventEmitter<ISignEndedEventDetail>`       | Called when the signing ends.<br />Provides reference to `ISignEndedEventDetail` as event detail. |
| `signStarted`            |                        | readonly  | `IEventEmitter<ISignStartedEventDetail>`     | Called when the signing starts.<br />Provides reference to `ISignStartedEventDetail` as event detail. |
| `signStrokeAfterUpdate`  |                        | readonly  | `IEventEmitter<ISignStrokeEventDetail>`      | Called after the signing stroke is updated.<br />Provides reference to `ISignStrokeEventDetail` as event detail. |
| `signStrokeBeforeUpdate` |                        | readonly  | `IEventEmitter<ISignStrokeEventDetail>`      | Called before the signing stroke is updated.<br />Provides reference to `ISignStrokeEventDetail` as event detail. |
| `themeName`              |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `throttle`               | `throttle`             |           | `number`                                     | Gets or sets the `throttle` property.            |
| `value`                  | `value`                |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                | `variant`              |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `velocityFilterWeight`   | `velocityFilterWeight` |           | `number`                                     | Gets or sets the `velocityFilterWeight` property. |
| `width`                  | `width`                |           | `number`                                     | Gets or sets the `width` property.               |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `fromData`              | `(points: PointGroup[]): void`                   | Draws signature image from an array of point groups. |
| `fromDataURL`           | `(dataURL: string, options?: { ratio?: number \| undefined; width?: number \| undefined; height?: number \| undefined; xOffset?: number \| undefined; yOffset?: number \| undefined; } \| undefined): Promise<...>` | Draws signature image from data URL.             |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `toBlob`                | `(): Blob`                                       | Returns signature image as data URL trimmed from white space. |
| `toData`                | `(): PointGroup[]`                               | Returns signature image as an array of point groups. |
| `toDataURL`             | `(imageType?: string \| undefined, quality?: number \| undefined): string` | Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters). |

## Events

| Event                    | Type                          | Description                                      |
|--------------------------|-------------------------------|--------------------------------------------------|
| `changed`                | `PropertyChangedEvent`        | Emitted when any attribute changes before update |
| `cleared`                | `ClearedEvent`                | Fired when the value is cleared.                 |
| `connected`              | `ConnectedEvent`              | Emitted when the element is connected to the DOM |
| `disconnected`           | `DisconnectedEvent`           | Emitted when the element is disconnected from the DOM |
| `signEnded`              | `SignEndedEvent`              | Fired when the user ends signing.                |
| `signStarted`            | `SignStartedEvent`            | Fired when the user starts signing.              |
| `signStrokeAfterUpdate`  | `SignStrokeAfterUpdateEvent`  | Fired when the user ends signing.                |
| `signStrokeBeforeUpdate` | `SignStrokeBeforeUpdateEvent` | Fired when the user starts signing.              |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description           |
|---------------|-----------------------|
| `canvas`      | The canvas part.      |
| `clear`       | The clear part.       |
| `focusRing`   | The focusRing part.   |
| `placeholder` | The placeholder part. |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--signature-pad-background-color`     | String | The pad background color CSS custom property.    |
| `--signature-pad-border-color`         | String | The pad border color CSS custom property.        |
| `--signature-pad-border-radius`        | String | The pad border radius CSS custom property.       |
| `--signature-pad-border-style`         | String | The pad border style CSS custom property.        |
| `--signature-pad-border-width`         | String | The pad border width CSS custom property.        |
| `--signature-pad-font-family`          | String | The pad font family CSS custom property.         |
| `--signature-pad-font-letter-spacing`  | String | The pad font letter spacing CSS custom property. |
| `--signature-pad-font-line-height`     | String | The pad font line height CSS custom property.    |
| `--signature-pad-font-size`            | String | The pad font size CSS custom property.           |
| `--signature-pad-font-text-decoration` | String | The pad font text decoration CSS custom property. |
| `--signature-pad-font-text-transform`  | String | The pad font text transform CSS custom property. |
| `--signature-pad-font-weight`          | String | The pad font weight CSS custom property.         |
| `--signature-pad-foreground-color`     | String | The pad foreground color CSS custom property.    |
| `--signature-pad-gap`                  | String | The pad gap CSS custom property.                 |
| `--signature-pad-padding-bottom`       | String | The pad padding bottom CSS custom property.      |
| `--signature-pad-padding-left`         | String | The pad padding left CSS custom property.        |
| `--signature-pad-padding-right`        | String | The pad padding right CSS custom property.       |
| `--signature-pad-padding-top`          | String | The pad padding top CSS custom property.         |
| `--signature-pad-shadow`               | String | The pad shadow CSS custom property.              |
| `--signature-pad-shadow-blur`          | String | The pad shadow blur CSS custom property.         |
| `--signature-pad-shadow-color`         | String | The pad shadow color CSS custom property.        |
| `--signature-pad-shadow-offset-x`      | String | The pad shadow offset x CSS custom property.     |
| `--signature-pad-shadow-offset-y`      | String | The pad shadow offset y CSS custom property.     |
| `--signature-pad-shadow-spread`        | String | The pad shadow spread CSS custom property.       |
| `--signature-pad-transition-duration`  | String | The pad transition duration CSS custom property. |
| `--signature-pad-transition-mode`      | String | The pad transition mode CSS custom property.     |
| `--signature-pad-transition-property`  | String | The pad transition property CSS custom property. |
| `--signature-pad-translate`            | String | The pad translate CSS custom property.           |

# mosaik-skeleton

Skeleton - A placeholder element that mimics content structure during loading states.

**Mixins:** Themeable, Dimensionable

## Examples

Text line skeleton placeholder:

```html
<mosaik-skeleton shape="text" width="200px" height="16px"></mosaik-skeleton>
```

Avatar skeleton with shimmer animation:

```html
<mosaik-skeleton shape="circle" width="48px" height="48px" shimmer></mosaik-skeleton>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `height`       | `height`  |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `shape`        | `shape`   |           | `SkeletonShape`                              | Gets or sets the `shape` property.               |
| `shimmer`      | `shimmer` |           | `boolean`                                    | Gets or sets the `shimmer` property.             |
| `target`       |           |           | `Target \| undefined`                        |                                                  |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`        | `width`   |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                                    |
|-----------|------------------------------------------------|
| `shimmer` | The animated shimmer highlight overlay element |

## CSS Custom Properties

| Property                          | Type   | Description                                      |
|-----------------------------------|--------|--------------------------------------------------|
| `--skeleton-background-color`     | String | The base background color of the skeleton placeholder |
| `--skeleton-border-color`         | String | The border color of the skeleton placeholder     |
| `--skeleton-border-radius`        | String | The border radius for rounded skeleton shapes    |
| `--skeleton-border-style`         | String | The border style for the skeleton placeholder    |
| `--skeleton-border-width`         | String | The border width for the skeleton placeholder    |
| `--skeleton-font-family`          | String | The font family CSS custom property.             |
| `--skeleton-font-letter-spacing`  | String | The font letter spacing CSS custom property.     |
| `--skeleton-font-line-height`     | String | The font line height CSS custom property.        |
| `--skeleton-font-size`            | String | The font size CSS custom property.               |
| `--skeleton-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--skeleton-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--skeleton-font-weight`          | String | The font weight CSS custom property.             |
| `--skeleton-foreground-color`     | String | The foreground color (typically unused but available) |
| `--skeleton-gap`                  | String | The gap CSS custom property.                     |
| `--skeleton-padding-bottom`       | String | The padding bottom CSS custom property.          |
| `--skeleton-padding-left`         | String | The padding left CSS custom property.            |
| `--skeleton-padding-right`        | String | The padding right CSS custom property.           |
| `--skeleton-padding-top`          | String | The padding top CSS custom property.             |
| `--skeleton-shadow`               | String | The shadow CSS custom property.                  |
| `--skeleton-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--skeleton-shadow-color`         | String | The shadow color CSS custom property.            |
| `--skeleton-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--skeleton-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--skeleton-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--skeleton-transition-duration`  | String | The transition duration CSS custom property.     |
| `--skeleton-transition-mode`      | String | The transition mode CSS custom property.         |
| `--skeleton-transition-property`  | String | The transition property CSS custom property.     |
| `--skeleton-translate`            | String | The translate CSS custom property.               |

# mosaik-slider

Slider - An interactive range input for selecting numeric values by dragging a handle along a track.

**Mixins:** Themeable, Orientable, Disableable, Variantable, Appearanceable, Focusable, Invalidable, Valueable, Rangeable

## Examples

Basic horizontal slider:

```html
<mosaik-slider min="0" max="100" value="50"></mosaik-slider>
```

Volume slider with icons:

```html
<mosaik-slider min="0" max="100" value="75">
  <mosaik-icon slot="prefix" data="volume-off"></mosaik-icon>
  <mosaik-icon slot="suffix" data="volume-up"></mosaik-icon>
</mosaik-slider>
```

Slider with tick marks and tooltip:

```html
<mosaik-slider
  min="0"
  max="10"
  value="5"
  step="1"
  ticks="1"
  tick-placement="both"
  tooltip-placement="top"
  show-tick-labels>
</mosaik-slider>
```

Vertical brightness slider:

```html
<mosaik-slider
  min="0"
  max="255"
  value="128"
  orientation="vertical"
  variant="primary"
  tooltip-placement="right">
</mosaik-slider>
```

Price range filter with custom labels:

```html
<div class="price-filter">
  <label>Price Range</label>
  <mosaik-slider
    min="0"
    max="1000"
    value="250"
    step="10"
    tooltip-placement="top">
    <span slot="prefix">$0</span>
    <span slot="suffix">$1000</span>
  </mosaik-slider>
</div>
```

Temperature control with custom tooltip:

```html
<mosaik-slider
  id="tempSlider"
  min="16"
  max="30"
  value="22"
  step="0.5"
  ticks="1"
  tick-placement="after"
  tooltip-placement="top">
</mosaik-slider>
<script>
  document.getElementById('tempSlider').tooltipAccessor = (v) => `${v}°C`;
</script>
```

## Properties

| Property            | Attribute          | Modifiers | Type                                         | Default | Description                                      |
|---------------------|--------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `appearance`        | `appearance`       |           | `Appearance`                                 |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`           |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |                    | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`              |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`         |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                    | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`           | `invalid`          |           | `boolean`                                    |         | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isFocused`         | `is-focused`       |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`              | `lang`             |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `max`               | `max`              |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`              |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `orientation`       | `orientation`      |           | `Orientation`                                |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `rangeValueChanged` |                    | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `showTickLabels`    | `showTickLabels`   |           | `boolean`                                    |         | Gets or sets the `showTickLabels` property.      |
| `step`              | `step`             |           | `number`                                     |         | Gets or sets the `step` property.                |
| `themeName`         |                    |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tickLabelAccessor` |                    |           | `(value: number) => string`                  |         | Gets or sets the `tickLabelAccessor` property.   |
| `tickPlacement`     | `tickPlacement`    |           | `TickPlacement`                              |         | Gets or sets the `tickPlacement` property.       |
| `ticks`             | `ticks`            |           | `number`                                     |         | Gets or sets the `ticks` property.               |
| `tooltipAccessor`   |                    |           | `(value: number) => string`                  |         | Gets or sets the `tooltipAccessor` property.     |
| `tooltipPlacement`  | `tooltipPlacement` |           | `AutoToolTipPlacement`                       |         | Gets or sets the `tooltipPlacement` property.    |
| `track`             | `track`            |           | `boolean`                                    |         | Gets or sets the `track` property.               |
| `value`             | `value`            |           | `TType`                                      |         | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`           | `variant`          |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `stepDown`              | `(value?: number \| undefined): void`            | Decrements the value by the value given by the `Step` property.<br />If the optional parameter is used, it will decrement the step value multiplied by the parameter's value.<br /><br />**value**: Value to decrement the value by. |
| `stepUp`                | `(value?: number \| undefined): void`            | Increments the value by the value given by the `Step` property.<br />If the optional parameter is used, will increment the step value by that value.<br /><br />**value**: Value to increment the value by. |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the slider value changes              |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content displayed before the slider track (e.g., minimum value label or icon) |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content displayed after the slider track (e.g., maximum value label or icon) |

## CSS Shadow Parts

| Part      | Description                                      |
|-----------|--------------------------------------------------|
| `input`   | Native HTML range input element for slider functionality |
| `root`    | Root container for the slider component          |
| `text`    | Text content within the tooltip                  |
| `tickBar` | Tick mark container element for value indicators |
| `tooltip` | Value tooltip displayed during slider interaction |

## CSS Custom Properties

| Property                                         | Type   | Description                                      |
|--------------------------------------------------|--------|--------------------------------------------------|
| `--slider-background-color`                      | String | Background color of the slider container         |
| `--slider-border-color`                          | String | Border color for slider elements                 |
| `--slider-border-radius`                         | String | Border radius for rounded slider styling         |
| `--slider-border-style`                          | String | Border style for slider elements                 |
| `--slider-border-width`                          | String | Border width for slider styling                  |
| `--slider-component-name-thumb-background-color` | String | The component name thumb background color CSS custom property. |
| `--slider-font-family`                           | String | Font family for slider text labels               |
| `--slider-font-letter-spacing`                   | String | Letter spacing for slider text                   |
| `--slider-font-line-height`                      | String | Line height for slider text                      |
| `--slider-font-size`                             | String | Font size for slider labels and tooltip          |
| `--slider-font-text-decoration`                  | String | Text decoration style for slider text            |
| `--slider-font-text-transform`                   | String | Text transformation for slider labels            |
| `--slider-font-weight`                           | String | Font weight for slider text                      |
| `--slider-foreground-color`                      | String | Foreground color for text and icons              |
| `--slider-gap`                                   | String | Spacing between slider elements                  |
| `--slider-padding-bottom`                        | String | Bottom padding for slider container              |
| `--slider-padding-left`                          | String | Left padding for slider container                |
| `--slider-padding-right`                         | String | Right padding for slider container               |
| `--slider-padding-top`                           | String | Top padding for slider container                 |
| `--slider-shadow`                                | String | Drop shadow or elevation effect                  |
| `--slider-shadow-blur`                           | String | The shadow blur CSS custom property.             |
| `--slider-shadow-color`                          | String | The shadow color CSS custom property.            |
| `--slider-shadow-offset-x`                       | String | The shadow offset x CSS custom property.         |
| `--slider-shadow-offset-y`                       | String | The shadow offset y CSS custom property.         |
| `--slider-shadow-spread`                         | String | The shadow spread CSS custom property.           |
| `--slider-thumb-background-color`                | String | Background color of the draggable thumb          |
| `--slider-thumb-border-color`                    | String | Border color of the thumb handle                 |
| `--slider-thumb-border-radius`                   | String | Border radius for thumb styling                  |
| `--slider-thumb-border-style`                    | String | Border style for thumb element                   |
| `--slider-thumb-border-width`                    | String | Border width for thumb outline                   |
| `--slider-thumb-foreground-color`                | String | Foreground/fill color of the thumb               |
| `--slider-thumb-size`                            | String | Size dimensions of the draggable thumb handle    |
| `--slider-tick-bar-border-color`                 | String | The tick bar border color CSS custom property.   |
| `--slider-tick-bar-foreground-color`             | String | The tick bar foreground color CSS custom property. |
| `--slider-tick-bar-tick-height`                  | String | The tick bar tick height CSS custom property.    |
| `--slider-tick-bar-tick-text-gap`                | String | The tick bar tick text gap CSS custom property.  |
| `--slider-tick-gap`                              | String | Spacing between tick marks                       |
| `--slider-tooltip-background-color`              | String | Background color of value tooltip                |
| `--slider-tooltip-border-color`                  | String | Border color of tooltip                          |
| `--slider-tooltip-border-radius`                 | String | Border radius for tooltip styling                |
| `--slider-tooltip-border-style`                  | String | Border style for tooltip                         |
| `--slider-tooltip-border-width`                  | String | Border width for tooltip outline                 |
| `--slider-tooltip-font-family`                   | String | Font family for tooltip text                     |
| `--slider-tooltip-font-letter-spacing`           | String | Letter spacing for tooltip text                  |
| `--slider-tooltip-font-line-height`              | String | Line height for tooltip text                     |
| `--slider-tooltip-font-size`                     | String | Font size for tooltip value display              |
| `--slider-tooltip-font-text-decoration`          | String | Text decoration for tooltip                      |
| `--slider-tooltip-font-text-transform`           | String | Text transformation for tooltip                  |
| `--slider-tooltip-font-weight`                   | String | Font weight for tooltip text                     |
| `--slider-tooltip-foreground-color`              | String | Foreground color for tooltip text                |
| `--slider-tooltip-gap`                           | String | Spacing within tooltip elements                  |
| `--slider-tooltip-padding-bottom`                | String | Bottom padding for tooltip content               |
| `--slider-tooltip-padding-left`                  | String | Left padding for tooltip content                 |
| `--slider-tooltip-padding-right`                 | String | Right padding for tooltip content                |
| `--slider-tooltip-padding-top`                   | String | Top padding for tooltip content                  |
| `--slider-tooltip-shadow`                        | String | Drop shadow effect for tooltip                   |
| `--slider-tooltip-transition-duration`           | String | Animation duration for tooltip appearance        |
| `--slider-tooltip-transition-mode`               | String | Animation easing for tooltip transitions         |
| `--slider-tooltip-transition-property`           | String | CSS properties to animate on tooltip             |
| `--slider-track-size`                            | String | Height (horizontal) or width (vertical) of slider track |
| `--slider-transition-duration`                   | String | Animation duration for slider interactions       |
| `--slider-transition-mode`                       | String | Animation easing mode for slider transitions     |
| `--slider-transition-property`                   | String | CSS properties to animate during interactions    |
| `--slider-translate`                             | String | The translate CSS custom property.               |

# mosaik-slider2-thumb

Slider2Thumb - A draggable thumb handle component for use within Slider2 range sliders.

**Mixins:** Themeable, Disableable, Valueable, Focusable, Variantable, Rangeable

## Examples

Basic thumb within Slider2 (min/max range):

```html
<mosaik-slider2 min="0" max="100">
  <mosaik-slider2-thumb slot="thumb" value="25"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="75"></mosaik-slider2-thumb>
</mosaik-slider2>
```

Thumbs with custom step and variant:

```html
<mosaik-slider2 min="0" max="100" step="5" variant="primary">
  <mosaik-slider2-thumb
    slot="thumb"
    value="30"
    variant="primary">
  </mosaik-slider2-thumb>
  <mosaik-slider2-thumb
    slot="thumb"
    value="70"
    variant="primary">
  </mosaik-slider2-thumb>
</mosaik-slider2>
```

Disabled thumb within range slider:

```html
<mosaik-slider2 min="0" max="100">
  <mosaik-slider2-thumb
    slot="thumb"
    value="40"
    disabled>
  </mosaik-slider2-thumb>
  <mosaik-slider2-thumb
    slot="thumb"
    value="60">
  </mosaik-slider2-thumb>
</mosaik-slider2>
```

Multi-thumb configuration with three points:

```html
<mosaik-slider2 min="0" max="100" step="1">
  <mosaik-slider2-thumb slot="thumb" value="20"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="50"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="80"></mosaik-slider2-thumb>
</mosaik-slider2>
```

## Properties

| Property            | Attribute    | Modifiers | Type                                         | Default | Description                                      |
|---------------------|--------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`           |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`        |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`   |           | `boolean`                                    |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |              | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isFocused`         | `is-focused` |           | `boolean`                                    |         | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`              | `lang`       |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `max`               | `max`        |           | `TType`                                      | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`               | `min`        |           | `TType`                                      | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `rangeValueChanged` |              | readonly  | `IEventEmitter<IChangedEventDetail<number>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `step`              | `step`       |           | `number`                                     |         | Gets or sets the `step` property.                |
| `themeName`         |              |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`      |           | `TType`                                      |         | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`           | `variant`    |           | `Variant`                                    |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when the thumb value changes               |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `focusRing` | Focus indicator ring for keyboard navigation accessibility |
| `input`     | Native HTML range input element providing slider functionality |

## CSS Custom Properties

| Property                              | Type   | Description                                   |
|---------------------------------------|--------|-----------------------------------------------|
| `--slider2thumb-font-family`          | String | The font family CSS custom property.          |
| `--slider2thumb-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--slider2thumb-font-line-height`     | String | The font line height CSS custom property.     |
| `--slider2thumb-font-size`            | String | The font size CSS custom property.            |
| `--slider2thumb-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--slider2thumb-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--slider2thumb-font-weight`          | String | The font weight CSS custom property.          |
| `--slider2thumb-gap`                  | String | The gap CSS custom property.                  |
| `--slider2thumb-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--slider2thumb-padding-left`         | String | The padding left CSS custom property.         |
| `--slider2thumb-padding-right`        | String | The padding right CSS custom property.        |
| `--slider2thumb-padding-top`          | String | The padding top CSS custom property.          |
| `--slider2thumb-shadow`               | String | The shadow CSS custom property.               |
| `--slider2thumb-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--slider2thumb-shadow-color`         | String | The shadow color CSS custom property.         |
| `--slider2thumb-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--slider2thumb-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--slider2thumb-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--slider2thumb-size`                 | String | The size CSS custom property.                 |
| `--slider2thumb-transition-duration`  | String | The transition duration CSS custom property.  |
| `--slider2thumb-transition-mode`      | String | The transition mode CSS custom property.      |
| `--slider2thumb-transition-property`  | String | The transition property CSS custom property.  |
| `--slider2thumb-translate`            | String | The translate CSS custom property.            |

# mosaik-slider2

Slider2 - An advanced multi-thumb range slider for selecting value ranges or multiple points.

**Mixins:** Themeable, Orientable, Disableable, Variantable, Appearanceable, Slottable, Rangeable, Valueable

## Examples

Basic range slider with min/max selection:

```html
<mosaik-slider2 min="0" max="100" show-value-indicator>
  <mosaik-slider2-thumb slot="thumb" value="25"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="75"></mosaik-slider2-thumb>
</mosaik-slider2>
```

Price range filter:

```html
<div class="filter-group">
  <label>Price Range</label>
  <mosaik-slider2
    min="0"
    max="1000"
    step="10"
    gap="50"
    show-value-indicator
    variant="primary">
    <mosaik-slider2-thumb slot="thumb" value="200"></mosaik-slider2-thumb>
    <mosaik-slider2-thumb slot="thumb" value="800"></mosaik-slider2-thumb>
  </mosaik-slider2>
  <div class="range-values">$200 - $800</div>
</div>
```

Time range selector:

```html
<mosaik-slider2
  min="0"
  max="24"
  step="1"
  gap="1"
  show-value-indicator>
  <mosaik-slider2-thumb slot="thumb" value="9"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="17"></mosaik-slider2-thumb>
</mosaik-slider2>
```

Vertical range slider:

```html
<mosaik-slider2
  min="0"
  max="100"
  orientation="vertical"
  thickness="6"
  variant="success">
  <mosaik-slider2-thumb slot="thumb" value="30"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="70"></mosaik-slider2-thumb>
</mosaik-slider2>
```

Multi-point selector with three thumbs:

```html
<mosaik-slider2
  min="0"
  max="100"
  step="5"
  gap="10"
  show-value-indicator
  variant="info">
  <mosaik-slider2-thumb slot="thumb" value="20"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="50"></mosaik-slider2-thumb>
  <mosaik-slider2-thumb slot="thumb" value="80"></mosaik-slider2-thumb>
</mosaik-slider2>
```

## Properties

| Property             | Attribute            | Modifiers | Type                                             | Default | Description                                      |
|----------------------|----------------------|-----------|--------------------------------------------------|---------|--------------------------------------------------|
| `appearance`         | `appearance`         |           | `Appearance`                                     |         | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`            |                      | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`          |                      | readonly  | `IEventEmitter<void>`                            |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`                |           | `FlowDirection`                                  |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`           | `disabled`           |           | `boolean`                                        |         | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`       |                      | readonly  | `IEventEmitter<void>`                            |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `gap`                | `gap`                |           | `number`                                         |         | Gets or sets the `gap` property.                 |
| `lang`               | `lang`               |           | `string`                                         |         | The lang property indicates the language of the element's content. |
| `max`                | `max`                |           | `TType`                                          | 1       | The maximum value of the range.<br />This property is used to define the upper bound of the range.<br />The default value is `undefined`, which means no maximum value is set. |
| `min`                | `min`                |           | `TType`                                          | 0       | The minimum value of the range.<br />This property is used to define the lower bound of the range.<br />The default value is `undefined`, which means no minimum value is set. |
| `orientation`        | `orientation`        |           | `Orientation`                                    |         | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `showValueIndicator` | `showValueIndicator` |           | `boolean`                                        |         | Gets or sets the `showValueIndicator` property.  |
| `step`               | `step`               |           | `number`                                         |         | Gets or sets the `step` property.                |
| `themeName`          |                      |           | `string`                                         |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`          | `thickness`          |           | `number`                                         |         | Gets or sets the `thickness` property.           |
| `value`              | `value`              |           | `number \| number[]`                             |         | The value of the slider.<br />If the             |
| `valueChanged`       |                      | readonly  | `IEventEmitter<IChangedEventDetail<number \| number[]>>` |         | Called when the value is changed.<br />Provides reference to the `IChangedEventDetail` with old and new value as event argument. |
| `variant`            | `variant`            |           | `Variant`                                        |         | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<TElement extends Element = Element>(slotName: string, filter?: ((e: TElement): boolean) \| undefined) => TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<TElement extends Element = Element>(slotName: string, element: Constructor<TElement>): TElement[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br />This method extracts text content recursively, including from Shadow DOMs<br />and Custom Elements with known text properties (like `mosaik-text`).<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onApplyTemplate`      | `(): void`                                       | A method that will be called when the element template is applied.<br />In this method are the element children available. |
| `onSlotChanges`        | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `rangeValueChanged` | `RangeValueChangedEvent` | Fired when any thumb value changes               |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `thumb` | Slot for one or more Slider2Thumb elements representing draggable handles |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `container`    | Main container element for track and thumbs      |
| `labelEnd`     | Label displaying the maximum value (when showValueIndicator is true) |
| `labelStart`   | Label displaying the minimum value (when showValueIndicator is true) |
| `progressArea` | Filled progress area between thumb positions     |
| `root`         | Root container for the slider component          |
| `thumb`        | Individual thumb element part (default thumb if no slot content provided) |
| `trackArea`    | Background track area for the slider             |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--slider2-font-family`          | String | The font family CSS custom property.          |
| `--slider2-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--slider2-font-line-height`     | String | The font line height CSS custom property.     |
| `--slider2-font-size`            | String | The font size CSS custom property.            |
| `--slider2-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--slider2-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--slider2-font-weight`          | String | The font weight CSS custom property.          |
| `--slider2-gap`                  | String | The gap CSS custom property.                  |
| `--slider2-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--slider2-padding-left`         | String | The padding left CSS custom property.         |
| `--slider2-padding-right`        | String | The padding right CSS custom property.        |
| `--slider2-padding-top`          | String | The padding top CSS custom property.          |
| `--slider2-shadow`               | String | The shadow CSS custom property.               |
| `--slider2-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--slider2-shadow-color`         | String | The shadow color CSS custom property.         |
| `--slider2-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--slider2-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--slider2-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--slider2-transition-duration`  | String | The transition duration CSS custom property.  |
| `--slider2-transition-mode`      | String | The transition mode CSS custom property.      |
| `--slider2-transition-property`  | String | The transition property CSS custom property.  |
| `--slider2-translate`            | String | The translate CSS custom property.            |

# mosaik-spacer

Spacer - A flexible spacing element for creating consistent gaps and layout control.

**Mixins:** Themeable

## Examples

Basic spacing between elements:

```html
<div>Content Above</div>
<mosaik-spacer></mosaik-spacer>
<div>Content Below</div>
```

Custom multiplier for proportional spacing:

```html
<mosaik-spacer multiplier="2" thickness="vertical"></mosaik-spacer>
```

## Properties

| Property              | Attribute    | Modifiers | Type                                         | Description                                      |
|-----------------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`           |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invert`              | `invert`     |           | `boolean`                                    | Gets or sets the `invert` property.<br /><br />Inverts the spacing. This is useful for creating negative space.<br />The default is `false`. |
| `lang`                | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `multiplier`          | `multiplier` |           | `number`                                     | Gets or sets the `multiplier` property.<br /><br />The multiplier factor for spacing. Adjusts the space based on a numeric value. |
| `multiplierValidator` |              |           | `(value: number) => boolean`                 | Gets or sets the `multiplierValidator` property.<br /><br />The multiplier validator function.<br />The default is `DEFAULT_SPACER_ELEMENT_PROPS.multiplierValidator`. |
| `size`                | `size`       |           | `Size`                                       | Gets or sets the `density` property.<br /><br />Possible values are `tiny`, `small`, `medium`, `large` or `giant`.<br />The default is `medium`. |
| `themeName`           |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`           | `thickness`  |           | `Spacing \| Spacing[] \| null`               | Gets or sets the `thickness` property.<br /><br />The thickness or sides for which the Spacer applies. Accepts values: `top`, `right`, `bottom`, `left`, `vertical`, `horizontal`, `all` or `none`.<br />The default is `null`. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content slot for spacer element (typically empty) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--spacer-font-family`          | String | The font family CSS custom property.          |
| `--spacer-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--spacer-font-line-height`     | String | The font line height CSS custom property.     |
| `--spacer-font-size`            | String | The font size CSS custom property.            |
| `--spacer-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--spacer-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--spacer-font-weight`          | String | The font weight CSS custom property.          |
| `--spacer-gap`                  | String | The gap CSS custom property.                  |
| `--spacer-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--spacer-padding-left`         | String | The padding left CSS custom property.         |
| `--spacer-padding-right`        | String | The padding right CSS custom property.        |
| `--spacer-padding-top`          | String | The padding top CSS custom property.          |
| `--spacer-shadow`               | String | The shadow CSS custom property.               |
| `--spacer-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--spacer-shadow-color`         | String | The shadow color CSS custom property.         |
| `--spacer-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--spacer-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--spacer-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--spacer-transition-duration`  | String | The transition duration CSS custom property.  |
| `--spacer-transition-mode`      | String | The transition mode CSS custom property.      |
| `--spacer-transition-property`  | String | The transition property CSS custom property.  |
| `--spacer-translate`            | String | The translate CSS custom property.            |

# mosaik-split-button

Split Button - A user interface element that combines a regular button with a dropdown menu.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, DropDownable, Busyable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic split button:

```html
<mosaik-split-button label="Save">
  <mosaik-menu>
    <mosaik-menu-item label="Save as..."></mosaik-menu-item>
    <mosaik-menu-item label="Export"></mosaik-menu-item>
  </mosaik-menu>
</mosaik-split-button>
```

Split button with variant:

```html
<mosaik-split-button label="Submit" variant="primary">
  <mosaik-menu>
    <mosaik-menu-item label="Submit and notify"></mosaik-menu-item>
    <mosaik-menu-item label="Submit as draft"></mosaik-menu-item>
  </mosaik-menu>
</mosaik-split-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`           | `drop-down-distance`           |           | `number`                                     | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`             | `drop-down-height`             |           | `CssLength \| undefined`                     | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight`          | `drop-down-max-height`         |           | `CssLength`                                  | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`           | `drop-down-max-width`          |           | `CssLength \| undefined`                     | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement`          | `drop-down-placement`          |           | `Placement`                                  | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`           | `drop-down-skidding`           |           | `number`                                     | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen`          | `drop-down-stays-open`         |           | `boolean`                                    | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`           | `drop-down-strategy`           |           | `Strategy`                                   | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`              | `drop-down-width`              |           | `CssLength \| undefined`                     | Gets or sets the `dropDownWidth` property.       |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isDropDownOpen`             | `is-drop-down-open`            |           | `boolean`                                    | Gets or sets the `isDropDownOpen` property.      |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`                 | `(): void`                                       | Closes the drop down.                            |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSplit`               | `(e: MouseEvent): void`                          |                                                  |
| `open`                  | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`                | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The default dropdown content slot.               |
| `icon`    | The icon slot.                                   |
| `label`   | The label slot.                                  |
| `overlay` | The overlay slot (useful for badge).             |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part             | Description                                      |
|------------------|--------------------------------------------------|
| `button`         | The button part of the split button.             |
| `buttonSplit`    | The part of the button responsible for splitting the button from the dropdown. |
| `focusRingMain`  | The focusRingMain part.                          |
| `focusRingSplit` | The focusRingSplit part.                         |
| `icon`           | The icon part of the split button.               |
| `iconCaret`      | The caret icon part used for dropdown indication. |
| `innerStack`     | The innerStack part.                             |
| `label`          | The label part of the split button.              |
| `popup`          | The popup part of the split button.              |
| `progressRing`   | The progress ring part of the split button.      |
| `rippleMain`     | The rippleMain part.                             |
| `rippleSplit`    | The rippleSplit part.                            |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--split-button-background-color`          | Color  | The background color of the split button.        |
| `--split-button-border-color`              | Color  | The border color of the split button.            |
| `--split-button-border-radius`             | String | The border radius of the split button.           |
| `--split-button-border-style`              | String | The border style of the split button.            |
| `--split-button-border-width`              | String | The border width of the split button.            |
| `--split-button-focus-ring-active-width`   | String | The button focus ring active width CSS custom property. |
| `--split-button-focus-ring-color`          | String | The button focus ring color CSS custom property. |
| `--split-button-focus-ring-inward-offset`  | String | The button focus ring inward offset CSS custom property. |
| `--split-button-focus-ring-outward-offset` | String | The button focus ring outward offset CSS custom property. |
| `--split-button-font-family`               | String | The font family of the split button.             |
| `--split-button-font-letter-spacing`       | String | The font letter spacing of the split button.     |
| `--split-button-font-line-height`          | String | The font line height of the split button.        |
| `--split-button-font-size`                 | String | The font size of the split button.               |
| `--split-button-font-text-decoration`      | String | The font text decoration of the split button.    |
| `--split-button-font-text-transform`       | String | The font text transform of the split button.     |
| `--split-button-font-weight`               | String | The font weight of the split button.             |
| `--split-button-foreground-color`          | Color  | The foreground color of the split button.        |
| `--split-button-gap`                       | String | The gap between elements of the split button.    |
| `--split-button-height`                    | String | The button height CSS custom property.           |
| `--split-button-icon-min-height`           | String | The button icon min height CSS custom property.  |
| `--split-button-icon-min-width`            | String | The button icon min width CSS custom property.   |
| `--split-button-line-height`               | String | The line height of the split button text.        |
| `--split-button-min-height`                | String | The button min height CSS custom property.       |
| `--split-button-min-width`                 | String | The button min width CSS custom property.        |
| `--split-button-padding-bottom`            | String | The padding bottom of the split button.          |
| `--split-button-padding-left`              | String | The padding left of the split button.            |
| `--split-button-padding-right`             | String | The padding right of the split button.           |
| `--split-button-padding-top`               | String | The padding top of the split button.             |
| `--split-button-progress-ring-width`       | String | The button progress ring width CSS custom property. |
| `--split-button-progress-thickness`        | String | The button progress thickness CSS custom property. |
| `--split-button-ripple-color`              | Color  | The button ripple color CSS custom property.     |
| `--split-button-ripple-duration`           | String | The button ripple duration CSS custom property.  |
| `--split-button-shadow`                    | String | The shadow of the split button.                  |
| `--split-button-shadow-blur`               | String | The button shadow blur CSS custom property.      |
| `--split-button-shadow-color`              | String | The button shadow color CSS custom property.     |
| `--split-button-shadow-offset-x`           | String | The button shadow offset x CSS custom property.  |
| `--split-button-shadow-offset-y`           | String | The button shadow offset y CSS custom property.  |
| `--split-button-shadow-spread`             | String | The button shadow spread CSS custom property.    |
| `--split-button-transition-duration`       | String | The transition duration for the split button.    |
| `--split-button-transition-mode`           | String | The transition mode for the split button.        |
| `--split-button-transition-property`       | String | The transition property for the split button.    |
| `--split-button-translate`                 | String | The button translate CSS custom property.        |
| `--split-button-width`                     | String | The button width CSS custom property.            |

# mosaik-split

Split - A layout component that creates a resizable split pane layout with a draggable divider.

Enables users to dynamically resize two content areas separated by an interactive divider.
Supports both horizontal and vertical orientations, position locking, snapping, and keyboard navigation.
When `collapsible` is enabled, panels can be collapsed by dragging beyond 50% of their minimum size.

**Mixins:** Themeable, Reversible, Orientable, Disableable, Fitable, Slottable

## Example

```html
<!-- Basic split layout -->
<mosaik-split position="30">
  <div slot="start">Left Panel</div>
  <div slot="end">Right Panel</div>
</mosaik-split>

<!-- Vertical split with snapping -->
<mosaik-split orientation="vertical" snaps="25% 50% 75%">
  <div slot="start">Top Panel</div>
  <div slot="end">Bottom Panel</div>
</mosaik-split>

<!-- Locked split with custom thickness -->
<mosaik-split lock="start" thickness="4" position="200px">
  <nav slot="start">Navigation</nav>
  <main slot="end">Content</main>
</mosaik-split>

<!-- Collapsible split with minimum constraint -->
<mosaik-split collapsible min="200px" position="30%">
  <aside slot="start">Collapsible Sidebar</aside>
  <main slot="end">Main Content</main>
</mosaik-split>
```

## Properties

| Property             | Attribute        | Modifiers | Type                                         | Description                                      |
|----------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`            |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `collapsedPanel`     | `collapsedPanel` |           | `SplitCollapsedPanel`                        | Gets or sets the `collapsedPanel` property.<br />Indicates which panel is currently collapsed (has zero size).<br /><br />This property is **automatically derived** from the current `position`:<br />- When position is at or below `0%`, `collapsedPanel` is `'start'`.<br />- When position is at or above `100%`, `collapsedPanel` is `'end'`.<br />- Otherwise, `collapsedPanel` is `'none'`.<br /><br />This auto-detection works regardless of the `collapsible` property, ensuring<br />the value always reflects the visual state the user sees. |
| `collapsible`        | `collapsible`    |           | `boolean`                                    | Gets or sets the `collapsible` property.<br />When enabled, panels can be collapsed by dragging beyond 50% of their minimum size constraint.<br />A collapsed panel can be expanded by dragging back beyond 50% of the minimum size.<br /><br />**Requires a meaningful `min` value** (e.g., `min="200px"`). The collapse threshold is<br />calculated as 50% of `min`. With the default `min="0%"`, the threshold is 0px and the<br />snap-to-collapse behavior has no effect.<br /><br />**Difference to dragging without `collapsible`:**<br />Without `collapsible`, a panel can still reach zero size if `min="0%"`, but there is no<br />threshold snap behavior, no keyboard collapse (Home/End), and the `collapse()`/`expand()`<br />API methods are disabled.<br /><br />**Note:** The `collapsedPanel` property reflects the visual state regardless of this setting.<br />Even without `collapsible`, if a panel reaches zero size, `collapsedPanel` will indicate<br />which panel is collapsed. |
| `connected`          |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`           | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`       |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`                | `fit`            |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `hasPanels`          |                  | readonly  | `boolean`                                    | Gets or sets the `hasPanels` property.           |
| `isCollapsed`        |                  | readonly  | `boolean`                                    | Gets the `isCollapsed` property.<br />Returns true if any panel is currently collapsed. |
| `isEndCollapsed`     |                  | readonly  | `boolean`                                    | Gets the `isEndCollapsed` property.<br />Returns true if the end panel is collapsed. |
| `isStartCollapsed`   |                  | readonly  | `boolean`                                    | Gets the `isStartCollapsed` property.<br />Returns true if the start panel is collapsed. |
| `lang`               | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `lock`               | `lock`           |           | `SplitLock`                                  | Gets or sets the `lock` property.<br />Determines which panel is the fixed reference for positioning and resize behavior.<br /><br />- `'none'` (default): The start panel is the primary reference. `position`, `min`, and `max`<br />  control the start panel's size. On container resize, the position **percentage** is preserved,<br />  meaning both panels resize proportionally.<br /><br />- `'start'`: Identical to `'none'` for layout and interaction, but on container resize<br />  the start panel's **absolute pixel size** is preserved instead of the percentage.<br />  The end panel absorbs all resize changes, keeping the start panel at a fixed width/height.<br /><br />- `'end'`: The end panel becomes the primary reference. The grid layout is inverted so<br />  that `position`, `min`, and `max` now control the **end** panel's size. Drag and keyboard<br />  directions are mirrored accordingly. On container resize, the end panel's **absolute pixel<br />  size** is preserved while the start panel absorbs resize changes. |
| `max`                | `max`            |           | ``${number}%` \| CssNumber`                  | Gets or sets the `max` property.<br />The maximum position constraint for the primary panel.<br />Accepts any valid CSS length value except 'auto' (e.g., '90%', '500px'). |
| `min`                | `min`            |           | ``${number}%` \| CssNumber`                  | Gets or sets the `min` property.<br />The minimum position constraint for the primary panel.<br />Accepts any valid CSS length value except 'auto' (e.g., '10%', '100px'). |
| `orientation`        | `orientation`    |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `position`           | `position`       |           | ``${number}%` \| CssNumber`                  | Gets or sets the `position` property.<br />The position of the divider. Accepts any valid CSS length value except 'auto'. |
| `positionInPixels`   |                  | readonly  | `number`                                     | Gets the position in pixels.<br />This is a computed property used internally for calculations. |
| `positionPercentage` |                  | readonly  | `number`                                     | Gets the position as a percentage value (0-100).<br />This is a computed property used internally for calculations. |
| `reverse`            | `reverse`        |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `snapThreshold`      | `snapThreshold`  |           | `number`                                     | Gets or sets the `snapThreshold` property.       |
| `snaps`              | `snaps`          |           | `(`${number}%` \| CssNumber)[]`              | Gets or sets the `snap` property.<br />The `snap` is a space separated list of snap points.<br />When the split is dragged, it will snap to the nearest snap point. |
| `splitReposition`    |                  | readonly  | `IEventEmitter<ISplitRepositionEventDetail>` | Called when the split is repositioned.<br />Provides reference to `IEventDetail` as event detail. |
| `themeName`          |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `thickness`          | `thickness`      |           | `number`                                     | Gets or sets the `thickness` property.           |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `collapse`             | `(panel: "start" \| "end"): void`                | Collapses the specified panel by dragging it beyond 50% of its minimum size constraint.<br />Only works when `collapsible` is enabled.<br /><br />**panel**: The panel to collapse |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`               | `(panel: "start" \| "end"): void`                | Expands the specified collapsed panel back to its minimum/maximum position.<br />Only works when `collapsible` is enabled.<br /><br />**panel**: The panel to expand |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(_slotName?: string \| undefined): void`        | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event             | Type                   | Description                                      |
|-------------------|------------------------|--------------------------------------------------|
| `changed`         | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`       | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`    | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `splitReposition` | `SplitRepositionEvent` | Fired when the split position changes via user interaction |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `end`   | The secondary content panel positioned at the end of the split |
| `start` | The primary content panel positioned at the beginning of the split |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `thumb` | Custom grip icon for the draggable divider (defaults to three dots icon) |

## CSS Shadow Parts

| Part      | Description                                |
|-----------|--------------------------------------------|
| `divider` | The interactive draggable divider element  |
| `end`     | The end panel container                    |
| `panel`   | The container for each split panel content |
| `start`   | The start panel container                  |
| `thumb`   | The visual grip icon within the divider    |

## CSS Custom Properties

| Property                | Type   | Description                                      |
|-------------------------|--------|--------------------------------------------------|
| `--split-divider-width` | String | Width/height of the divider based on orientation |

# mosaik-stack

Stack - A flexible layout component for arranging child elements in vertical or horizontal linear sequences.

Provides powerful layout capabilities with support for orientation control, alignment options,
gap management, and responsive behavior. Ideal for creating organized linear layouts such as
navigation menus, button groups, content columns, and form layouts with consistent spacing.

**Mixins:** Alignable, Themeable, Reversible, Orientable, Fitable, Gapable

## Example

```html
<!-- Basic vertical stack -->
<mosaik-stack>
  <mosaik-button label="Action 1"></mosaik-button>
  <mosaik-button label="Action 2"></mosaik-button>
  <mosaik-button label="Action 3"></mosaik-button>
</mosaik-stack>

<!-- Horizontal button group -->
<mosaik-stack orientation="horizontal" gap="small">
  <mosaik-button appearance="solid" label="Save"></mosaik-button>
  <mosaik-button appearance="plain" label="Cancel"></mosaik-button>
</mosaik-stack>

<!-- Navigation menu stack -->
<mosaik-stack gap="none">
  <mosaik-cell>
    <span slot="start">🏠</span>
    <span slot="label">Dashboard</span>
  </mosaik-cell>
  <mosaik-cell>
    <span slot="start">👥</span>
    <span slot="label">Users</span>
  </mosaik-cell>
</mosaik-stack>
```

## Properties

| Property              | Attribute              | Modifiers | Type                                         | Description                                      |
|-----------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`             |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`           |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                 | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`                 | `fit`                  |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `gap`                 | `gap`                  |           | `Size \| CssNumber`                          | The `gap` represents the space between the child elements.<br />The default value is `0`, which means no gap is applied. |
| `horizontalAlignment` | `horizontal-alignment` |           | `HorizontalAlignment`                        | Gets or sets the `horizontalAlignment` property.<br />The default value is `stretch`. |
| `items`               |                        | readonly  | `HTMLElement[]`                              | Gets or sets the `items` property.               |
| `lang`                | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`         | `orientation`          |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`             | `reverse`              |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `themeName`           |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `verticalAlignment`   | `vertical-alignment`   |           | `VerticalAlignment`                          | Gets or sets the `verticalAlignment` property.<br />The default value is `stretch`. |
| `wrap`                | `wrap`                 |           | `boolean`                                    | Gets or sets the `wrap` property.                |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default content area for child elements to be arranged in stack layout |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `container` | Main stack container for layout and alignment control |
| `content`   | Content wrapper for stack items and elements     |

## CSS Custom Properties

| Property      | Type   | Description                              |
|---------------|--------|------------------------------------------|
| `--stack-gap` | String | Spacing between stack items and elements |

# mosaik-stepper-item

Stepper Item - A single step panel within a Stepper workflow component.

**Mixins:** Themeable, Animatable, Disableable, Valueable

## Examples

Basic stepper item:

```html
<mosaik-stepper-item header="Personal Info">
  <mosaik-form>
    <mosaik-input label="Name"></mosaik-input>
    <mosaik-input label="Email"></mosaik-input>
  </mosaik-form>
</mosaik-stepper-item>
```

Stepper item with description and footer:

```html
<mosaik-stepper-item
  header="Review Details"
  description="Please review and confirm your information">
  <p>Your information will be saved.</p>
  <div slot="footer">
    <mosaik-button variant="default">Back</mosaik-button>
    <mosaik-button variant="primary">Confirm</mosaik-button>
  </div>
</mosaik-stepper-item>
```

Stepper item with state and hint:

```html
<mosaik-stepper-item
  header="Upload Files"
  state="completed"
  hint="Optional">
  <p>Files uploaded successfully.</p>
</mosaik-stepper-item>
```

## Properties

| Property          | Attribute     | Modifiers | Type                                         | Default   | Description                                      |
|-------------------|---------------|-----------|----------------------------------------------|-----------|--------------------------------------------------|
| `animationTarget` |               | readonly  | `HTMLElement \| undefined`                   |           | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`         |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |           | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |               | readonly  | `IEventEmitter<void>`                        |           | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `description`     | `description` |           | `string`                                     |           | Gets or sets the `description` property.         |
| `deselected`      |               | readonly  | `IEventEmitter<IEventDetail>`                |           | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`             | `dir`         |           | `FlowDirection`                              |           | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`    |           | `boolean`                                    |           | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |               | readonly  | `IEventEmitter<void>`                        |           | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`     |               | readonly  | `string`                                     |           | Gets the `displayText` property.                 |
| `enter`           | `enter`       |           |                                              | "fadeIn"  | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`        |           |                                              | "fadeOut" | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `header`          | `header`      |           | `string`                                     |           | Gets or sets the `header` property.              |
| `hint`            | `hint`        |           | `string`                                     |           | Gets or sets the `hint` property.                |
| `icon`            |               |           | `string`                                     |           | Gets or sets the `icon` property.                |
| `index`           |               | readonly  | `number`                                     |           | Gets the index of the item.                      |
| `isActive`        | `isActive`    |           | `boolean`                                    |           | Gets or sets the `isActive` property.            |
| `isSelected`      | `isSelected`  |           | `boolean`                                    |           | Gets or sets the `isSelected` property.          |
| `lang`            | `lang`        |           | `string`                                     |           | The lang property indicates the language of the element's content. |
| `selected`        |               | readonly  | `IEventEmitter<IEventDetail>`                |           | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `state`           | `state`       |           | `"error" \| "pending" \| "completed"`        |           | Gets or sets the `state` property.               |
| `themeName`       |               |           | `string`                                     |           | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`           | `value`       |           | `TType`                                      |           | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`         | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`           | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot for the main step content       |
| `footer` | Action buttons or navigation controls for this step |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description              |
|-----------|--------------------------|
| `content` | The content area wrapper |
| `footer`  | The footer container     |
| `panel`   | The main panel container |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--stepper-item-font-family`          | String | The font family for stepper item text            |
| `--stepper-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--stepper-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--stepper-item-font-size`            | String | The item font size CSS custom property.          |
| `--stepper-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--stepper-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--stepper-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--stepper-item-gap`                  | String | The spacing between content and footer           |
| `--stepper-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--stepper-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--stepper-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--stepper-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--stepper-item-panel-padding`        | String | The padding inside the panel                     |
| `--stepper-item-panel-radius`         | String | The border radius of the panel                   |
| `--stepper-item-panel-shadow`         | String | The drop shadow or elevation effect              |
| `--stepper-item-shadow`               | String | The item shadow CSS custom property.             |
| `--stepper-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--stepper-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--stepper-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--stepper-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--stepper-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--stepper-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--stepper-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--stepper-item-transition-property`  | String | The item transition property CSS custom property. |
| `--stepper-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-stepper

Stepper - A multi-step workflow component for guiding users through sequential processes.

**Mixins:** Themeable, Slottable, Fitable, Disableable, Orientable

## Examples

Basic horizontal stepper:

```html
<mosaik-stepper>
  <mosaik-stepper-item header="Account Details" is-active>
    <p>Enter your account information.</p>
  </mosaik-stepper-item>
  <mosaik-stepper-item header="Verification">
    <p>Verify your email address.</p>
  </mosaik-stepper-item>
  <mosaik-stepper-item header="Completion">
    <p>Your account is ready!</p>
  </mosaik-stepper-item>
</mosaik-stepper>
```

Vertical stepper with descriptions:

```html
<mosaik-stepper orientation="vertical">
  <mosaik-stepper-item header="Step 1" description="Choose your plan" state="completed"></mosaik-stepper-item>
  <mosaik-stepper-item header="Step 2" description="Enter payment details" is-active></mosaik-stepper-item>
  <mosaik-stepper-item header="Step 3" description="Confirm order"></mosaik-stepper-item>
</mosaik-stepper>
```

Stepper with step states and hints:

```html
<mosaik-stepper>
  <mosaik-stepper-item header="Upload" state="completed"></mosaik-stepper-item>
  <mosaik-stepper-item header="Process" state="error" hint="Required"></mosaik-stepper-item>
  <mosaik-stepper-item header="Finish" state="pending"></mosaik-stepper-item>
</mosaik-stepper>
```

## Properties

| Property            | Attribute     | Modifiers | Type                                             | Description                                      |
|---------------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `activeIndex`       |               | readonly  | `number`                                         | Gets the active index of the stepper.            |
| `activeStepChanged` |               | readonly  | `IEventEmitter<IActiveStepChangedEventDetail>`   | Called when the active step has changed.<br />Provides reference to `IActiveStepChangedEventDetail` as event detail. |
| `changed`           |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |               | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`         |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`    |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |               | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`               | `fit`         |           | `Fit`                                            | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `isFirstStep`       |               | readonly  | `boolean`                                        | Gets the first step indicator.                   |
| `isLastStep`        |               | readonly  | `boolean`                                        | Gets the last step indicator.                    |
| `items`             |               | readonly  | `StepperItemElement[]`                           | Returns the `items` property.                    |
| `itemsChanged`      |               | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `lang`              | `lang`        |           | `string`                                         | The lang property indicates the language of the element's content. |
| `orientation`       | `orientation` |           | `Orientation`                                    | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `selectedItem`      |               |           | `TItem \| null`                                  | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectionChanged`  |               | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `themeName`         |               |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `deselect`             | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `onStepInvoked`        | `(step: StepperItemElement): void`               | Handles a step invocation from the header.<br /><br />**step**: The step that has been invoked. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetSelection`       | `(): void`                                       | Resets the current selection.                    |
| `select`               | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`          | `(): void`                                       | Select the first item.                           |
| `selectLast`           | `(): void`                                       | Select the last item.                            |
| `selectNext`           | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious`       | `(): void`                                       | Select the previous item before current selected item/index. |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `activeStepChanged` | `ActiveStepChangedEvent` | Fired when the active step changes               |
| `changed`           | `PropertyChangedEvent`   | Fired when properties change                     |
| `connected`         | `ConnectedEvent`         | Fired when connected to the DOM                  |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `itemsChanged`      | `ItemsChangedEvent`      | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged`  | `SelectionChangedEvent`  | Fired when the selected item changes, providing both old and new selected items |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default slot for selector item elements          |
| `footer` | Custom footer content below the stepper content  |
| `steps`  | The stepper item elements (mosaik-stepper-item)  |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part               | Description                               |
|--------------------|-------------------------------------------|
| `connector`        | The line connecting steps                 |
| `content`          | The main content area for active step     |
| `footer`           | The footer container                      |
| `header`           | The header container with step indicators |
| `step`             | The clickable step button                 |
| `step-container`   | Individual step header container          |
| `step-description` | The step description text                 |
| `step-header`      | The step header text                      |
| `step-icon`        | The step icon/number wrapper              |
| `step-optional`    | The optional/hint text                    |
| `step-state`       | The pip element for step icon or number   |
| `step-text`        | The step text container                   |

## CSS Custom Properties

| Property                              | Type   | Description                                   |
|---------------------------------------|--------|-----------------------------------------------|
| `--stepper-connector-background`      | String | The background color of connectors            |
| `--stepper-connector-margin`          | String | The margin around connectors                  |
| `--stepper-connector-radius`          | String | The border radius of connectors               |
| `--stepper-connector-size`            | String | The thickness of connector lines              |
| `--stepper-content-gap`               | String | The spacing in the content area               |
| `--stepper-description-size`          | String | The font size for descriptions                |
| `--stepper-focus-outline-offset`      | String | The offset of focus outlines                  |
| `--stepper-focus-outline-width`       | String | The width of focus outlines                   |
| `--stepper-font-family`               | String | The font family for stepper text              |
| `--stepper-font-letter-spacing`       | String | The font letter spacing CSS custom property.  |
| `--stepper-font-line-height`          | String | The font line height CSS custom property.     |
| `--stepper-font-size`                 | String | The font size CSS custom property.            |
| `--stepper-font-text-decoration`      | String | The font text decoration CSS custom property. |
| `--stepper-font-text-transform`       | String | The font text transform CSS custom property.  |
| `--stepper-font-weight`               | String | The font weight CSS custom property.          |
| `--stepper-foreground-color`          | String | The text and icon color                       |
| `--stepper-gap`                       | String | The spacing between steps and elements        |
| `--stepper-header-padding-vertical`   | String | The vertical padding for step headers         |
| `--stepper-icon-border-width`         | String | The border width of step icons                |
| `--stepper-icon-radius`               | String | The border radius of step icons               |
| `--stepper-icon-shadow`               | String | The drop shadow for step icons                |
| `--stepper-icon-size`                 | String | The size of step icons                        |
| `--stepper-padding-bottom`            | String | The padding bottom CSS custom property.       |
| `--stepper-padding-left`              | String | The padding left CSS custom property.         |
| `--stepper-padding-right`             | String | The padding right CSS custom property.        |
| `--stepper-padding-top`               | String | The padding top CSS custom property.          |
| `--stepper-shadow`                    | String | The shadow CSS custom property.               |
| `--stepper-shadow-blur`               | String | The shadow blur CSS custom property.          |
| `--stepper-shadow-color`              | String | The shadow color CSS custom property.         |
| `--stepper-shadow-offset-x`           | String | The shadow offset x CSS custom property.      |
| `--stepper-shadow-offset-y`           | String | The shadow offset y CSS custom property.      |
| `--stepper-shadow-spread`             | String | The shadow spread CSS custom property.        |
| `--stepper-step-padding-vertical`     | String | The vertical padding for step buttons         |
| `--stepper-text-gap`                  | String | The spacing between text elements             |
| `--stepper-transition-duration`       | String | The transition duration CSS custom property.  |
| `--stepper-transition-mode`           | String | The transition mode CSS custom property.      |
| `--stepper-transition-property`       | String | The transition property CSS custom property.  |
| `--stepper-translate`                 | String | The translate CSS custom property.            |
| `--stepper-vertical-connector-length` | String | The length of vertical connectors             |
| `--stepper-vertical-connector-margin` | String | The margin for vertical connectors            |

# mosaik-sticky

Sticky - A container that maintains fixed positioning within the viewport during scrolling.

**Mixins:** Themeable

## Examples

Basic sticky header (top/left set via JavaScript):

```html
<div class="page-content">
  <mosaik-sticky id="stickyHeader">
    <header class="site-header">
      <h1>My Site</h1>
      <nav>...</nav>
    </header>
  </mosaik-sticky>
  <main>
    <!-- Long scrollable content -->
  </main>
</div>
<script>
  document.querySelector('#stickyHeader').top = '0px';
</script>
```

Sticky sidebar navigation:

```html
<div class="layout">
  <aside class="sidebar">
    <mosaik-sticky id="stickySidebar">
      <nav class="side-nav">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
      </nav>
    </mosaik-sticky>
  </aside>
  <main>...</main>
</div>
<script>
  document.querySelector('#stickySidebar').top = '80px';
</script>
```

Programmatic offset adjustment:

```html
<mosaik-sticky id="stickyNav">
  <nav>Navigation</nav>
</mosaik-sticky>
<script>
  const stickyNav = document.getElementById('stickyNav');
  stickyNav.top = '0px';
  window.addEventListener('resize', () => {
    const headerHeight = document.querySelector('.top-banner')?.offsetHeight || 0;
    stickyNav.top = `${headerHeight}px`;
  });
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `left`         |           |           | `CssLength`                                  | Gets or sets the `left` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `top`          |           |           | `CssLength`                                  | Gets or sets the `top` property.                 |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for content that should exhibit sticky positioning |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                        | Type   | Description                                    |
|---------------------------------|--------|------------------------------------------------|
| `--sticky-font-family`          | String | The font family CSS custom property.           |
| `--sticky-font-letter-spacing`  | String | The font letter spacing CSS custom property.   |
| `--sticky-font-line-height`     | String | The font line height CSS custom property.      |
| `--sticky-font-size`            | String | The font size CSS custom property.             |
| `--sticky-font-text-decoration` | String | The font text decoration CSS custom property.  |
| `--sticky-font-text-transform`  | String | The font text transform CSS custom property.   |
| `--sticky-font-weight`          | String | The font weight CSS custom property.           |
| `--sticky-gap`                  | String | The gap CSS custom property.                   |
| `--sticky-left`                 | String | Left offset when sticky positioning is applied |
| `--sticky-padding-bottom`       | String | The padding bottom CSS custom property.        |
| `--sticky-padding-left`         | String | The padding left CSS custom property.          |
| `--sticky-padding-right`        | String | The padding right CSS custom property.         |
| `--sticky-padding-top`          | String | The padding top CSS custom property.           |
| `--sticky-shadow`               | String | The shadow CSS custom property.                |
| `--sticky-shadow-blur`          | String | The shadow blur CSS custom property.           |
| `--sticky-shadow-color`         | String | The shadow color CSS custom property.          |
| `--sticky-shadow-offset-x`      | String | The shadow offset x CSS custom property.       |
| `--sticky-shadow-offset-y`      | String | The shadow offset y CSS custom property.       |
| `--sticky-shadow-spread`        | String | The shadow spread CSS custom property.         |
| `--sticky-top`                  | String | Top offset when sticky positioning is applied  |
| `--sticky-transition-duration`  | String | The transition duration CSS custom property.   |
| `--sticky-transition-mode`      | String | The transition mode CSS custom property.       |
| `--sticky-transition-property`  | String | The transition property CSS custom property.   |
| `--sticky-translate`            | String | The translate CSS custom property.             |

# mosaik-success-state

SuccessState - A celebration component that displays successful operations and positive outcomes to users.

**Mixins:** Themeable, TextFormattable, Slottable

## Examples

Success state with action:

```html
<mosaik-success-state>
  <mosaik-button slot="actions" appearance="primary" onclick="goToDashboard()">Go to Dashboard</mosaik-button>
</mosaik-success-state>
```

Success state configured via JavaScript:

```html
<mosaik-success-state id="successState">
  <mosaik-button slot="actions" appearance="primary">View Order Details</mosaik-button>
  <mosaik-button slot="actions" appearance="soft">Continue Shopping</mosaik-button>
</mosaik-success-state>
<script>
  const el = document.getElementById('successState');
  el.header = 'Payment Successful';
  el.content = 'Your order has been confirmed and is being processed.';
  el.icon = 'credit-card-check';
</script>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |           |           | `string`                                     | Gets or sets the `content` property of the state. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `header`       |           |           | `string`                                     | Gets or sets the `header` property.<br />The primary success message displayed to users.<br />The default value is an empty string, which means no header is displayed. |
| `icon`         |           |           | `string`                                     | Gets or sets the `icon` property.<br />The icon SVG path data for the success state visual indicator.<br />The default value is an empty string, which displays a default success circle icon. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | Default content area for additional success information or custom content |
| `actions` | Action buttons for next steps or related operations after success |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `content`    | The content text container for detailed success information |
| `header`     | The header text container for primary success messaging |
| `icon`       | The icon container for success state visual indicators (checkmarks, thumbs up) |
| `innerStack` | The internal stack container for action slot elements |

## CSS Custom Properties

| Property                                      | Type   | Description                                      |
|-----------------------------------------------|--------|--------------------------------------------------|
| `--success-state-font-family`                 | String | The state font family CSS custom property.       |
| `--success-state-font-letter-spacing`         | String | The state font letter spacing CSS custom property. |
| `--success-state-font-line-height`            | String | The state font line height CSS custom property.  |
| `--success-state-font-size`                   | String | The state font size CSS custom property.         |
| `--success-state-font-text-decoration`        | String | The state font text decoration CSS custom property. |
| `--success-state-font-text-transform`         | String | The state font text transform CSS custom property. |
| `--success-state-font-weight`                 | String | The state font weight CSS custom property.       |
| `--success-state-foreground-color`            | String | The text color for success state content         |
| `--success-state-gap`                         | String | The spacing between icon, text, and action elements |
| `--success-state-header-font-family`          | String | The font family for header text                  |
| `--success-state-header-font-letter-spacing`  | String | The letter spacing for header text               |
| `--success-state-header-font-line-height`     | String | The line height for header text                  |
| `--success-state-header-font-size`            | String | The font size for header text                    |
| `--success-state-header-font-text-decoration` | String | The text decoration style for header text        |
| `--success-state-header-font-text-transform`  | String | The text transformation style for header text    |
| `--success-state-header-font-weight`          | String | The font weight for header text                  |
| `--success-state-padding-bottom`              | String | The bottom padding inside the success state container |
| `--success-state-padding-left`                | String | The left padding inside the success state container |
| `--success-state-padding-right`               | String | The right padding inside the success state container |
| `--success-state-padding-top`                 | String | The top padding inside the success state container |
| `--success-state-shadow`                      | String | The state shadow CSS custom property.            |
| `--success-state-shadow-blur`                 | String | The state shadow blur CSS custom property.       |
| `--success-state-shadow-color`                | String | The state shadow color CSS custom property.      |
| `--success-state-shadow-offset-x`             | String | The state shadow offset x CSS custom property.   |
| `--success-state-shadow-offset-y`             | String | The state shadow offset y CSS custom property.   |
| `--success-state-shadow-spread`               | String | The state shadow spread CSS custom property.     |
| `--success-state-transition-duration`         | String | The state transition duration CSS custom property. |
| `--success-state-transition-mode`             | String | The state transition mode CSS custom property.   |
| `--success-state-transition-property`         | String | The state transition property CSS custom property. |
| `--success-state-translate`                   | String | The state translate CSS custom property.         |

# mosaik-summary

Summary - A semantic container for grouping related information with a header and content.

**Mixins:** Themeable

## Examples

Basic summary with slotted header and content:

```html
<mosaik-summary>
  <span slot="header">Personal Information</span>
  <div slot="content">Please provide your contact details</div>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
</mosaik-summary>
```

Summary with slotted content and prefix/suffix:

```html
<mosaik-summary>
  <span slot="header">Account Settings</span>
  <mosaik-icon slot="prefix" data="settings-icon"></mosaik-icon>
  <div slot="content">
    <p>Configure your account preferences</p>
  </div>
  <mosaik-badge slot="suffix" label="3"></mosaik-badge>
</mosaik-summary>
```

Form section grouping:

```html
<form>
  <mosaik-summary>
    <span slot="header">Billing Address</span>
    <input type="text" name="street" placeholder="Street">
    <input type="text" name="city" placeholder="City">
    <input type="text" name="zip" placeholder="ZIP Code">
  </mosaik-summary>
  <mosaik-summary>
    <span slot="header">Payment Method</span>
    <select name="payment">
      <option>Credit Card</option>
      <option>PayPal</option>
    </select>
  </mosaik-summary>
</form>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`      |           |           | `string \| null \| undefined`                | Gets or sets the `content` property.             |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `header`       |           |           | `string \| null \| undefined`                | Gets or sets the `header` property.              |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot.                                |
| `header` | Custom header content (overrides header attribute, rendered as legend) |
| `prefix` | Content positioned before the main content       |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content positioned after the main content        |

## CSS Shadow Parts

| Part        | Description                               |
|-------------|-------------------------------------------|
| `container` | Container for prefix, content, and suffix |
| `content`   | The main content text element             |
| `header`    | The legend header element                 |
| `root`      | The fieldset root element                 |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--summary-font-family`          | String | The font family CSS custom property.          |
| `--summary-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--summary-font-line-height`     | String | The font line height CSS custom property.     |
| `--summary-font-size`            | String | The font size CSS custom property.            |
| `--summary-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--summary-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--summary-font-weight`          | String | The font weight CSS custom property.          |
| `--summary-gap`                  | String | Spacing between elements (from gap mixin)     |
| `--summary-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--summary-padding-left`         | String | The padding left CSS custom property.         |
| `--summary-padding-right`        | String | The padding right CSS custom property.        |
| `--summary-padding-top`          | String | The padding top CSS custom property.          |
| `--summary-shadow`               | String | The shadow CSS custom property.               |
| `--summary-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--summary-shadow-color`         | String | The shadow color CSS custom property.         |
| `--summary-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--summary-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--summary-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--summary-transition-duration`  | String | The transition duration CSS custom property.  |
| `--summary-transition-mode`      | String | The transition mode CSS custom property.      |
| `--summary-transition-property`  | String | The transition property CSS custom property.  |
| `--summary-translate`            | String | The translate CSS custom property.            |

# mosaik-swipe

Swipe - A gesture-based interaction for move content by swiping.

**Mixins:** Themeable

## Example

```html
<mosaik-swipe>
  <!-- content to be swiped -->
</mosaik-swipe>
```

## Properties

| Property                    | Attribute                   | Modifiers | Type                                         | Description                                      |
|-----------------------------|-----------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`                   |                             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`                 |                             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                       | `dir`                       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`              |                             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`                      | `lang`                      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `panEndTriggeringThreshold` | `panEndTriggeringThreshold` |           | `number`                                     | Gets or sets the `panEndTriggeringThreshold` property. |
| `panLeftDisabled`           | `panLeftDisabled`           |           | `boolean`                                    | Gets or sets the `panLeftDisabled` property.     |
| `panRightDisabled`          | `panRightDisabled`          |           | `boolean`                                    | Gets or sets the `panRightDisabled` property.    |
| `swipeLeft`                 |                             | readonly  | `IEventEmitter<ISwipeLeftEventDetail>`       | Called when the left swipe gesture is detected.<br />Provides reference to `ISwipeLeftEventDetail` as event detail. |
| `swipeRight`                |                             | readonly  | `IEventEmitter<ISwipeRightEventDetail>`      | Called when the right swipe gesture is detected.<br />Provides reference to `ISwipeRightEventDetail` as event detail. |
| `themeName`                 |                             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `panLeft`       | `(): void`                                       |                                                  |
| `panRight`      | `(): void`                                       |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `swipeLeft`    | `SwipeLeftEvent`       | Called when the left swipe gesture is detected.  |
| `swipeRight`   | `SwipeRightEvent`      | Called when the right swipe gesture is detected. |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default content slot.                        |
| `after`  | The after swipe slot.                            |
| `before` | The before swipe slot.                           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                       | Description                        |
|----------------------------|------------------------------------|
| `after-panning-container`  | The after-panning-container part.  |
| `before-panning-container` | The before-panning-container part. |
| `content-container`        | The content-container part.        |
| `panable-container`        | The panable-container part.        |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--swipe-font-family`          | String | The font family CSS custom property.          |
| `--swipe-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--swipe-font-line-height`     | String | The font line height CSS custom property.     |
| `--swipe-font-size`            | String | The font size CSS custom property.            |
| `--swipe-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--swipe-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--swipe-font-weight`          | String | The font weight CSS custom property.          |
| `--swipe-gap`                  | String | The gap CSS custom property.                  |
| `--swipe-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--swipe-padding-left`         | String | The padding left CSS custom property.         |
| `--swipe-padding-right`        | String | The padding right CSS custom property.        |
| `--swipe-padding-top`          | String | The padding top CSS custom property.          |
| `--swipe-shadow`               | String | The shadow CSS custom property.               |
| `--swipe-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--swipe-shadow-color`         | String | The shadow color CSS custom property.         |
| `--swipe-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--swipe-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--swipe-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--swipe-transition-duration`  | String | The transition duration CSS custom property.  |
| `--swipe-transition-mode`      | String | The transition mode CSS custom property.      |
| `--swipe-transition-property`  | String | The transition property CSS custom property.  |
| `--swipe-translate`            | String | The translate CSS custom property.            |

# mosaik-tab-item

Tab Item - A navigation option within a tabbed interface.

Used to switch between different views or sections of content.
Typically displayed as a clickable label, often accompanied by an icon.
Tabs help organize content into manageable sections, improving user experience and navigation.

**Mixins:** Themeable, Animatable, Orientable, Closeable, Selectable, Disableable, Labelable, Iconable, Valueable

## Examples

```html
<mosaik-tab-item is-selected>Overview content</mosaik-tab-item>
```

Disabled tab item:

```html
<mosaik-tab-item disabled>Unavailable content</mosaik-tab-item>
```

## Properties

| Property          | Attribute       | Modifiers | Type                                         | Default   | Description                                      |
|-------------------|-----------------|-----------|----------------------------------------------|-----------|--------------------------------------------------|
| `animationTarget` |                 | readonly  | `HTMLElement \| undefined`                   |           | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`         |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |           | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `closeable`       | `closeable`     |           | `boolean`                                    |           | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`          |                 |           | `IEventEmitter<ICancelEventDetail>`          |           | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`       |                 | readonly  | `IEventEmitter<void>`                        |           | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`      |                 |           | `IEventEmitter<IEventDetail>`                |           | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`             | `dir`           |           | `FlowDirection`                              |           | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`      |           | `boolean`                                    |           | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |                 | readonly  | `IEventEmitter<void>`                        |           | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`           | `enter`         |           |                                              | "fadeIn"  | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`          |           |                                              | "fadeOut" | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `icon`            |                 |           | `string`                                     |           | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`    | `icon-position` |           | `IconPosition`                               |           | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`        | `icon-size`     |           | `Size \| null`                               |           | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isSelected`      | `is-selected`   |           | `boolean`                                    |           | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `label`           |                 |           | `string`                                     |           | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`            | `lang`          |           | `string`                                     |           | The lang property indicates the language of the element's content. |
| `orientation`     | `orientation`   |           | `Orientation`                                |           | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `selected`        |                 |           | `IEventEmitter<IEventDetail>`                |           | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `themeName`       |                 |           | `string`                                     |           | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`           | `value`         |           | `TType`                                      |           | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`            | `(): Promise<boolean>`                           | Removes the element from the DOM.                |
| `deselect`         | `(): void`                                       | Deselects the element.                           |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`           | `(): void`                                       | Selects the element.                             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Fired when the tab will be closed.               |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `deselected`   | `DeselectedEvent`      | Fired when the tab is deselected.                |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the tab is selected.                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `root` | The root part. |

## CSS Custom Properties

| Property                          | Type   | Description                                      |
|-----------------------------------|--------|--------------------------------------------------|
| `--tab-item-border-radius`        | String | The item border radius CSS custom property.      |
| `--tab-item-border-style`         | String | The item border style CSS custom property.       |
| `--tab-item-border-width`         | String | The item border width CSS custom property.       |
| `--tab-item-font-family`          | String | The item font family CSS custom property.        |
| `--tab-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--tab-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--tab-item-font-size`            | String | The item font size CSS custom property.          |
| `--tab-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--tab-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--tab-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--tab-item-gap`                  | String | The item gap CSS custom property.                |
| `--tab-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--tab-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--tab-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--tab-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--tab-item-shadow`               | String | The item shadow CSS custom property.             |
| `--tab-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--tab-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--tab-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--tab-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--tab-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--tab-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--tab-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--tab-item-transition-property`  | String | The item transition property CSS custom property. |
| `--tab-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-tab-panel

Tab Panel - A scrollable container for tab strip items with optional navigation buttons.

**Mixins:** Themeable, Slottable, Appearanceable

## Examples

Tab panel with scrollable content:

```html
<mosaik-tab-panel>
  <mosaik-tab-strip>
    <mosaik-tab-strip-item>Tab 1</mosaik-tab-strip-item>
    <mosaik-tab-strip-item>Tab 2</mosaik-tab-strip-item>
    <mosaik-tab-strip-item>Tab 3</mosaik-tab-strip-item>
  </mosaik-tab-strip>
</mosaik-tab-panel>
```

Tab panel with alignment:

```html
<mosaik-tab-panel alignment="center" placement="bottom">
  <mosaik-tab-strip>
    <mosaik-tab-strip-item>Overview</mosaik-tab-strip-item>
    <mosaik-tab-strip-item>Details</mosaik-tab-strip-item>
  </mosaik-tab-strip>
</mosaik-tab-panel>
```

## Properties

| Property               | Attribute        | Modifiers | Type                                         | Description                                      |
|------------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`            | `alignment`      |           | `TabPanelAlignment`                          | Gets or sets the `alignment` property.           |
| `appearance`           | `appearance`     |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `canScrollToEnd`       |                  |           | `boolean`                                    | Gets or sets the `canScrollToEnd` property.      |
| `canScrollToStart`     |                  |           | `boolean`                                    | Gets the `canScrollToStart` property.            |
| `changed`              |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`            |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                  | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`         |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enableGestures`       | `enableGestures` |           | `boolean`                                    | Gets or sets the `enableGestures` property.      |
| `hasIndicator`         | `hasIndicator`   |           | `boolean`                                    | Gets or sets the `hasIndicator` property.        |
| `hasScrollableContent` |                  |           | `boolean`                                    | Gets the `hasScrollableContent` property.        |
| `lang`                 | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `placement`            | `placement`      |           | `TabStripPlacement`                          | Gets or sets the `placement` property.           |
| `themeName`            |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for the tab strip element       |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                | Description                                  |
|---------------------|----------------------------------------------|
| `content`           | The scrollable content container             |
| `endScrollButton`   | The navigation button for scrolling to end   |
| `startScrollButton` | The navigation button for scrolling to start |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--tab-panel-background-color`     | String | The background fill color of the panel           |
| `--tab-panel-font-family`          | String | The panel font family CSS custom property.       |
| `--tab-panel-font-letter-spacing`  | String | The panel font letter spacing CSS custom property. |
| `--tab-panel-font-line-height`     | String | The panel font line height CSS custom property.  |
| `--tab-panel-font-size`            | String | The panel font size CSS custom property.         |
| `--tab-panel-font-text-decoration` | String | The panel font text decoration CSS custom property. |
| `--tab-panel-font-text-transform`  | String | The panel font text transform CSS custom property. |
| `--tab-panel-font-weight`          | String | The panel font weight CSS custom property.       |
| `--tab-panel-gap`                  | String | The panel gap CSS custom property.               |
| `--tab-panel-padding-bottom`       | String | The panel padding bottom CSS custom property.    |
| `--tab-panel-padding-left`         | String | The panel padding left CSS custom property.      |
| `--tab-panel-padding-right`        | String | The panel padding right CSS custom property.     |
| `--tab-panel-padding-top`          | String | The panel padding top CSS custom property.       |
| `--tab-panel-shadow`               | String | The panel shadow CSS custom property.            |
| `--tab-panel-shadow-blur`          | String | The panel shadow blur CSS custom property.       |
| `--tab-panel-shadow-color`         | String | The panel shadow color CSS custom property.      |
| `--tab-panel-shadow-offset-x`      | String | The panel shadow offset x CSS custom property.   |
| `--tab-panel-shadow-offset-y`      | String | The panel shadow offset y CSS custom property.   |
| `--tab-panel-shadow-spread`        | String | The panel shadow spread CSS custom property.     |
| `--tab-panel-transition-duration`  | String | The panel transition duration CSS custom property. |
| `--tab-panel-transition-mode`      | String | The panel transition mode CSS custom property.   |
| `--tab-panel-transition-property`  | String | The panel transition property CSS custom property. |
| `--tab-panel-translate`            | String | The panel translate CSS custom property.         |

# mosaik-tab-strip-item

Tab Strip Item - An individual tab navigation button within a tab strip.

**Mixins:** Themeable, Rippleable, Labelable, Iconable, Focusable, Variantable, Orientable, Selectable, Disableable, Valueable

## Examples

Basic tab strip item with slotted text:

```html
<mosaik-tab-strip-item>Overview</mosaik-tab-strip-item>
```

Tab strip item with icon-position:

```html
<mosaik-tab-strip-item icon-position="before">Settings</mosaik-tab-strip-item>
```

Selected tab strip item:

```html
<mosaik-tab-strip-item is-selected variant="primary">Active</mosaik-tab-strip-item>
```

Tab strip item with badge overlay:

```html
<mosaik-tab-strip-item>
  Messages
  <mosaik-badge slot="overlay"></mosaik-badge>
</mosaik-tab-strip-item>
```

## Properties

| Property       | Attribute       | Modifiers | Type                                         | Description                                      |
|----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |                 |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`          | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |                 |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition` | `icon-position` |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`     | `icon-size`     |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isFocused`    | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isSelected`   | `is-selected`   |           | `boolean`                                    | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `label`        |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`         | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation`   |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `placement`    | `placement`     |           | `TabStripPlacement`                          | Gets or sets the `placement` property.           |
| `ripple`       | `ripple`        |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `selected`     |                 |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `themeName`    |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`         |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`              | `(): void`                                       | Deselects the element.                           |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`                | `(): void`                                       | Selects the element.                             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `deselected`   | `DeselectedEvent`      | Fired when the tab strip item is deselected      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the tab strip item is selected        |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `icon`  | The icon displayed alongside the label           |
| `label` | The text label for the tab                       |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                      |
|--------------|--------------------------------------------------|
| `content`    | The main content wrapper                         |
| `focusRing`  | The focus indicator ring for keyboard navigation |
| `icon`       | The icon display area                            |
| `innerStack` | The inner layout stack for icon and label        |
| `label`      | The text label display area                      |
| `ripple`     | The ripple part.                                 |
| `root`       | The root container element                       |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--tab-strip-item-background-color`          | String | The background fill color                        |
| `--tab-strip-item-border-color`              | String | The border color                                 |
| `--tab-strip-item-border-radius`             | String | The corner rounding radius                       |
| `--tab-strip-item-border-style`              | String | The border line style                            |
| `--tab-strip-item-border-width`              | String | The border thickness                             |
| `--tab-strip-item-focus-ring-active-width`   | String | The strip item focus ring active width CSS custom property. |
| `--tab-strip-item-focus-ring-color`          | String | The strip item focus ring color CSS custom property. |
| `--tab-strip-item-focus-ring-inward-offset`  | String | The strip item focus ring inward offset CSS custom property. |
| `--tab-strip-item-focus-ring-outward-offset` | String | The strip item focus ring outward offset CSS custom property. |
| `--tab-strip-item-font-family`               | String | The font family for tab strip item text          |
| `--tab-strip-item-font-letter-spacing`       | String | The letter spacing for tab strip item text       |
| `--tab-strip-item-font-line-height`          | String | The line height for tab strip item text          |
| `--tab-strip-item-font-size`                 | String | The font size for tab strip item text            |
| `--tab-strip-item-font-text-decoration`      | String | The text decoration style                        |
| `--tab-strip-item-font-text-transform`       | String | The text transformation style                    |
| `--tab-strip-item-font-weight`               | String | The font weight for tab strip item text          |
| `--tab-strip-item-foreground-color`          | String | The text and icon color                          |
| `--tab-strip-item-gap`                       | String | The spacing between icon and label               |
| `--tab-strip-item-padding-bottom`            | String | The bottom padding inside the tab strip item     |
| `--tab-strip-item-padding-left`              | String | The left padding inside the tab strip item       |
| `--tab-strip-item-padding-right`             | String | The right padding inside the tab strip item      |
| `--tab-strip-item-padding-top`               | String | The top padding inside the tab strip item        |
| `--tab-strip-item-ripple-color`              | Color  | The strip item ripple color CSS custom property. |
| `--tab-strip-item-ripple-duration`           | String | The strip item ripple duration CSS custom property. |
| `--tab-strip-item-shadow`                    | String | The drop shadow or elevation effect              |
| `--tab-strip-item-shadow-blur`               | String | The strip item shadow blur CSS custom property.  |
| `--tab-strip-item-shadow-color`              | String | The strip item shadow color CSS custom property. |
| `--tab-strip-item-shadow-offset-x`           | String | The strip item shadow offset x CSS custom property. |
| `--tab-strip-item-shadow-offset-y`           | String | The strip item shadow offset y CSS custom property. |
| `--tab-strip-item-shadow-spread`             | String | The strip item shadow spread CSS custom property. |
| `--tab-strip-item-size`                      | String | The minimum size of the tab strip item           |
| `--tab-strip-item-thickness`                 | String | The thickness of selection indicators            |
| `--tab-strip-item-transition-duration`       | String | The duration of hover/focus transitions          |
| `--tab-strip-item-transition-mode`           | String | The timing function for transitions              |
| `--tab-strip-item-transition-property`       | String | The CSS properties to transition                 |
| `--tab-strip-item-translate`                 | String | The strip item translate CSS custom property.    |

# mosaik-tab-strip

TabStrip - A navigation container for organizing and switching between related content panels.

Provides tab-based navigation with keyboard support, visual indicators, and flexible placement options.
Manages tab selection states and coordinates with tab panel content. Essential for organizing
complex interfaces with multiple related views or data sets.

**Mixins:** Themeable, Slottable, Disableable, Variantable, Appearanceable

## Examples

Basic horizontal tab strip:

```html
<mosaik-tab-strip>
  <mosaik-tab-strip-item is-selected>Overview</mosaik-tab-strip-item>
  <mosaik-tab-strip-item>Details</mosaik-tab-strip-item>
  <mosaik-tab-strip-item>Settings</mosaik-tab-strip-item>
</mosaik-tab-strip>
```

Tab strip with indicator and disabled item:

```html
<mosaik-tab-strip has-indicator placement="top">
  <mosaik-tab-strip-item>Dashboard</mosaik-tab-strip-item>
  <mosaik-tab-strip-item>Analytics</mosaik-tab-strip-item>
  <mosaik-tab-strip-item disabled>Admin</mosaik-tab-strip-item>
</mosaik-tab-strip>
```

Vertical tab strip:

```html
<mosaik-tab-strip placement="left" has-indicator>
  <mosaik-tab-strip-item is-selected>Home</mosaik-tab-strip-item>
  <mosaik-tab-strip-item>Profile</mosaik-tab-strip-item>
  <mosaik-tab-strip-item>Settings</mosaik-tab-strip-item>
</mosaik-tab-strip>
```

## Properties

| Property        | Attribute      | Modifiers | Type                                         | Description                                      |
|-----------------|----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `hasIndicator`  | `hasIndicator` |           | `boolean`                                    | Gets or sets the `hasIndicator` property.        |
| `items`         |                | readonly  | `TabStripItemElement[]`                      | Returns the items of the tab strip.              |
| `lang`          | `lang`         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `placement`     | `placement`    |           | `TabStripPlacement`                          | Gets or sets the `placement` property.           |
| `selectedIndex` |                | readonly  | `number`                                     | Returns the selected index.                      |
| `selectedItem`  |                | readonly  | `TabStripItemElement \| null`                | Returns the selected tab item.                   |
| `themeName`     |                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`       | `variant`      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`               | `(tabStripItem: TabStripItemElement): void`      | Selects the specified tab item.<br /><br />**tabStripItem**: The tab item to select. |
| `selectByIndex`        | `(index: number): void`                          | Selects the specified tab item by its index.<br /><br />**index**: The index of the tab item to select. |
| `selectByValue`        | `(value: unknown): void`                         | Selects the specified tab item by its value.<br /><br />**value**: The value of the tab item to select. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `end`   | The end slot.                                    |
| `start` | The start slot.                                  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                  |
|-------------|------------------------------|
| `indicator` | Active tab indicator element |
| `tab-strip` | The main tab strip container |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--tab-strip-background-color`     | Color  | Background color of the tab strip                |
| `--tab-strip-border-color`         | Color  | Border color for tab strip edges                 |
| `--tab-strip-border-radius`        | String | The strip border radius CSS custom property.     |
| `--tab-strip-border-style`         | String | The strip border style CSS custom property.      |
| `--tab-strip-border-width`         | String | The strip border width CSS custom property.      |
| `--tab-strip-font-family`          | String | The strip font family CSS custom property.       |
| `--tab-strip-font-letter-spacing`  | String | The strip font letter spacing CSS custom property. |
| `--tab-strip-font-line-height`     | String | The strip font line height CSS custom property.  |
| `--tab-strip-font-size`            | String | The strip font size CSS custom property.         |
| `--tab-strip-font-text-decoration` | String | The strip font text decoration CSS custom property. |
| `--tab-strip-font-text-transform`  | String | The strip font text transform CSS custom property. |
| `--tab-strip-font-weight`          | String | The strip font weight CSS custom property.       |
| `--tab-strip-foreground-color`     | String | The strip foreground color CSS custom property.  |
| `--tab-strip-gap`                  | String | Spacing between individual tabs                  |
| `--tab-strip-padding-bottom`       | String | The strip padding bottom CSS custom property.    |
| `--tab-strip-padding-left`         | String | The strip padding left CSS custom property.      |
| `--tab-strip-padding-right`        | String | The strip padding right CSS custom property.     |
| `--tab-strip-padding-top`          | String | The strip padding top CSS custom property.       |
| `--tab-strip-shadow`               | String | The strip shadow CSS custom property.            |
| `--tab-strip-shadow-blur`          | String | The strip shadow blur CSS custom property.       |
| `--tab-strip-shadow-color`         | String | The strip shadow color CSS custom property.      |
| `--tab-strip-shadow-offset-x`      | String | The strip shadow offset x CSS custom property.   |
| `--tab-strip-shadow-offset-y`      | String | The strip shadow offset y CSS custom property.   |
| `--tab-strip-shadow-spread`        | String | The strip shadow spread CSS custom property.     |
| `--tab-strip-transition-duration`  | String | The strip transition duration CSS custom property. |
| `--tab-strip-transition-mode`      | String | The strip transition mode CSS custom property.   |
| `--tab-strip-transition-property`  | String | The strip transition property CSS custom property. |
| `--tab-strip-translate`            | String | The strip translate CSS custom property.         |

# mosaik-tab

Tab - A navigation component for switching between different content panels within the same context.

**Mixins:** Themeable, Slottable, Disableable, Variantable, Appearanceable

## Examples

Basic tabs with three panels:

```html
<mosaik-tab>
  <mosaik-tab-item is-selected>
    <p>Overview content goes here.</p>
  </mosaik-tab-item>
  <mosaik-tab-item>
    <p>Details content goes here.</p>
  </mosaik-tab-item>
  <mosaik-tab-item>
    <p>Settings content goes here.</p>
  </mosaik-tab-item>
</mosaik-tab>
```

Tabs with bottom placement and primary variant:

```html
<mosaik-tab placement="bottom" variant="primary">
  <mosaik-tab-item is-selected>
    <p>Home content</p>
  </mosaik-tab-item>
  <mosaik-tab-item>
    <p>Search content</p>
  </mosaik-tab-item>
  <mosaik-tab-item>
    <p>Profile content</p>
  </mosaik-tab-item>
</mosaik-tab>
```

Tabs with center alignment and gestures:

```html
<mosaik-tab alignment="center" enable-gestures>
  <mosaik-tab-item>Content 1</mosaik-tab-item>
  <mosaik-tab-item>Content 2</mosaik-tab-item>
  <mosaik-tab-item>Content 3</mosaik-tab-item>
</mosaik-tab>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                         | Description                                      |
|------------------|------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`      | `alignment`      |           | `TabPanelAlignment`                          | Gets or sets the `alignment` property.           |
| `appearance`     | `appearance`     |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`            |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enableGestures` | `enableGestures` |           | `boolean`                                    | Gets or sets the `enableGestures` property.      |
| `hasIndicator`   | `hasIndicator`   |           | `boolean`                                    | Gets or sets the `hasIndicator` property.        |
| `items`          |                  | readonly  | `TabItemElement[]`                           | Returns the items of the tab.                    |
| `lang`           | `lang`           |           | `string`                                     | The lang property indicates the language of the element's content. |
| `placement`      | `placement`      |           | `TabStripPlacement`                          | Gets or sets the `placement` property.           |
| `selectedIndex`  |                  | readonly  | `number`                                     | Returns the selected index.                      |
| `selectedItem`   |                  | readonly  | `TabItemElement \| null`                     | Returns the selected tab item.                   |
| `themeName`      |                  |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`        | `variant`        |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                           | Type                                             | Description                                      |
|----------------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`                     | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`                   | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                           | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`             | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`           | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`                 | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`                        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`                 | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                            | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                             | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`                  | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `onTabStripItemSelectionChanged` | `(event: CustomEvent<any>, tab: TabItemElement): void` |                                                  |
| `requestUpdate`                  | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`                         | `(tabItem: TabItemElement): void`                | Selects the specified tab item.<br /><br />**tabItem**: The tab item to select. |
| `selectByIndex`                  | `(index: number): void`                          | Selects the specified tab item by its index.<br /><br />**index**: The index of the tab item to select. |
| `selectByValue`                  | `(value: unknown): void`                         | Selects the specified tab item by its value.<br /><br />**value**: The value of the tab item to select. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when properties change                     |
| `connected`    | `ConnectedEvent`       | Fired when connected to the DOM                  |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for tab items (mosaik-tab-item elements) |
| `end`   | Content displayed after the tab strip (e.g., action buttons) |
| `start` | Content displayed before the tab strip (e.g., toolbar buttons) |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                |
|----------------|--------------------------------------------|
| `content`      | The main content area for active tab panel |
| `header`       | The header container with tab strip        |
| `root`         | The root container element                 |
| `tabPanel`     | The tab panel wrapper element              |
| `tabStrip`     | The tab strip container                    |
| `tabStripItem` | Individual tab strip item elements         |

## CSS Custom Properties

| Property                       | Type   | Description                                 |
|--------------------------------|--------|---------------------------------------------|
| `--tab-background-color`       | String | The background fill color                   |
| `--tab-border-color`           | String | The border color                            |
| `--tab-border-radius`          | String | The corner rounding radius                  |
| `--tab-border-style`           | String | The border line style                       |
| `--tab-border-width`           | String | The border thickness                        |
| `--tab-divider-height`         | String | The height of divider lines                 |
| `--tab-font-family`            | String | The font family for tab text                |
| `--tab-font-letter-spacing`    | String | The letter spacing for tab text             |
| `--tab-font-line-height`       | String | The line height for tab text                |
| `--tab-font-size`              | String | The font size for tab text                  |
| `--tab-font-text-decoration`   | String | The text decoration style                   |
| `--tab-font-text-transform`    | String | The text transformation style               |
| `--tab-font-weight`            | String | The font weight for tab text                |
| `--tab-foreground-color`       | String | The text and icon color                     |
| `--tab-gap`                    | String | The spacing between elements                |
| `--tab-indicator-height`       | String | The height of the selection indicator       |
| `--tab-padding-bottom`         | String | The bottom padding inside the tab container |
| `--tab-padding-left`           | String | The left padding inside the tab container   |
| `--tab-padding-right`          | String | The right padding inside the tab container  |
| `--tab-padding-top`            | String | The top padding inside the tab container    |
| `--tab-panel-background-color` | String | The background color of the panel           |
| `--tab-shadow`                 | String | The shadow CSS custom property.             |
| `--tab-shadow-blur`            | String | The shadow blur CSS custom property.        |
| `--tab-shadow-color`           | String | The shadow color CSS custom property.       |
| `--tab-shadow-offset-x`        | String | The shadow offset x CSS custom property.    |
| `--tab-shadow-offset-y`        | String | The shadow offset y CSS custom property.    |
| `--tab-shadow-spread`          | String | The shadow spread CSS custom property.      |
| `--tab-strip-background-color` | String | The background color of the strip           |
| `--tab-strip-padding-bottom`   | String | The bottom padding inside the strip         |
| `--tab-strip-padding-left`     | String | The left padding inside the strip           |
| `--tab-strip-padding-right`    | String | The right padding inside the strip          |
| `--tab-strip-padding-top`      | String | The top padding inside the strip            |
| `--tab-transition-duration`    | String | The duration of transitions                 |
| `--tab-transition-mode`        | String | The timing function for transitions         |
| `--tab-transition-property`    | String | The CSS properties to transition            |
| `--tab-translate`              | String | The translate CSS custom property.          |

# mosaik-table-body-cell

Table Body Cell - A selectable cell within a table body row.

**Mixins:** Themeable, Selectable, Disableable, TextFormattable, TextOverflowable

## Example

Selectable body cell:

```html
<mosaik-table selection-mode="single" selection-type="cell">
  <mosaik-table-body>
    <mosaik-table-body-row>
      <mosaik-table-body-cell text="Alice"></mosaik-table-body-cell>
    </mosaik-table-body-row>
  </mosaik-table-body>
</mosaik-table>
```

## Properties

| Property       | Attribute       | Modifiers | Type                                         | Description                                      |
|----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |                 |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`          | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |                 |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `isSelected`   | `is-selected`   |           | `boolean`                                    | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `lang`         | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     |                 |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `text`         | `text`          |           | `string`                                     | The text content of the cell.                    |
| `textOverflow` | `text-overflow` |           | `TextOverflow`                               | Gets or sets the `textOverflow` property.<br />The default value is `truncate`, which means the text will be truncated if it overflows. |
| `themeName`    |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(): void`                                       | Deselects the element.                           |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(): void`                                       | Selects the element.                             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `deselected`   | `DeselectedEvent`      | Fired when the cell is deselected.               |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the cell is selected.                 |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--table-body-cell-background-color`     | String | The cell background color CSS custom property.   |
| `--table-body-cell-border-color`         | String | The cell border color CSS custom property.       |
| `--table-body-cell-border-radius`        | String | The cell border radius CSS custom property.      |
| `--table-body-cell-border-width`         | String | The cell border width CSS custom property.       |
| `--table-body-cell-font-family`          | String | The cell font family CSS custom property.        |
| `--table-body-cell-font-letter-spacing`  | String | The cell font letter spacing CSS custom property. |
| `--table-body-cell-font-line-height`     | String | The cell font line height CSS custom property.   |
| `--table-body-cell-font-size`            | String | The cell font size CSS custom property.          |
| `--table-body-cell-font-text-decoration` | String | The cell font text decoration CSS custom property. |
| `--table-body-cell-font-text-transform`  | String | The cell font text transform CSS custom property. |
| `--table-body-cell-font-weight`          | String | The cell font weight CSS custom property.        |
| `--table-body-cell-foreground-color`     | String | The cell foreground color CSS custom property.   |
| `--table-body-cell-gap`                  | String | The cell gap CSS custom property.                |
| `--table-body-cell-padding-bottom`       | String | The cell padding bottom CSS custom property.     |
| `--table-body-cell-padding-left`         | String | The cell padding left CSS custom property.       |
| `--table-body-cell-padding-right`        | String | The cell padding right CSS custom property.      |
| `--table-body-cell-padding-top`          | String | The cell padding top CSS custom property.        |
| `--table-body-cell-shadow`               | String | The cell shadow CSS custom property.             |
| `--table-body-cell-shadow-blur`          | String | The cell shadow blur CSS custom property.        |
| `--table-body-cell-shadow-color`         | String | The cell shadow color CSS custom property.       |
| `--table-body-cell-shadow-offset-x`      | String | The cell shadow offset x CSS custom property.    |
| `--table-body-cell-shadow-offset-y`      | String | The cell shadow offset y CSS custom property.    |
| `--table-body-cell-shadow-spread`        | String | The cell shadow spread CSS custom property.      |
| `--table-body-cell-transition-duration`  | String | The cell transition duration CSS custom property. |
| `--table-body-cell-transition-mode`      | String | The cell transition mode CSS custom property.    |
| `--table-body-cell-transition-property`  | String | The cell transition property CSS custom property. |
| `--table-body-cell-translate`            | String | The cell translate CSS custom property.          |

# mosaik-table-body-row

Table Body Row - A selectable horizontal grouping of body cells within a table body section.

**Mixins:** Themeable, Selectable, Disableable

## Example

Selectable body row inside a table body:

```html
<mosaik-table selection-mode="single" selection-type="row">
  <mosaik-table-body>
    <mosaik-table-body-row>
      <mosaik-table-body-cell text="Alice"></mosaik-table-body-cell>
      <mosaik-table-body-cell text="alice@example.com"></mosaik-table-body-cell>
    </mosaik-table-body-row>
  </mosaik-table-body>
</mosaik-table>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isSelected`   | `is-selected` |           | `boolean`                                    | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(): void`                                       | Deselects the element.                           |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`  | `(event: Event): void`                           | Handles slot changes to auto-size grid columns when the parent table has no explicit columns. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(): void`                                       | Selects the element.                             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `deselected`   | `DeselectedEvent`      | Fired when the row is deselected.                |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the row is selected.                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for body cells.                 |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                | Type   | Description                                      |
|-----------------------------------------|--------|--------------------------------------------------|
| `--table-body-row-background-color`     | String | The row background color CSS custom property.    |
| `--table-body-row-border-color`         | String | The row border color CSS custom property.        |
| `--table-body-row-border-radius`        | String | The row border radius CSS custom property.       |
| `--table-body-row-border-style`         | String | The row border style CSS custom property.        |
| `--table-body-row-border-width`         | String | The row border width CSS custom property.        |
| `--table-body-row-font-family`          | String | The row font family CSS custom property.         |
| `--table-body-row-font-letter-spacing`  | String | The row font letter spacing CSS custom property. |
| `--table-body-row-font-line-height`     | String | The row font line height CSS custom property.    |
| `--table-body-row-font-size`            | String | The row font size CSS custom property.           |
| `--table-body-row-font-text-decoration` | String | The row font text decoration CSS custom property. |
| `--table-body-row-font-text-transform`  | String | The row font text transform CSS custom property. |
| `--table-body-row-font-weight`          | String | The row font weight CSS custom property.         |
| `--table-body-row-foreground-color`     | String | The row foreground color CSS custom property.    |
| `--table-body-row-gap`                  | String | The row gap CSS custom property.                 |
| `--table-body-row-padding-bottom`       | String | The row padding bottom CSS custom property.      |
| `--table-body-row-padding-left`         | String | The row padding left CSS custom property.        |
| `--table-body-row-padding-right`        | String | The row padding right CSS custom property.       |
| `--table-body-row-padding-top`          | String | The row padding top CSS custom property.         |
| `--table-body-row-shadow`               | String | The row shadow CSS custom property.              |
| `--table-body-row-shadow-blur`          | String | The row shadow blur CSS custom property.         |
| `--table-body-row-shadow-color`         | String | The row shadow color CSS custom property.        |
| `--table-body-row-shadow-offset-x`      | String | The row shadow offset x CSS custom property.     |
| `--table-body-row-shadow-offset-y`      | String | The row shadow offset y CSS custom property.     |
| `--table-body-row-shadow-spread`        | String | The row shadow spread CSS custom property.       |
| `--table-body-row-transition-duration`  | String | The row transition duration CSS custom property. |
| `--table-body-row-transition-mode`      | String | The row transition mode CSS custom property.     |
| `--table-body-row-transition-property`  | String | The row transition property CSS custom property. |
| `--table-body-row-translate`            | String | The row translate CSS custom property.           |

# mosaik-table-body

Table Body - The main content area of a table component, containing rows of data.

**Mixins:** Themeable

## Example

Table body within a table:

```html
<mosaik-table>
  <mosaik-table-body>
    <mosaik-table-row>
      <mosaik-table-cell text="Alice"></mosaik-table-cell>
      <mosaik-table-cell text="Developer"></mosaik-table-cell>
    </mosaik-table-row>
    <mosaik-table-row>
      <mosaik-table-cell text="Bob"></mosaik-table-cell>
      <mosaik-table-cell text="Designer"></mosaik-table-cell>
    </mosaik-table-row>
  </mosaik-table-body>
</mosaik-table>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--table-body-background-color`     | String | The body background color CSS custom property.   |
| `--table-body-border-color`         | String | The body border color CSS custom property.       |
| `--table-body-border-radius`        | String | The body border radius CSS custom property.      |
| `--table-body-border-style`         | String | The body border style CSS custom property.       |
| `--table-body-border-width`         | String | The body border width CSS custom property.       |
| `--table-body-font-family`          | String | The body font family CSS custom property.        |
| `--table-body-font-letter-spacing`  | String | The body font letter spacing CSS custom property. |
| `--table-body-font-line-height`     | String | The body font line height CSS custom property.   |
| `--table-body-font-size`            | String | The body font size CSS custom property.          |
| `--table-body-font-text-decoration` | String | The body font text decoration CSS custom property. |
| `--table-body-font-text-transform`  | String | The body font text transform CSS custom property. |
| `--table-body-font-weight`          | String | The body font weight CSS custom property.        |
| `--table-body-foreground-color`     | String | The body foreground color CSS custom property.   |
| `--table-body-gap`                  | String | The body gap CSS custom property.                |
| `--table-body-padding-bottom`       | String | The body padding bottom CSS custom property.     |
| `--table-body-padding-left`         | String | The body padding left CSS custom property.       |
| `--table-body-padding-right`        | String | The body padding right CSS custom property.      |
| `--table-body-padding-top`          | String | The body padding top CSS custom property.        |
| `--table-body-shadow`               | String | The body shadow CSS custom property.             |
| `--table-body-shadow-blur`          | String | The body shadow blur CSS custom property.        |
| `--table-body-shadow-color`         | String | The body shadow color CSS custom property.       |
| `--table-body-shadow-offset-x`      | String | The body shadow offset x CSS custom property.    |
| `--table-body-shadow-offset-y`      | String | The body shadow offset y CSS custom property.    |
| `--table-body-shadow-spread`        | String | The body shadow spread CSS custom property.      |
| `--table-body-transition-duration`  | String | The body transition duration CSS custom property. |
| `--table-body-transition-mode`      | String | The body transition mode CSS custom property.    |
| `--table-body-transition-property`  | String | The body transition property CSS custom property. |
| `--table-body-translate`            | String | The body translate CSS custom property.          |

# mosaik-table-cell

Table Cell - A single unit within a table's row and column layout.

**Mixins:** Themeable, Selectable, Disableable, TextFormattable, TextOverflowable

## Examples

Basic table cell with text:

```html
<mosaik-table-cell text="Alice"></mosaik-table-cell>
```

Sortable header cell:

```html
<mosaik-table-cell text="Name" key="name" sortable></mosaik-table-cell>
```

## Properties

| Property           | Attribute       | Modifiers | Type                                          | Description                                      |
|--------------------|-----------------|-----------|-----------------------------------------------|--------------------------------------------------|
| `changed`          |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`  | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                 | readonly  | `IEventEmitter<void>`                         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`       |                 |           | `IEventEmitter<IEventDetail>`                 | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`              | `dir`           |           | `FlowDirection`                               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`      |           | `boolean`                                     | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                 | readonly  | `IEventEmitter<void>`                         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`        |                 |           | `TextFormatter \| null`                       | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `isSelected`       | `is-selected`   |           | `boolean`                                     | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `key`              | `key`           |           | `string`                                      | Gets or sets the `key` property.                 |
| `lang`             | `lang`          |           | `string`                                      | The lang property indicates the language of the element's content. |
| `selected`         |                 |           | `IEventEmitter<IEventDetail>`                 | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `sortDirection`    | `sortDirection` |           | `"none" \| SortDirection`                     | Gets or sets the `sortDirection` property.       |
| `sortable`         | `sortable`      |           | `boolean`                                     | Gets or sets the `sortable` property.            |
| `tableSortChanged` |                 | readonly  | `IEventEmitter<ITableSortChangedEventDetail>` | Called when the sort direction changes.<br />Provides reference to `ITableSortChangedEventDetail` as event argument. |
| `text`             | `text`          |           | `string`                                      | Gets or sets the `text` property.                |
| `textOverflow`     | `text-overflow` |           | `TextOverflow`                                | Gets or sets the `textOverflow` property.<br />The default value is `truncate`, which means the text will be truncated if it overflows. |
| `themeName`        |                 |           | `string`                                      | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(): void`                                       | Deselects the element.                           |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(): void`                                       | Selects the element.                             |
| `sort`          | `(direction: "none" \| SortDirection): void`     | Sorts the cell in the specified direction.       |
| `unsort`        | `(): void`                                       | Unsorts the cell.                                |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `deselected`       | `DeselectedEvent`       | Fired when the cell is deselected.               |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `selected`         | `SelectedEvent`         | Fired when the cell is selected.                 |
| `tableSortChanged` | `TableSortChangedEvent` | Fired when the sort direction of the cell has changed. |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description    |
|--------|----------------|
| `icon` | The icon part. |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--table-cell-background-color`     | String | The cell background color CSS custom property.   |
| `--table-cell-border-color`         | String | The cell border color CSS custom property.       |
| `--table-cell-border-radius`        | String | The cell border radius CSS custom property.      |
| `--table-cell-border-width`         | String | The cell border width CSS custom property.       |
| `--table-cell-font-family`          | String | The cell font family CSS custom property.        |
| `--table-cell-font-letter-spacing`  | String | The cell font letter spacing CSS custom property. |
| `--table-cell-font-line-height`     | String | The cell font line height CSS custom property.   |
| `--table-cell-font-size`            | String | The cell font size CSS custom property.          |
| `--table-cell-font-text-decoration` | String | The cell font text decoration CSS custom property. |
| `--table-cell-font-text-transform`  | String | The cell font text transform CSS custom property. |
| `--table-cell-font-weight`          | String | The cell font weight CSS custom property.        |
| `--table-cell-foreground-color`     | String | The cell foreground color CSS custom property.   |
| `--table-cell-gap`                  | String | The cell gap CSS custom property.                |
| `--table-cell-padding-bottom`       | String | The cell padding bottom CSS custom property.     |
| `--table-cell-padding-left`         | String | The cell padding left CSS custom property.       |
| `--table-cell-padding-right`        | String | The cell padding right CSS custom property.      |
| `--table-cell-padding-top`          | String | The cell padding top CSS custom property.        |
| `--table-cell-shadow`               | String | The cell shadow CSS custom property.             |
| `--table-cell-shadow-blur`          | String | The cell shadow blur CSS custom property.        |
| `--table-cell-shadow-color`         | String | The cell shadow color CSS custom property.       |
| `--table-cell-shadow-offset-x`      | String | The cell shadow offset x CSS custom property.    |
| `--table-cell-shadow-offset-y`      | String | The cell shadow offset y CSS custom property.    |
| `--table-cell-shadow-spread`        | String | The cell shadow spread CSS custom property.      |
| `--table-cell-transition-duration`  | String | The cell transition duration CSS custom property. |
| `--table-cell-transition-mode`      | String | The cell transition mode CSS custom property.    |
| `--table-cell-transition-property`  | String | The cell transition property CSS custom property. |
| `--table-cell-translate`            | String | The cell translate CSS custom property.          |

# mosaik-table-footer-cell

Table Footer Cell - A single cell within a table footer row.

**Mixins:** Themeable, Disableable, TextFormattable, TextOverflowable

## Example

Footer cell with summary:

```html
<mosaik-table-footer-cell text="Total: $1,234.00"></mosaik-table-footer-cell>
```

## Properties

| Property       | Attribute       | Modifiers | Type                                         | Description                                      |
|----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |                 |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`          |           | `string`                                     | The text content of the cell.                    |
| `textOverflow` | `text-overflow` |           | `TextOverflow`                               | Gets or sets the `textOverflow` property.<br />The default value is `truncate`, which means the text will be truncated if it overflows. |
| `themeName`    |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--table-footer-cell-background-color`     | String | The cell background color CSS custom property.   |
| `--table-footer-cell-border-color`         | String | The cell border color CSS custom property.       |
| `--table-footer-cell-border-radius`        | String | The cell border radius CSS custom property.      |
| `--table-footer-cell-border-width`         | String | The cell border width CSS custom property.       |
| `--table-footer-cell-font-family`          | String | The cell font family CSS custom property.        |
| `--table-footer-cell-font-letter-spacing`  | String | The cell font letter spacing CSS custom property. |
| `--table-footer-cell-font-line-height`     | String | The cell font line height CSS custom property.   |
| `--table-footer-cell-font-size`            | String | The cell font size CSS custom property.          |
| `--table-footer-cell-font-text-decoration` | String | The cell font text decoration CSS custom property. |
| `--table-footer-cell-font-text-transform`  | String | The cell font text transform CSS custom property. |
| `--table-footer-cell-font-weight`          | String | The cell font weight CSS custom property.        |
| `--table-footer-cell-foreground-color`     | String | The cell foreground color CSS custom property.   |
| `--table-footer-cell-gap`                  | String | The cell gap CSS custom property.                |
| `--table-footer-cell-padding-bottom`       | String | The cell padding bottom CSS custom property.     |
| `--table-footer-cell-padding-left`         | String | The cell padding left CSS custom property.       |
| `--table-footer-cell-padding-right`        | String | The cell padding right CSS custom property.      |
| `--table-footer-cell-padding-top`          | String | The cell padding top CSS custom property.        |
| `--table-footer-cell-shadow`               | String | The cell shadow CSS custom property.             |
| `--table-footer-cell-shadow-blur`          | String | The cell shadow blur CSS custom property.        |
| `--table-footer-cell-shadow-color`         | String | The cell shadow color CSS custom property.       |
| `--table-footer-cell-shadow-offset-x`      | String | The cell shadow offset x CSS custom property.    |
| `--table-footer-cell-shadow-offset-y`      | String | The cell shadow offset y CSS custom property.    |
| `--table-footer-cell-shadow-spread`        | String | The cell shadow spread CSS custom property.      |
| `--table-footer-cell-transition-duration`  | String | The cell transition duration CSS custom property. |
| `--table-footer-cell-transition-mode`      | String | The cell transition mode CSS custom property.    |
| `--table-footer-cell-transition-property`  | String | The cell transition property CSS custom property. |
| `--table-footer-cell-translate`            | String | The cell translate CSS custom property.          |

# mosaik-table-footer-row

Table Footer Row - A horizontal grouping of footer cells within a table footer section.

**Mixins:** Themeable, Disableable

## Example

Footer row inside a table footer:

```html
<mosaik-table>
  <mosaik-table-footer>
    <mosaik-table-footer-row>
      <mosaik-table-footer-cell text="Total"></mosaik-table-footer-cell>
      <mosaik-table-footer-cell text="$1,234.00"></mosaik-table-footer-cell>
    </mosaik-table-footer-row>
  </mosaik-table-footer>
</mosaik-table>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`  | `(event: Event): void`                           | Handles slot changes to auto-size grid columns when the parent table has no explicit columns. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for footer cells.               |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--table-footer-row-background-color`     | String | The row background color CSS custom property.    |
| `--table-footer-row-border-color`         | String | The row border color CSS custom property.        |
| `--table-footer-row-border-radius`        | String | The row border radius CSS custom property.       |
| `--table-footer-row-border-style`         | String | The row border style CSS custom property.        |
| `--table-footer-row-border-width`         | String | The row border width CSS custom property.        |
| `--table-footer-row-font-family`          | String | The row font family CSS custom property.         |
| `--table-footer-row-font-letter-spacing`  | String | The row font letter spacing CSS custom property. |
| `--table-footer-row-font-line-height`     | String | The row font line height CSS custom property.    |
| `--table-footer-row-font-size`            | String | The row font size CSS custom property.           |
| `--table-footer-row-font-text-decoration` | String | The row font text decoration CSS custom property. |
| `--table-footer-row-font-text-transform`  | String | The row font text transform CSS custom property. |
| `--table-footer-row-font-weight`          | String | The row font weight CSS custom property.         |
| `--table-footer-row-foreground-color`     | String | The row foreground color CSS custom property.    |
| `--table-footer-row-gap`                  | String | The row gap CSS custom property.                 |
| `--table-footer-row-padding-bottom`       | String | The row padding bottom CSS custom property.      |
| `--table-footer-row-padding-left`         | String | The row padding left CSS custom property.        |
| `--table-footer-row-padding-right`        | String | The row padding right CSS custom property.       |
| `--table-footer-row-padding-top`          | String | The row padding top CSS custom property.         |
| `--table-footer-row-shadow`               | String | The row shadow CSS custom property.              |
| `--table-footer-row-shadow-blur`          | String | The row shadow blur CSS custom property.         |
| `--table-footer-row-shadow-color`         | String | The row shadow color CSS custom property.        |
| `--table-footer-row-shadow-offset-x`      | String | The row shadow offset x CSS custom property.     |
| `--table-footer-row-shadow-offset-y`      | String | The row shadow offset y CSS custom property.     |
| `--table-footer-row-shadow-spread`        | String | The row shadow spread CSS custom property.       |
| `--table-footer-row-transition-duration`  | String | The row transition duration CSS custom property. |
| `--table-footer-row-transition-mode`      | String | The row transition mode CSS custom property.     |
| `--table-footer-row-transition-property`  | String | The row transition property CSS custom property. |
| `--table-footer-row-translate`            | String | The row translate CSS custom property.           |

# mosaik-table-footer

Table Footer - The bottom section of a table, typically containing summary information or actions.

**Mixins:** Themeable

## Example

Table footer with summary row:

```html
<mosaik-table>
  <mosaik-table-footer>
    <mosaik-table-row>
      <mosaik-table-cell text="Total: 5 records"></mosaik-table-cell>
    </mosaik-table-row>
  </mosaik-table-footer>
</mosaik-table>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--table-footer-background-color`     | String | The footer background color CSS custom property. |
| `--table-footer-border-color`         | String | The footer border color CSS custom property.     |
| `--table-footer-border-radius`        | String | The footer border radius CSS custom property.    |
| `--table-footer-border-style`         | String | The footer border style CSS custom property.     |
| `--table-footer-border-width`         | String | The footer border width CSS custom property.     |
| `--table-footer-font-family`          | String | The footer font family CSS custom property.      |
| `--table-footer-font-letter-spacing`  | String | The footer font letter spacing CSS custom property. |
| `--table-footer-font-line-height`     | String | The footer font line height CSS custom property. |
| `--table-footer-font-size`            | String | The footer font size CSS custom property.        |
| `--table-footer-font-text-decoration` | String | The footer font text decoration CSS custom property. |
| `--table-footer-font-text-transform`  | String | The footer font text transform CSS custom property. |
| `--table-footer-font-weight`          | String | The footer font weight CSS custom property.      |
| `--table-footer-foreground-color`     | String | The footer foreground color CSS custom property. |
| `--table-footer-gap`                  | String | The footer gap CSS custom property.              |
| `--table-footer-padding-bottom`       | String | The footer padding bottom CSS custom property.   |
| `--table-footer-padding-left`         | String | The footer padding left CSS custom property.     |
| `--table-footer-padding-right`        | String | The footer padding right CSS custom property.    |
| `--table-footer-padding-top`          | String | The footer padding top CSS custom property.      |
| `--table-footer-shadow`               | String | The footer shadow CSS custom property.           |
| `--table-footer-shadow-blur`          | String | The footer shadow blur CSS custom property.      |
| `--table-footer-shadow-color`         | String | The footer shadow color CSS custom property.     |
| `--table-footer-shadow-offset-x`      | String | The footer shadow offset x CSS custom property.  |
| `--table-footer-shadow-offset-y`      | String | The footer shadow offset y CSS custom property.  |
| `--table-footer-shadow-spread`        | String | The footer shadow spread CSS custom property.    |
| `--table-footer-transition-duration`  | String | The footer transition duration CSS custom property. |
| `--table-footer-transition-mode`      | String | The footer transition mode CSS custom property.  |
| `--table-footer-transition-property`  | String | The footer transition property CSS custom property. |
| `--table-footer-translate`            | String | The footer translate CSS custom property.        |

# mosaik-table-header-cell

Table Header Cell - A single header cell with optional sorting capabilities.

**Mixins:** Themeable, Disableable, TextFormattable, TextOverflowable

## Example

Sortable header cell:

```html
<mosaik-table-header-cell text="Name" key="name" sortable></mosaik-table-header-cell>
```

## Properties

| Property           | Attribute       | Modifiers | Type                                          | Description                                      |
|--------------------|-----------------|-----------|-----------------------------------------------|--------------------------------------------------|
| `changed`          |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`  | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                 | readonly  | `IEventEmitter<void>`                         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`           |           | `FlowDirection`                               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`      |           | `boolean`                                     | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                 | readonly  | `IEventEmitter<void>`                         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`        |                 |           | `TextFormatter \| null`                       | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `key`              | `key`           |           | `string`                                      | Gets or sets the `key` property.                 |
| `lang`             | `lang`          |           | `string`                                      | The lang property indicates the language of the element's content. |
| `sortDirection`    | `sortDirection` |           | `"none" \| SortDirection`                     | Gets or sets the `sortDirection` property.       |
| `sortable`         | `sortable`      |           | `boolean`                                     | Gets or sets the `sortable` property.            |
| `tableSortChanged` |                 | readonly  | `IEventEmitter<ITableSortChangedEventDetail>` | Called when the sort direction changes.<br />Provides reference to `ITableSortChangedEventDetail` as event argument. |
| `text`             | `text`          |           | `string`                                      | The text content of the cell.                    |
| `textOverflow`     | `text-overflow` |           | `TextOverflow`                                | Gets or sets the `textOverflow` property.<br />The default value is `truncate`, which means the text will be truncated if it overflows. |
| `themeName`        |                 |           | `string`                                      | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `sort`          | `(direction: "none" \| SortDirection): void`     | Sorts the cell in the specified direction.       |
| `unsort`        | `(): void`                                       | Unsorts the cell.                                |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `tableSortChanged` | `TableSortChangedEvent` | Fired when the sort direction of the cell has changed. |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                   |
|--------|-------------------------------|
| `icon` | The sort direction icon part. |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--table-header-cell-background-color`     | String | The cell background color CSS custom property.   |
| `--table-header-cell-border-color`         | String | The cell border color CSS custom property.       |
| `--table-header-cell-border-radius`        | String | The cell border radius CSS custom property.      |
| `--table-header-cell-border-width`         | String | The cell border width CSS custom property.       |
| `--table-header-cell-font-family`          | String | The cell font family CSS custom property.        |
| `--table-header-cell-font-letter-spacing`  | String | The cell font letter spacing CSS custom property. |
| `--table-header-cell-font-line-height`     | String | The cell font line height CSS custom property.   |
| `--table-header-cell-font-size`            | String | The cell font size CSS custom property.          |
| `--table-header-cell-font-text-decoration` | String | The cell font text decoration CSS custom property. |
| `--table-header-cell-font-text-transform`  | String | The cell font text transform CSS custom property. |
| `--table-header-cell-font-weight`          | String | The cell font weight CSS custom property.        |
| `--table-header-cell-foreground-color`     | String | The cell foreground color CSS custom property.   |
| `--table-header-cell-gap`                  | String | The cell gap CSS custom property.                |
| `--table-header-cell-padding-bottom`       | String | The cell padding bottom CSS custom property.     |
| `--table-header-cell-padding-left`         | String | The cell padding left CSS custom property.       |
| `--table-header-cell-padding-right`        | String | The cell padding right CSS custom property.      |
| `--table-header-cell-padding-top`          | String | The cell padding top CSS custom property.        |
| `--table-header-cell-shadow`               | String | The cell shadow CSS custom property.             |
| `--table-header-cell-shadow-blur`          | String | The cell shadow blur CSS custom property.        |
| `--table-header-cell-shadow-color`         | String | The cell shadow color CSS custom property.       |
| `--table-header-cell-shadow-offset-x`      | String | The cell shadow offset x CSS custom property.    |
| `--table-header-cell-shadow-offset-y`      | String | The cell shadow offset y CSS custom property.    |
| `--table-header-cell-shadow-spread`        | String | The cell shadow spread CSS custom property.      |
| `--table-header-cell-transition-duration`  | String | The cell transition duration CSS custom property. |
| `--table-header-cell-transition-mode`      | String | The cell transition mode CSS custom property.    |
| `--table-header-cell-transition-property`  | String | The cell transition property CSS custom property. |
| `--table-header-cell-translate`            | String | The cell translate CSS custom property.          |

# mosaik-table-header-row

Table Header Row - A horizontal grouping of header cells within a table header section.

**Mixins:** Themeable, Disableable

## Example

Header row inside a table header:

```html
<mosaik-table>
  <mosaik-table-header>
    <mosaik-table-header-row>
      <mosaik-table-header-cell text="Name" sortable></mosaik-table-header-cell>
      <mosaik-table-header-cell text="Email"></mosaik-table-header-cell>
    </mosaik-table-header-row>
  </mosaik-table-header>
</mosaik-table>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`  | `(event: Event): void`                           | Handles slot changes to auto-size grid columns when the parent table has no explicit columns. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for header cells.               |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--table-header-row-background-color`     | String | The row background color CSS custom property.    |
| `--table-header-row-border-color`         | String | The row border color CSS custom property.        |
| `--table-header-row-border-radius`        | String | The row border radius CSS custom property.       |
| `--table-header-row-border-style`         | String | The row border style CSS custom property.        |
| `--table-header-row-border-width`         | String | The row border width CSS custom property.        |
| `--table-header-row-font-family`          | String | The row font family CSS custom property.         |
| `--table-header-row-font-letter-spacing`  | String | The row font letter spacing CSS custom property. |
| `--table-header-row-font-line-height`     | String | The row font line height CSS custom property.    |
| `--table-header-row-font-size`            | String | The row font size CSS custom property.           |
| `--table-header-row-font-text-decoration` | String | The row font text decoration CSS custom property. |
| `--table-header-row-font-text-transform`  | String | The row font text transform CSS custom property. |
| `--table-header-row-font-weight`          | String | The row font weight CSS custom property.         |
| `--table-header-row-foreground-color`     | String | The row foreground color CSS custom property.    |
| `--table-header-row-gap`                  | String | The row gap CSS custom property.                 |
| `--table-header-row-padding-bottom`       | String | The row padding bottom CSS custom property.      |
| `--table-header-row-padding-left`         | String | The row padding left CSS custom property.        |
| `--table-header-row-padding-right`        | String | The row padding right CSS custom property.       |
| `--table-header-row-padding-top`          | String | The row padding top CSS custom property.         |
| `--table-header-row-shadow`               | String | The row shadow CSS custom property.              |
| `--table-header-row-shadow-blur`          | String | The row shadow blur CSS custom property.         |
| `--table-header-row-shadow-color`         | String | The row shadow color CSS custom property.        |
| `--table-header-row-shadow-offset-x`      | String | The row shadow offset x CSS custom property.     |
| `--table-header-row-shadow-offset-y`      | String | The row shadow offset y CSS custom property.     |
| `--table-header-row-shadow-spread`        | String | The row shadow spread CSS custom property.       |
| `--table-header-row-transition-duration`  | String | The row transition duration CSS custom property. |
| `--table-header-row-transition-mode`      | String | The row transition mode CSS custom property.     |
| `--table-header-row-transition-property`  | String | The row transition property CSS custom property. |
| `--table-header-row-translate`            | String | The row translate CSS custom property.           |

# mosaik-table-header

Table Header - The top section of a table, typically containing column labels.

**Mixins:** Themeable

## Example

Table header with column labels:

```html
<mosaik-table>
  <mosaik-table-header>
    <mosaik-table-row>
      <mosaik-table-cell text="Name" sortable></mosaik-table-cell>
      <mosaik-table-cell text="Email"></mosaik-table-cell>
      <mosaik-table-cell text="Role"></mosaik-table-cell>
    </mosaik-table-row>
  </mosaik-table-header>
</mosaik-table>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--table-header-background-color`     | String | The header background color CSS custom property. |
| `--table-header-border-color`         | String | The header border color CSS custom property.     |
| `--table-header-border-radius`        | String | The header border radius CSS custom property.    |
| `--table-header-border-style`         | String | The header border style CSS custom property.     |
| `--table-header-border-width`         | String | The header border width CSS custom property.     |
| `--table-header-font-family`          | String | The header font family CSS custom property.      |
| `--table-header-font-letter-spacing`  | String | The header font letter spacing CSS custom property. |
| `--table-header-font-line-height`     | String | The header font line height CSS custom property. |
| `--table-header-font-size`            | String | The header font size CSS custom property.        |
| `--table-header-font-text-decoration` | String | The header font text decoration CSS custom property. |
| `--table-header-font-text-transform`  | String | The header font text transform CSS custom property. |
| `--table-header-font-weight`          | String | The header font weight CSS custom property.      |
| `--table-header-foreground-color`     | String | The header foreground color CSS custom property. |
| `--table-header-gap`                  | String | The header gap CSS custom property.              |
| `--table-header-padding-bottom`       | String | The header padding bottom CSS custom property.   |
| `--table-header-padding-left`         | String | The header padding left CSS custom property.     |
| `--table-header-padding-right`        | String | The header padding right CSS custom property.    |
| `--table-header-padding-top`          | String | The header padding top CSS custom property.      |
| `--table-header-shadow`               | String | The header shadow CSS custom property.           |
| `--table-header-shadow-blur`          | String | The header shadow blur CSS custom property.      |
| `--table-header-shadow-color`         | String | The header shadow color CSS custom property.     |
| `--table-header-shadow-offset-x`      | String | The header shadow offset x CSS custom property.  |
| `--table-header-shadow-offset-y`      | String | The header shadow offset y CSS custom property.  |
| `--table-header-shadow-spread`        | String | The header shadow spread CSS custom property.    |
| `--table-header-transition-duration`  | String | The header transition duration CSS custom property. |
| `--table-header-transition-mode`      | String | The header transition mode CSS custom property.  |
| `--table-header-transition-property`  | String | The header transition property CSS custom property. |
| `--table-header-translate`            | String | The header translate CSS custom property.        |

# mosaik-table-row

Table Row - A horizontal grouping of table cells, representing a single data entry.

**Mixins:** Themeable, Selectable, Disableable

## Example

Table row with cells:

```html
<mosaik-table>
  <mosaik-table-body>
    <mosaik-table-row>
      <mosaik-table-cell text="Alice"></mosaik-table-cell>
      <mosaik-table-cell text="alice@example.com"></mosaik-table-cell>
    </mosaik-table-row>
  </mosaik-table-body>
</mosaik-table>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `isSelected`   | `is-selected` |           | `boolean`                                    | Gets or sets the `isSelected` property.<br />The default value is `false`, which means the element is not selected. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     |               |           | `IEventEmitter<IEventDetail>`                | Called when the `isSelected` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`      | `(): void`                                       | Deselects the element.                           |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChange`  | `(event: Event): void`                           |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`        | `(): void`                                       | Selects the element.                             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `deselected`   | `DeselectedEvent`      | Fired when the row is deselected.                |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the row is selected.                  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--table-row-background-color`     | String | The row background color CSS custom property.    |
| `--table-row-border-color`         | String | The row border color CSS custom property.        |
| `--table-row-border-radius`        | String | The row border radius CSS custom property.       |
| `--table-row-border-style`         | String | The row border style CSS custom property.        |
| `--table-row-border-width`         | String | The row border width CSS custom property.        |
| `--table-row-font-family`          | String | The row font family CSS custom property.         |
| `--table-row-font-letter-spacing`  | String | The row font letter spacing CSS custom property. |
| `--table-row-font-line-height`     | String | The row font line height CSS custom property.    |
| `--table-row-font-size`            | String | The row font size CSS custom property.           |
| `--table-row-font-text-decoration` | String | The row font text decoration CSS custom property. |
| `--table-row-font-text-transform`  | String | The row font text transform CSS custom property. |
| `--table-row-font-weight`          | String | The row font weight CSS custom property.         |
| `--table-row-foreground-color`     | String | The row foreground color CSS custom property.    |
| `--table-row-gap`                  | String | The row gap CSS custom property.                 |
| `--table-row-padding-bottom`       | String | The row padding bottom CSS custom property.      |
| `--table-row-padding-left`         | String | The row padding left CSS custom property.        |
| `--table-row-padding-right`        | String | The row padding right CSS custom property.       |
| `--table-row-padding-top`          | String | The row padding top CSS custom property.         |
| `--table-row-shadow`               | String | The row shadow CSS custom property.              |
| `--table-row-shadow-blur`          | String | The row shadow blur CSS custom property.         |
| `--table-row-shadow-color`         | String | The row shadow color CSS custom property.        |
| `--table-row-shadow-offset-x`      | String | The row shadow offset x CSS custom property.     |
| `--table-row-shadow-offset-y`      | String | The row shadow offset y CSS custom property.     |
| `--table-row-shadow-spread`        | String | The row shadow spread CSS custom property.       |
| `--table-row-transition-duration`  | String | The row transition duration CSS custom property. |
| `--table-row-transition-mode`      | String | The row transition mode CSS custom property.     |
| `--table-row-transition-property`  | String | The row transition property CSS custom property. |
| `--table-row-translate`            | String | The row translate CSS custom property.           |

# mosaik-table

Table - A structured display of data in rows and columns.

**Mixins:** Themeable, Appearanceable

## Example

Basic data table:

```html
<mosaik-table>
  <mosaik-table-header>
    <mosaik-table-row>
      <mosaik-table-cell text="Name" sortable></mosaik-table-cell>
      <mosaik-table-cell text="Role"></mosaik-table-cell>
    </mosaik-table-row>
  </mosaik-table-header>
  <mosaik-table-body>
    <mosaik-table-row>
      <mosaik-table-cell text="Alice"></mosaik-table-cell>
      <mosaik-table-cell text="Admin"></mosaik-table-cell>
    </mosaik-table-row>
  </mosaik-table-body>
</mosaik-table>
```

## Properties

| Property                | Attribute       | Modifiers | Type                                             | Description                                      |
|-------------------------|-----------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `alternating`           | `alternating`   |           | `boolean`                                        | Gets or sets the `alternating` property.         |
| `appearance`            | `appearance`    |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `caption`               | `caption`       |           | `string`                                         | Gets or sets the `caption` property.             |
| `changed`               |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columns`               | `columns`       |           | `string`                                         | Gets or sets the `columns` property.             |
| `columnsChanged`        |                 | readonly  | `IEventEmitter<ITableColumnsChangedEventDetail>` | Called when the columns of the table has changed.<br />Provides reference to `ITableColumnsChangedEventDetail` as event argument. |
| `connected`             |                 | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                   | `dir`           |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`          |                 | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`                  | `lang`          |           | `string`                                         | The lang property indicates the language of the element's content. |
| `selectedCells`         |                 | readonly  | `readonly TableBodyCellElement[]`                | Gets the currently selected cells.               |
| `selectedRows`          |                 | readonly  | `readonly TableBodyRowElement[]`                 | Gets the currently selected rows.                |
| `selectionMode`         | `selectionMode` |           | `TableSelectionMode`                             | Gets or sets the `selectionMode` property.<br />Defines whether selection is disabled, single, or multiple.<br />If set to `none`, the configured `selectionType` remains available<br />but has no behavioral effect. |
| `selectionType`         | `selectionType` |           | `TableSelectionType`                             | Gets or sets the `selectionType` property.       |
| `tableSelectionChanged` |                 | readonly  | `IEventEmitter<ITableSelectionChangedEventDetail>` | Called when the selection of the table has changed.<br />Provides reference to `ITableSelectionChangedEventDetail` as event argument. |
| `themeName`             |                 |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `handleCellSelect` | `(cell: TableBodyCellElement): void`             | Handles cell selection triggered by a child `TableBodyCellElement`. |
| `handleRowSelect`  | `(row: TableBodyRowElement): void`               | Handles row selection triggered by a child `TableBodyRowElement`. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event                   | Type                         | Description                                      |
|-------------------------|------------------------------|--------------------------------------------------|
| `changed`               | `PropertyChangedEvent`       | Emitted when any attribute changes before update |
| `columnsChanged`        | `TableColumnsChangedEvent`   | Fired when the columns of the table has changed. |
| `connected`             | `ConnectedEvent`             | Emitted when the element is connected to the DOM |
| `disconnected`          | `DisconnectedEvent`          | Emitted when the element is disconnected from the DOM |
| `tableSelectionChanged` | `TableSelectionChangedEvent` | Fired when the selection of the table has changed. |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `caption` | The caption part. |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--table-alternating-color`    | String | The alternating color CSS custom property.    |
| `--table-background-color`     | String | The background color CSS custom property.     |
| `--table-border-color`         | String | The border color CSS custom property.         |
| `--table-border-radius`        | String | The border radius CSS custom property.        |
| `--table-border-style`         | String | The border style CSS custom property.         |
| `--table-border-width`         | String | The border width CSS custom property.         |
| `--table-font-family`          | String | The font family CSS custom property.          |
| `--table-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--table-font-line-height`     | String | The font line height CSS custom property.     |
| `--table-font-size`            | String | The font size CSS custom property.            |
| `--table-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--table-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--table-font-weight`          | String | The font weight CSS custom property.          |
| `--table-foreground-color`     | String | The foreground color CSS custom property.     |
| `--table-gap`                  | String | The gap CSS custom property.                  |
| `--table-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--table-padding-left`         | String | The padding left CSS custom property.         |
| `--table-padding-right`        | String | The padding right CSS custom property.        |
| `--table-padding-top`          | String | The padding top CSS custom property.          |
| `--table-shadow`               | String | The shadow CSS custom property.               |
| `--table-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--table-shadow-color`         | String | The shadow color CSS custom property.         |
| `--table-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--table-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--table-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--table-transition-duration`  | String | The transition duration CSS custom property.  |
| `--table-transition-mode`      | String | The transition mode CSS custom property.      |
| `--table-transition-property`  | String | The transition property CSS custom property.  |
| `--table-translate`            | String | The translate CSS custom property.            |

# TextBoxElement - Single-line text input field

## Description
The Text Box component is used to input single-line text or data. It provides a field where users can type or paste information. Text Boxes are commonly used for various types of user input, such as usernames, search queries, or short messages. It supports various input modes, validation, formatting, and accessibility features.

## Element
- **Tag**: `mosaik-textbox`
- **Category**: Forms / Inputs

## Slots
- `prefix` - Content before the input field (icons, labels)
- `suffix` - Content after the input field (icons, buttons)
- `label` - Label text for the input
- `hint` - Hint/help text below the input

## CSS Parts
- `focusRing` - The focus ring indicator
- `prefix` - The prefix content container
- `inner` - The inner input wrapper
- `label` - The label text container
- `input` - The actual input element
- `suffix` - The suffix content container
- `hint` - The hint text container

## CSS Custom Properties
- `--text-box-background-color` - Background color
- `--text-box-border-color` - Border color
- `--text-box-border-radius` - Border radius
- `--text-box-border-style` - Border style
- `--text-box-border-width` - Border width
- `--text-box-focus-ring-outward-offset` - Focus ring offset
- `--text-box-font-family` - Font family
- `--text-box-font-size` - Font size
- `--text-box-font-weight` - Font weight
- `--text-box-foreground-color` - Text color
- `--text-box-padding-top` - Top padding
- `--text-box-padding-right` - Right padding
- `--text-box-padding-bottom` - Bottom padding
- `--text-box-padding-left` - Left padding
- `--text-box-gap` - Gap between elements
- `--text-box-transition-duration` - Transition duration
- `--text-box-transition-mode` - Transition easing mode
- `--text-box-transition-property` - Transition properties
- `--text-box-shadow` - Shadow effect

## Dependencies
- `mosaik-button` - Clear button
- `mosaik-focus-ring` - Focus indicator

## Events
- `cleared` - Fired when the value is cleared

## Examples

### Basic text input
```html
<mosaik-textbox 
    label="Username" 
    placeholder="Enter your username" 
    required>
</mosaik-textbox>
```

### With prefix and suffix icons
```html
<mosaik-textbox 
    label="Email" 
    placeholder="you@example.com">
    <mosaik-icon slot="prefix" data="email-icon"></mosaik-icon>
    <mosaik-icon slot="suffix" data="check-icon"></mosaik-icon>
</mosaik-textbox>
```

### With hint text
```html
<mosaik-textbox 
    label="Password" 
    type="password"
    hint="Must be at least 8 characters">
</mosaik-textbox>
```

### Clearable input
```html
<mosaik-textbox 
    label="Search" 
    is-clearable="true"
    placeholder="Type to search...">
</mosaik-textbox>
```

### With validation
```html
<mosaik-textbox 
    label="Phone" 
    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
    is-invalid="false"
    hint="Format: 123-456-7890">
</mosaik-textbox>
```

# mosaik-text-format

Text Format - A user interface component for formatting and styling text content.

**Mixins:** Themeable

## Example

```html
<mosaik-text-format text="This is an example of a {0} Text Format component.">
   <template>
      <b>bold</b>
  </template>
</mosaik-text-format>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `text`         | `text`    |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method               | Type                                             | Description                                      |
|----------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`         | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`               | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getTemplateByIndex` | `(index: number): string \| null`                |                                                  |
| `off`                | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                 | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`      | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--text-format-font-family`          | String | The format font family CSS custom property.      |
| `--text-format-font-letter-spacing`  | String | The format font letter spacing CSS custom property. |
| `--text-format-font-line-height`     | String | The format font line height CSS custom property. |
| `--text-format-font-size`            | String | The format font size CSS custom property.        |
| `--text-format-font-text-decoration` | String | The format font text decoration CSS custom property. |
| `--text-format-font-text-transform`  | String | The format font text transform CSS custom property. |
| `--text-format-font-weight`          | String | The format font weight CSS custom property.      |
| `--text-format-gap`                  | String | The format gap CSS custom property.              |
| `--text-format-padding-bottom`       | String | The format padding bottom CSS custom property.   |
| `--text-format-padding-left`         | String | The format padding left CSS custom property.     |
| `--text-format-padding-right`        | String | The format padding right CSS custom property.    |
| `--text-format-padding-top`          | String | The format padding top CSS custom property.      |
| `--text-format-shadow`               | String | The format shadow CSS custom property.           |
| `--text-format-shadow-blur`          | String | The format shadow blur CSS custom property.      |
| `--text-format-shadow-color`         | String | The format shadow color CSS custom property.     |
| `--text-format-shadow-offset-x`      | String | The format shadow offset x CSS custom property.  |
| `--text-format-shadow-offset-y`      | String | The format shadow offset y CSS custom property.  |
| `--text-format-shadow-spread`        | String | The format shadow spread CSS custom property.    |
| `--text-format-transition-duration`  | String | The format transition duration CSS custom property. |
| `--text-format-transition-mode`      | String | The format transition mode CSS custom property.  |
| `--text-format-transition-property`  | String | The format transition property CSS custom property. |
| `--text-format-translate`            | String | The format translate CSS custom property.        |

# mosaik-text

Text - A fundamental typography component for displaying formatted text content with comprehensive styling options.

**Mixins:** Themeable, Variantable, Disableable, TextFormattable

## Examples

Basic text content:

```html
<mosaik-text>Welcome to our application</mosaik-text>
```

Text with alignment and variant:

```html
<mosaik-text variant="primary" alignment="center">
  Centered primary text
</mosaik-text>
```

## Properties

| Property       | Attribute   | Modifiers | Type                                         | Description                                      |
|----------------|-------------|-----------|----------------------------------------------|--------------------------------------------------|
| `alignment`    | `alignment` |           | `TextAlignment`                              | Gets or sets the `alignment` property.<br /><br />Possible values are:<br />* `center` - centers the text horizontally within the element<br />* `justify` - stretches the text to fill the width of the element, adjusting spacing as needed<br />* `left` - aligns the text to the left edge of the element (default)<br />* `right` - aligns the text to the right edge of the element |
| `changed`      |             | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |             | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`       |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`  |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |             | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |             |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`      |           | `string`                                     | The lang property indicates the language of the element's content. |
| `marker`       | `marker`    |           | `string \| boolean \| null \| undefined`     | Gets or sets the `marker` property.              |
| `maxLength`    | `maxLength` |           | `number \| null`                             | Gets or sets the `maxLength` property.           |
| `maxLines`     | `maxLines`  |           | `number \| null`                             | Gets or sets the `maxLines` property.            |
| `readonly`     | `readonly`  |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `text`         |             |           | `string \| null \| undefined`                | Gets or sets the `text` property.                |
| `themeName`    |             |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `truncate`     | `truncate`  |           | `boolean`                                    | Gets or sets the `truncate` property.            |
| `variant`      | `variant`   |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `wrap`         | `wrap`      |           | `boolean`                                    | Gets or sets the `wrap` property.                |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `mark`          | `(value: string \| boolean): void`               | Mark the `text` by the given `value`. If the value is a boolean `true`, the text will be marked completely. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `text`  | Primary text content area for displaying formatted text |

## CSS Shadow Parts

| Part   | Description                                      |
|--------|--------------------------------------------------|
| `text` | The paragraph element containing the text content |

## CSS Custom Properties

| Property                      | Type   | Description                                      |
|-------------------------------|--------|--------------------------------------------------|
| `--text-background-color`     | String | The background color of the text container       |
| `--text-border-color`         | String | The border color of the text container           |
| `--text-border-radius`        | String | The border radius for text container styling     |
| `--text-border-style`         | String | The border style for text container              |
| `--text-border-width`         | String | The border width for text container              |
| `--text-font-decoration`      | String | The text decoration style (underline, line-through, etc.) |
| `--text-font-family`          | String | The font family for text content                 |
| `--text-font-letter-spacing`  | String | The letter spacing for text content              |
| `--text-font-line-height`     | String | The line height for text content                 |
| `--text-font-size`            | String | The font size for text content                   |
| `--text-font-text-decoration` | String | The font text decoration CSS custom property.    |
| `--text-font-text-transform`  | String | The font text transform CSS custom property.     |
| `--text-font-transform`       | String | The text transformation (uppercase, lowercase, capitalize) |
| `--text-font-weight`          | String | The font weight for text content                 |
| `--text-foreground-color`     | String | The text color for primary content               |
| `--text-gap`                  | String | The gap between text elements when multiple      |
| `--text-padding-bottom`       | String | The bottom padding for text container            |
| `--text-padding-left`         | String | The left padding for text container              |
| `--text-padding-right`        | String | The right padding for text container             |
| `--text-padding-top`          | String | The top padding for text container               |
| `--text-shadow`               | String | The text shadow effect for enhanced visibility   |
| `--text-shadow-blur`          | String | The shadow blur CSS custom property.             |
| `--text-shadow-color`         | String | The shadow color CSS custom property.            |
| `--text-shadow-offset-x`      | String | The shadow offset x CSS custom property.         |
| `--text-shadow-offset-y`      | String | The shadow offset y CSS custom property.         |
| `--text-shadow-spread`        | String | The shadow spread CSS custom property.           |
| `--text-transition-duration`  | String | The animation duration for text changes          |
| `--text-transition-mode`      | String | The animation easing mode for text transitions   |
| `--text-transition-property`  | String | The CSS properties to animate during transitions |
| `--text-translate`            | String | The translate CSS custom property.               |

# mosaik-textbox

Text Box - A user interface component for entering single-line text.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Appearanceable, Variantable, Labelable, Invalidable, Busyable, Focusable

## Example

```html
<mosaik-textbox name="username" required></mosaik-textbox>
```

## Properties

| Property           | Attribute          | Modifiers | Type                                         | Description                                      |
|--------------------|--------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`       | `appearance`       |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`     | `autocomplete`     |           | `boolean`                                    | The autocomplete property specifies whether the component should have autocomplete on or off.<br />If `true`, the component automatically complete values based on values that the user has entered before. |
| `autofocus`        |                    |           | `boolean`                                    | Determines whether the component is autofocus or not.<br />If `true`, the component will receive focus when the page loads. |
| `changed`          |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`          |                    |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`        |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`              |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`         |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`        |                    |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `invalid`          | `invalid`          |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isBusy`           | `is-busy`          |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isClearable`      | `is-clearable`     |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isFocused`        | `is-focused`       |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `keyboard`         | `keyboard`         |           | `TextKeyboardMode`                           | Determines the virtual keyboard mode.<br />The virtual keyboard is used on mobile devices.<br />It displays a virtual keyboard that is optimized for entering |
| `label`            |                    |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`             | `lang`             |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxlength`        | `maxlength`        |           | `number \| null`                             | Determines the maximum length of the component value. |
| `minlength`        | `minlength`        |           | `number \| null`                             | Determines the minimum length of the component value. |
| `multiline`        | `multiline`        |           | `boolean`                                    | Determines whether the component is multiline or not.<br />If `true`, the component will be multiline able. |
| `multilineMaxRows` | `multilineMaxRows` |           | `number \| null`                             | Determines the maximum number of rows to display when `multiline` is `true`. |
| `multilineRows`    | `multilineRows`    |           | `number`                                     | Determines the number of rows to display when `multiline` is `true`. |
| `name`             | `name`             |           | `string`                                     | The name of the component.                       |
| `parser`           |                    |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `pattern`          | `pattern`          |           | `string`                                     | The pattern is used to validate the value of the component. |
| `placeholder`      |                    |           | `string`                                     | The placeholder is a short hint that is displayed in the component when it is empty. |
| `readonly`         | `readonly`         |           | `boolean`                                    | Determines whether the component is readonly or not.<br />If `true`, the component will be readonly. |
| `required`         | `required`         |           | `boolean`                                    | Determines whether the component is required or not.<br />If `true`, the component will require a value when submitted. |
| `resize`           | `resize`           |           | `ResizeMode`                                 | Gets or sets the `resize` property.              |
| `state`            | `state`            |           | `InputState`                                 | Gets or sets the `state` property.               |
| `textAlign`        | `textAlign`        |           | `TextAlignment`                              | Determines the text alignment of the component.  |
| `themeName`        |                    |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`             | `type`             |           | `TextBoxType`                                | The type is determined how the validation is performed. |
| `value`            | `value`            |           | `string`                                     | The value of the component.                      |
| `variant`          | `variant`          |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       | Removes focus from the element.                  |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       | Sets focus to the element.                       |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | The prefix slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The suffix slot.                                 |

## CSS Shadow Parts

| Part           | Description            |
|----------------|------------------------|
| `clear`        | The clear part.        |
| `focusRing`    | the focus ring part.   |
| `inner`        | the inner part.        |
| `input`        | the input part.        |
| `label`        | the label part.        |
| `prefix`       | the prefix part.       |
| `progressRing` | The progressRing part. |
| `suffix`       | the suffix part.       |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--text-box-background-color`          | Color  | The background color.                            |
| `--text-box-border-color`              | Color  | The border color.                                |
| `--text-box-border-radius`             | String | The border radius.                               |
| `--text-box-border-style`              | String | The border style.                                |
| `--text-box-border-width`              | String | The border width.                                |
| `--text-box-focus-ring-outward-offset` | String | The focus ring outward offset.                   |
| `--text-box-focus-ring-width`          | String | The box focus ring width CSS custom property.    |
| `--text-box-font-family`               | String | The font family.                                 |
| `--text-box-font-letter-spacing`       | String | The box font letter spacing CSS custom property. |
| `--text-box-font-line-height`          | String | The box font line height CSS custom property.    |
| `--text-box-font-size`                 | String | The font size.                                   |
| `--text-box-font-text-decoration`      | String | The box font text decoration CSS custom property. |
| `--text-box-font-text-transform`       | String | The box font text transform CSS custom property. |
| `--text-box-font-weight`               | String | The font weight.                                 |
| `--text-box-foreground-color`          | Color  | The foreground color.                            |
| `--text-box-gap`                       | String | The gap.                                         |
| `--text-box-height`                    | String | The box height CSS custom property.              |
| `--text-box-padding-bottom`            | String | The padding bottom.                              |
| `--text-box-padding-left`              | String | The padding left.                                |
| `--text-box-padding-right`             | String | The padding right.                               |
| `--text-box-padding-top`               | String | The padding top.                                 |
| `--text-box-prefix-icon-size`          | String | The box prefix icon size CSS custom property.    |
| `--text-box-shadow`                    | String | The shadow.                                      |
| `--text-box-shadow-blur`               | String | The box shadow blur CSS custom property.         |
| `--text-box-shadow-color`              | String | The box shadow color CSS custom property.        |
| `--text-box-shadow-offset-x`           | String | The box shadow offset x CSS custom property.     |
| `--text-box-shadow-offset-y`           | String | The box shadow offset y CSS custom property.     |
| `--text-box-shadow-spread`             | String | The box shadow spread CSS custom property.       |
| `--text-box-suffix-icon-size`          | String | The box suffix icon size CSS custom property.    |
| `--text-box-transition-duration`       | String | The transition duration.                         |
| `--text-box-transition-mode`           | String | The transition mode.                             |
| `--text-box-transition-property`       | String | The transition property.                         |
| `--text-box-translate`                 | String | The box translate CSS custom property.           |

# mosaik-thumb

Thumb - A draggable handle used in slider, scrollbar, and range control components.

**Mixins:** Themeable, Disableable

## Examples

Basic thumb for a slider:

```html
<div class="slider-track">
  <mosaik-thumb id="sliderThumb" edge="none"></mosaik-thumb>
</div>

<style>
  .slider-track {
    position: relative;
    width: 200px;
    height: 4px;
    background: #e0e0e0;
  }

  mosaik-thumb {
    position: absolute;
    top: -6px;
    cursor: grab;
  }
</style>
```

Thumb at minimum edge:

```html
<mosaik-thumb edge="min"></mosaik-thumb>
```

Disabled thumb:

```html
<mosaik-thumb disabled edge="none"></mosaik-thumb>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `edge`         | `edge`     |           | `ThumbEdge`                                  | Gets or sets the `edge` property.                |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                       | Type   | Description                                   |
|--------------------------------|--------|-----------------------------------------------|
| `--thumb-background-color`     | String | Background color of the thumb handle          |
| `--thumb-border-color`         | String | Border color of the thumb                     |
| `--thumb-border-radius`        | String | Border radius for rounded corners             |
| `--thumb-border-style`         | String | Border style (solid, dashed, etc.)            |
| `--thumb-border-width`         | String | Border width of the thumb                     |
| `--thumb-font-family`          | String | The font family CSS custom property.          |
| `--thumb-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--thumb-font-line-height`     | String | The font line height CSS custom property.     |
| `--thumb-font-size`            | String | The font size CSS custom property.            |
| `--thumb-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--thumb-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--thumb-font-weight`          | String | The font weight CSS custom property.          |
| `--thumb-gap`                  | String | The gap CSS custom property.                  |
| `--thumb-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--thumb-padding-left`         | String | The padding left CSS custom property.         |
| `--thumb-padding-right`        | String | The padding right CSS custom property.        |
| `--thumb-padding-top`          | String | The padding top CSS custom property.          |
| `--thumb-shadow`               | String | The shadow CSS custom property.               |
| `--thumb-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--thumb-shadow-color`         | String | The shadow color CSS custom property.         |
| `--thumb-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--thumb-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--thumb-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--thumb-transition-duration`  | String | Duration of state transitions                 |
| `--thumb-transition-mode`      | String | Timing function for animations                |
| `--thumb-transition-property`  | Array  | CSS properties to animate                     |
| `--thumb-translate`            | String | The translate CSS custom property.            |

# mosaik-thumbnail

Thumbnail - A versatile media preview component that displays images, videos, audio, maps, or fallback icons.

**Mixins:** Themeable, Disableable

## Examples

Image thumbnail:

```html
<mosaik-thumbnail id="imgThumb"></mosaik-thumbnail>
<script>
  const thumb = document.querySelector('#imgThumb');
  thumb.preview = {
    type: 'image',
    url: 'photo.jpg',
    alt: 'Vacation photo'
  };
</script>
```

Video thumbnail with poster:

```html
<mosaik-thumbnail id="vidThumb"></mosaik-thumbnail>
<script>
  const thumb = document.querySelector('#vidThumb');
  thumb.preview = {
    type: 'video',
    url: 'presentation.mp4',
    poster: 'poster.jpg'
  };
</script>
```

Map location thumbnail:

```html
<mosaik-thumbnail id="mapThumb"></mosaik-thumbnail>
<script>
  const thumb = document.querySelector('#mapThumb');
  thumb.preview = {
    type: 'map',
    latitude: 40.7128,
    longitude: -74.0060,
    zoom: 12,
    provider: 'openstreetmap',
    label: 'New York City'
  };
</script>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                             | Description                                      |
|----------------|------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled` |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `kind`         |            | readonly  | `"map" \| "image" \| "video" \| "audio" \| "other"` | Gets the `kind` property.<br />The `kind` property represents the kind of preview to display. |
| `lang`         | `lang`     |           | `string`                                         | The lang property indicates the language of the element's content. |
| `preview`      |            |           | `ThumbnailPreview \| null`                       | Gets or sets the `file` property.                |
| `themeName`    |            |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                           | Type   | Description                                   |
|------------------------------------|--------|-----------------------------------------------|
| `--thumbnail-font-family`          | String | The font family CSS custom property.          |
| `--thumbnail-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--thumbnail-font-line-height`     | String | The font line height CSS custom property.     |
| `--thumbnail-font-size`            | String | The font size CSS custom property.            |
| `--thumbnail-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--thumbnail-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--thumbnail-font-weight`          | String | The font weight CSS custom property.          |
| `--thumbnail-gap`                  | String | The gap CSS custom property.                  |
| `--thumbnail-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--thumbnail-padding-left`         | String | The padding left CSS custom property.         |
| `--thumbnail-padding-right`        | String | The padding right CSS custom property.        |
| `--thumbnail-padding-top`          | String | The padding top CSS custom property.          |
| `--thumbnail-shadow`               | String | The shadow CSS custom property.               |
| `--thumbnail-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--thumbnail-shadow-color`         | String | The shadow color CSS custom property.         |
| `--thumbnail-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--thumbnail-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--thumbnail-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--thumbnail-transition-duration`  | String | The transition duration CSS custom property.  |
| `--thumbnail-transition-mode`      | String | The transition mode CSS custom property.      |
| `--thumbnail-transition-property`  | String | The transition property CSS custom property.  |
| `--thumbnail-translate`            | String | The translate CSS custom property.            |

# mosaik-tick-bar

TickBar - A visual scale showing interval markers along a slider or range control.

**Mixins:** Themeable, Disableable, Orientable

## Examples

Basic tick bar for a slider (0-100, every 10):

```html
<div class="slider-container">
  <input type="range" min="0" max="100" step="10">
  <mosaik-tick-bar
    min="0"
    max="100"
    interval="10"
    show-labels>
  </mosaik-tick-bar>
</div>
```

Custom label formatter:

```html
<mosaik-tick-bar
  id="priceBar"
  min="0"
  max="500"
  interval="100"
  show-labels
  label-position="after">
</mosaik-tick-bar>

<script>
  const bar = document.getElementById('priceBar');
  bar.labelAccessor = (value, index) => `$${value}`;
</script>
```

Vertical tick bar without labels:

```html
<mosaik-tick-bar
  orientation="vertical"
  min="0"
  max="10"
  interval="1">
</mosaik-tick-bar>
```

Temperature scale with custom labels:

```html
<mosaik-tick-bar
  id="tempScale"
  min="-20"
  max="40"
  interval="10"
  show-labels
  disabled>
</mosaik-tick-bar>

<script>
  document.getElementById('tempScale').labelAccessor = (value) => `${value}°C`;
</script>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `interval`      | `interval`      |           | `number`                                     | Gets or sets the `interval` property.            |
| `labelAccessor` |                 |           | `(value: number, index: number) => string`   | Gets or sets the `labelAccessor` property.       |
| `labelPosition` | `labelPosition` |           | `TickLabelPosition`                          | Gets or sets the `labelPosition` property.       |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `max`           | `max`           |           | `number`                                     | Gets or sets the `max` property.                 |
| `min`           | `min`           |           | `number`                                     | Gets or sets the `min` property.                 |
| `orientation`   | `orientation`   |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `showLabels`    | `showLabels`    |           | `boolean`                                    | Gets or sets the `showLabels` property.          |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `ticks`         |                 |           | `number[]`                                   | Gets the `ticks` property.                       |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part    | Description                    |
|---------|--------------------------------|
| `label` | Text label for each tick mark  |
| `tick`  | Individual tick mark container |

## CSS Custom Properties

| Property                          | Type   | Description                                  |
|-----------------------------------|--------|----------------------------------------------|
| `--tick-bar-background-color`     | String | Background color of the tick bar             |
| `--tick-bar-border-color`         | String | Border color of tick marks                   |
| `--tick-bar-border-radius`        | String | Border radius for tick marks                 |
| `--tick-bar-border-style`         | String | Border style of tick marks                   |
| `--tick-bar-border-width`         | String | Border width of tick marks                   |
| `--tick-bar-font-family`          | String | Font family for tick labels                  |
| `--tick-bar-font-letter-spacing`  | String | Letter spacing for labels                    |
| `--tick-bar-font-line-height`     | String | Line height for labels                       |
| `--tick-bar-font-size`            | String | Font size for tick labels                    |
| `--tick-bar-font-text-decoration` | String | Text decoration for labels                   |
| `--tick-bar-font-text-transform`  | String | Text transform for labels                    |
| `--tick-bar-font-weight`          | String | Font weight for labels                       |
| `--tick-bar-foreground-color`     | String | Color of tick marks and labels               |
| `--tick-bar-gap`                  | String | Spacing between tick marks                   |
| `--tick-bar-padding-bottom`       | String | Bottom padding                               |
| `--tick-bar-padding-left`         | String | Left padding                                 |
| `--tick-bar-padding-right`        | String | Right padding                                |
| `--tick-bar-padding-top`          | String | Top padding                                  |
| `--tick-bar-shadow`               | String | Shadow applied to tick marks                 |
| `--tick-bar-shadow-blur`          | String | The bar shadow blur CSS custom property.     |
| `--tick-bar-shadow-color`         | String | The bar shadow color CSS custom property.    |
| `--tick-bar-shadow-offset-x`      | String | The bar shadow offset x CSS custom property. |
| `--tick-bar-shadow-offset-y`      | String | The bar shadow offset y CSS custom property. |
| `--tick-bar-shadow-spread`        | String | The bar shadow spread CSS custom property.   |
| `--tick-bar-tick-height`          | String | Height of individual tick marks              |
| `--tick-bar-tick-size`            | String | General size of tick marks                   |
| `--tick-bar-tick-text-gap`        | String | Gap between tick mark and label              |
| `--tick-bar-tick-width`           | String | Width of individual tick marks               |
| `--tick-bar-transition-duration`  | String | Transition duration                          |
| `--tick-bar-transition-mode`      | String | Transition timing function                   |
| `--tick-bar-transition-property`  | String | Properties to transition                     |
| `--tick-bar-translate`            | String | The bar translate CSS custom property.       |

# mosaik-tile-list-item

The `TileListItemElement` element.

**Mixins:** Themeable

## Example

```html
<mosaik-tile-list-item col="1" row="1">
  <img src="image.jpg" alt="Tile">
</mosaik-tile-list-item>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `col`          | `col`         |           | `number`                                     | Gets or sets the `col` property.                 |
| `colSpan`      | `colSpan`     |           | `number`                                     | Gets or sets the `colSpan` property.             |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `order`        | `order`       |           | `number`                                     | Gets or sets the `order` property.               |
| `reorderable`  | `reorderable` |           | `boolean`                                    | Gets or sets the `reorderable` property.         |
| `resizable`    | `resizable`   |           | `boolean`                                    | Gets or sets the `resizable` property.           |
| `row`          | `row`         |           | `number`                                     | Gets or sets the `row` property.                 |
| `rowSpan`      | `rowSpan`     |           | `number`                                     | Gets or sets the `rowSpan` property.             |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-tile-list

TileList - A responsive grid container that arranges child items in a configurable tile layout.

Creates a CSS Grid-based layout with customizable columns, row heights, and spacing.
Ideal for displaying cards, images, or other content in an organized grid pattern.
Supports drag-and-drop reordering of tiles.

**Mixins:** Themeable

## Example

```html
<!-- Basic tile grid -->
<mosaik-tile-list cols="3" row-height="200px" gutter-size="16px">
  <mosaik-tile-list-item>
    <img src="image1.jpg" alt="Image 1">
  </mosaik-tile-list-item>
  <mosaik-tile-list-item>
    <img src="image2.jpg" alt="Image 2">
  </mosaik-tile-list-item>
  <mosaik-tile-list-item>
    <img src="image3.jpg" alt="Image 3">
  </mosaik-tile-list-item>
</mosaik-tile-list>

<!-- Responsive card grid -->
<mosaik-tile-list cols="4" auto-flow="row" gutter-size="24px">
  <mosaik-tile-list-item>
    <div class="card">Card content 1</div>
  </mosaik-tile-list-item>
  <mosaik-tile-list-item>
    <div class="card">Card content 2</div>
  </mosaik-tile-list-item>
</mosaik-tile-list>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `autoFlow`     | `autoFlow`   |           | `AutoFlow`                                   | Gets or sets the `autoFlow` property.            |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cols`         | `cols`       |           | `number`                                     | Gets or sets the `cols` property.                |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `gutterSize`   | `gutterSize` |           | `string`                                     | Gets or sets the `gutterSize` property.          |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `rowHeight`    | `rowHeight`  |           | `string`                                     | Gets or sets the `rowHeight` property.           |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                     |
|-------------|---------------------------------|
| `tile-list` | The main grid container element |

## CSS Custom Properties

| Property                 | Type   | Description                                      |
|--------------------------|--------|--------------------------------------------------|
| `--tile-list-auto-flow`  | String | Grid auto-flow direction (row \| column \| row dense \| column dense) |
| `--tile-list-cols`       | Number | Number of grid columns (default: var(--cols))    |
| `--tile-list-gap`        | String | Spacing between grid items                       |
| `--tile-list-row-height` | String | Height of each grid row                          |

# mosaik-tile-manager-tile

The tile component is used within the `mosaik-tile-manager` as a container
for displaying various types of information.

**Mixins:** Themeable

## Examples

Basic tile spanning two columns:

```html
<mosaik-tile-manager-tile col-span="2" row-span="1">
  <p>Tile content goes here</p>
</mosaik-tile-manager-tile>
```

Maximized tile with resize and fullscreen disabled:

```html
<mosaik-tile-manager-tile maximized disable-resize disable-fullscreen col-span="3" row-span="2">
  <p>Full-width content</p>
</mosaik-tile-manager-tile>
```

## Properties

| Property            | Attribute           | Modifiers | Type                                          | Description                                      |
|---------------------|---------------------|-----------|-----------------------------------------------|--------------------------------------------------|
| `changed`           |                     | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`  | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `colSpan`           | `colSpan`           |           | `number`                                      | Gets or sets the `colSpan` property.             |
| `colStart`          | `colStart`          |           | `number \| null`                              | Gets or sets the `colStart` property.            |
| `connected`         |                     | readonly  | `IEventEmitter<void>`                         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `cssContainer`      |                     | readonly  | `HTMLElement \| null`                         | Gets the CSS grid container from the tile manager. |
| `dir`               | `dir`               |           | `FlowDirection`                               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disableFullscreen` | `disableFullscreen` |           | `boolean`                                     | Gets or sets the `disableFullscreen` property.   |
| `disableMaximize`   | `disableMaximize`   |           | `boolean`                                     | Gets or sets the `disableMaximize` property.     |
| `disableResize`     | `disableResize`     |           | `boolean`                                     | Gets or sets the `disableResize` property.       |
| `disconnected`      |                     | readonly  | `IEventEmitter<void>`                         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fullscreen`        |                     | readonly  | `boolean`                                     | Indicates whether the tile occupies the whole screen. |
| `headerRef`         |                     | readonly  | `Ref<HTMLDivElement>`                         | Gets the header reference for tile-header drag mode. |
| `isDraggable`       |                     | readonly  | `boolean`                                     | Gets whether the tile is draggable.              |
| `isDragging`        |                     | readonly  | `boolean`                                     | Gets whether the tile is currently being dragged. |
| `isResizable`       |                     | readonly  | `boolean`                                     | Gets whether the tile is resizable.              |
| `isResizing`        |                     | readonly  | `boolean`                                     | Gets whether the tile is currently resizing.     |
| `lang`              | `lang`              |           | `string`                                      | The lang property indicates the language of the element's content. |
| `maximized`         | `maximized`         |           | `boolean`                                     | Gets or sets the `maximized` property.           |
| `position`          | `position`          |           | `number`                                      | Gets or sets the `position` property.            |
| `resizeDisabled`    |                     | readonly  | `boolean`                                     | Gets whether resize is disabled for this tile.   |
| `resizeMode`        |                     | readonly  | `TileManagerResizeMode`                       | Gets the current resize mode from the parent tile manager. |
| `rowSpan`           | `rowSpan`           |           | `number`                                      | Gets or sets the `rowSpan` property.             |
| `rowStart`          | `rowStart`          |           | `number \| null`                              | Gets or sets the `rowStart` property.            |
| `themeName`         |                     |           | `string`                                      | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tileContentRef`    |                     | readonly  | `Ref<HTMLDivElement>`                         | Gets the tile content reference.                 |
| `tileDragCancel`    |                     | readonly  | `IEventEmitter<ITileDragCancelEventDetail>`   | Gets the tileDragCancel event emitter.           |
| `tileDragEnd`       |                     | readonly  | `IEventEmitter<ITileDragEndEventDetail>`      | Gets the tileDragEnd event emitter.              |
| `tileDragStart`     |                     | readonly  | `IEventEmitter<ITileDragStartEventDetail>`    | Gets the tileDragStart event emitter.            |
| `tileFullscreen`    |                     | readonly  | `IEventEmitter<ITileFullscreenEventDetail>`   | Gets the tileFullscreen event emitter.           |
| `tileManager`       |                     | readonly  | `TileManagerElement \| null`                  | Gets the parent tile manager element.            |
| `tileMaximize`      |                     | readonly  | `IEventEmitter<ITileMaximizeEventDetail>`     | Gets the tileMaximize event emitter.             |
| `tileResizeCancel`  |                     | readonly  | `IEventEmitter<ITileResizeCancelEventDetail>` | Gets the tileResizeCancel event emitter.         |
| `tileResizeEnd`     |                     | readonly  | `IEventEmitter<ITileResizeEndEventDetail>`    | Gets the tileResizeEnd event emitter.            |
| `tileResizeStart`   |                     | readonly  | `IEventEmitter<ITileResizeStartEventDetail>`  | Gets the tileResizeStart event emitter.          |

## Methods

| Method                    | Type                                             | Description                                      |
|---------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`              | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                    | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `handleFullscreen`        | `(): void`                                       | Handles the fullscreen button click.             |
| `handleMaximize`          | `(): Promise<void>`                              | Handles the maximize button click.<br />When maximized, toggles to restored state and vice versa. |
| `handleResizeCancel`      | `(): void`                                       | Handles resize cancel (e.g., Escape key).<br />This can be called externally to cancel an in-progress resize. |
| `handleResizePointerDown` | `(_event: PointerEvent): void`                   | Handles resize pointer down - delegates to DragResizeController.<br />This method is called from the template's pointer event handlers.<br /><br />**_event**: The pointer event (handled by controller). |
| `handleResizePointerMove` | `(_event: PointerEvent): void`                   | Handles resize pointer move - delegates to DragResizeController.<br /><br />**_event**: The pointer event (handled by controller). |
| `handleResizePointerUp`   | `(): void`                                       | Handles resize pointer up - delegates to DragResizeController. |
| `off`                     | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                      | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`           | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `setDragState`            | `(state?: boolean): void`                        | Sets the drag state (visual appearance while dragging).<br /><br />**state**: Whether dragging is active. |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Emitted when any attribute changes before update |
| `connected`        | `ConnectedEvent`        | Emitted when the element is connected to the DOM |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `tileDragCancel`   | `TileDragCancelEvent`   | Fired when a tile drag operation is canceled by the user. |
| `tileDragEnd`      | `TileDragEndEvent`      | Fired when a drag operation with a tile is successfully completed. |
| `tileDragStart`    | `TileDragStartEvent`    | Fired when a drag operation on a tile is about to begin. |
| `tileFullscreen`   | `TileFullscreenEvent`   | Fired when tile the fullscreen state changes.    |
| `tileMaximize`     | `TileMaximizeEvent`     | Fired when tile the maximize state changes.      |
| `tileResizeCancel` | `TileResizeCancelEvent` | Fired when a resize operation on a tile is canceled by the user. |
| `tileResizeEnd`    | `TileResizeEndEvent`    | Fired when a resize operation on a tile is successfully completed. |
| `tileResizeStart`  | `TileResizeStartEvent`  | Fired when a resize operation on a tile is about to begin. |

## Slots

| Name                | Description                                      |
|---------------------|--------------------------------------------------|
|                     | Default slot for the tile's content.             |
| `actions`           | Renders items after the default actions in the tile header. |
| `bottom-adorner`    | Renders the bottom resize handle of the tile.    |
| `corner-adorner`    | Renders the corner resize handle of the tile.    |
| `fullscreen-action` | Renders the fullscreen action element of the tile header. |
| `maximize-action`   | Renders the maximize action element of the tile header. |
| `side-adorner`      | Renders the side resize handle of the tile.      |
| `style`             | Custom styles injection slot for shadow DOM styling escape hatch |
| `title`             | Renders the title of the tile header.            |

## CSS Shadow Parts

| Part                | Description                                      |
|---------------------|--------------------------------------------------|
| `actions`           | The actions container of the tile header.        |
| `base`              | The wrapper for the entire tile content, header and content. |
| `content-container` | The container wrapping the tile's main content.  |
| `header`            | The container for the tile header, including title and actions. |
| `title`             | The title container of the tile.                 |
| `trigger`           | The corner resize handle.                        |
| `trigger-bottom`    | The bottom resize handle.                        |
| `trigger-side`      | The side resize handle.                          |

# mosaik-tile-manager

The tile manager component is a layout container used to display a group of tiles.
The tiles can be dragged to a different position, resized, maximized, or made full-screen.
The layout of tiles within the tile manager can be saved for later use.

**Mixins:** Themeable

## Examples

Basic tile manager with two tiles:

```html
<mosaik-tile-manager gap="16">
  <mosaik-tile-manager-tile col-span="2" row-span="1"></mosaik-tile-manager-tile>
  <mosaik-tile-manager-tile col-span="1" row-span="2"></mosaik-tile-manager-tile>
</mosaik-tile-manager>
```

Tile manager with resize and drag enabled:

```html
<mosaik-tile-manager resize-mode="hover" drag-mode="tile" column-count="3">
  <mosaik-tile-manager-tile></mosaik-tile-manager-tile>
  <mosaik-tile-manager-tile disable-maximize></mosaik-tile-manager-tile>
</mosaik-tile-manager>
```

## Properties

| Property         | Attribute          | Modifiers | Type                                         | Description                                      |
|------------------|--------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columnCount`    | `column-count`     |           | `number \| null`                             | Gets or sets the `columnCount` property.<br />Specifies the number of columns in the grid. |
| `connected`      |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`              |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dragMode`       | `drag-mode`        |           | `TileManagerDragMode`                        | Gets or sets the `dragMode` property.<br />Determines how the tiles can be dragged.<br /><br />- `none` - Tiles cannot be dragged.<br />- `tile` - Tiles can be dragged from any part of the tile.<br />- `tile-header` - Tiles can be dragged from the tile header only. |
| `gap`            | `gap`              |           | `number \| null`                             | Gets or sets the `gap` property.<br />Specifies the gap between tiles in pixels. |
| `lang`           | `lang`             |           | `string`                                     | The lang property indicates the language of the element's content. |
| `layoutChanged`  |                    | readonly  | `IEventEmitter<ILayoutChangedEventDetail>`   | Gets the layoutChange event emitter.             |
| `maximizedTile`  |                    | readonly  | `TileManagerTileElement \| null`             | Gets the currently maximized tile, if any.       |
| `minColumnWidth` | `min-column-width` |           | `number \| null`                             | Gets or sets the `minColumnWidth` property.<br />Specifies the minimum column width in pixels.<br />Used with auto-fit columns. |
| `minRowHeight`   | `min-row-height`   |           | `number \| null`                             | Gets or sets the `minRowHeight` property.<br />Specifies the minimum row height in pixels. |
| `resizeMode`     | `resize-mode`      |           | `TileManagerResizeMode`                      | Gets or sets the `resizeMode` property.<br />Determines when the resize handles are visible.<br /><br />- `none` - Resize handles are not visible.<br />- `hover` - Resize handles are visible on hover.<br />- `always` - Resize handles are always visible. |
| `themeName`      |                    |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tiles`          |                    | readonly  | `TileManagerTileElement[]`                   | Gets all tile elements in the tile manager.      |

## Methods

| Method               | Type                                             | Description                                      |
|----------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`         | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`               | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `handleSlotChange`   | `(): void`                                       | Handles slot changes to update tile positions.   |
| `loadLayout`         | `(layout: ISerializedTile[]): void`              | Loads a previously saved layout.<br /><br />**layout**: The serialized layout to load. |
| `loadLayoutFromJSON` | `(json: string): void`                           | Loads a layout from a JSON string.<br /><br />**json**: The JSON string representing the layout. |
| `off`                | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                 | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`      | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `saveLayout`         | `(): ISerializedTile[]`                          | Saves the current layout state.                  |
| `saveLayoutAsJSON`   | `(): string`                                     | Saves the current layout state as a JSON string. |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `layoutChanged` | `LayoutChangedEvent`   | Fired when the layout changes.                   |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for tile elements.                  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part                | Description                                      |
|---------------------|--------------------------------------------------|
| `base`              | The wrapper for the entire tile manager content. |
| `maximized-overlay` | The overlay shown when a tile is maximized.      |

# mosaik-tile

Tile - A clickable card-like container for interactive content blocks.

**Mixins:** Themeable, Elevatable, Variantable, Appearanceable, Fitable, Rippleable, Disableable, Focusable

## Examples

Basic tile with text content:

```html
<mosaik-tile>
  <mosaik-icon data="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"></mosaik-icon>
  <mosaik-text text="Mail"></mosaik-text>
</mosaik-tile>
```

Tile with variant and appearance:

```html
<mosaik-tile variant="primary" appearance="solid">
  <mosaik-icon data="..."></mosaik-icon>
  <mosaik-text text="Dashboard"></mosaik-text>
</mosaik-tile>
```

Disabled tile:

```html
<mosaik-tile disabled>
  <mosaik-text text="Unavailable"></mosaik-text>
</mosaik-tile>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `elevation`    | `elevation`  |           | `ElevationWeight`                            | Gets or sets the `elevation` property.<br />The default value is `none`, which means the element has no elevation. |
| `fit`          | `fit`        |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `isFocused`    | `is-focused` |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `ripple`       | `ripple`     |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `type`         | `type`       |           | `ButtonType`                                 | Gets or sets the `type` property.<br />It modifies the classification and default behavior of the tile button. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for arbitrary tile content          |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part        | Description                                      |
|-------------|--------------------------------------------------|
| `button`    | The native button element container              |
| `content`   | The content wrapper inside the button            |
| `elevation` | The elevation/shadow layer                       |
| `focusRing` | The focus indicator ring for keyboard navigation |
| `ripple`    | The touch feedback ripple effect container       |

## CSS Custom Properties

| Property                           | Type   | Description                    |
|------------------------------------|--------|--------------------------------|
| `--tile-background-color`          | Color  | Background color of the tile   |
| `--tile-border-color`              | Color  | Border color around the tile   |
| `--tile-border-radius`             | String | Corner rounding radius         |
| `--tile-border-style`              | String | Border line style              |
| `--tile-border-width`              | String | Border width                   |
| `--tile-focus-ring-active-width`   | String | Focus ring active width        |
| `--tile-focus-ring-color`          | String | Focus ring color               |
| `--tile-focus-ring-inward-offset`  | String | Focus ring inward offset       |
| `--tile-focus-ring-outward-offset` | String | Focus ring outward offset      |
| `--tile-font-family`               | String | Font family for tile text      |
| `--tile-font-letter-spacing`       | String | Letter spacing                 |
| `--tile-font-line-height`          | String | Line height                    |
| `--tile-font-size`                 | String | Font size                      |
| `--tile-font-text-decoration`      | String | Text decoration                |
| `--tile-font-text-transform`       | String | Text transformation            |
| `--tile-font-weight`               | String | Font weight                    |
| `--tile-foreground-color`          | Color  | Text and icon color            |
| `--tile-gap`                       | String | Spacing between child elements |
| `--tile-padding-bottom`            | String | Bottom padding                 |
| `--tile-padding-left`              | String | Left padding                   |
| `--tile-padding-right`             | String | Right padding                  |
| `--tile-padding-top`               | String | Top padding                    |
| `--tile-ripple-color`              | Color  | Ripple effect color            |
| `--tile-ripple-duration`           | String | Ripple animation duration      |
| `--tile-shadow`                    | String | Box shadow                     |
| `--tile-shadow-blur`               | String | Shadow blur radius             |
| `--tile-shadow-color`              | String | Shadow color                   |
| `--tile-shadow-offset-x`           | String | Horizontal shadow offset       |
| `--tile-shadow-offset-y`           | String | Vertical shadow offset         |
| `--tile-shadow-spread`             | String | Shadow spread radius           |
| `--tile-transition-duration`       | String | Transition duration            |
| `--tile-transition-mode`           | String | Transition timing function     |
| `--tile-transition-property`       | String | Properties to transition       |
| `--tile-translate`                 | String | Translate transform            |

# TimeBoxElement - Time selection input

## Description
The TimeBox component provides an input field for selecting time values with integrated time picker, validation, and formatting. Features include time picker popup, hour/minute/second selection, 12/24 hour formats, min/max time constraints, keyboard navigation, and accessibility support.

## Element
- **Tag**: `mosaik-timebox`
- **Category**: Inputs

## Slots
- `prefix` - Content before the input
- `suffix` - Content after the input

## CSS Parts
- `focusRing` - Focus indicator
- `prefix` - Prefix container
- `inner` - Inner wrapper
- `input` - The time input field
- `suffix` - Suffix container
- `picker` - Time picker popup

## Examples

### Basic time input
```html
<mosaik-timebox label="Start Time"></mosaik-timebox>
```

### 24-hour format
```html
<mosaik-timebox 
    label="Meeting Time" 
    format="24" 
    step="15">
</mosaik-timebox>
```

### With constraints
```html
<mosaik-timebox 
    label="Office Hours" 
    min="09:00" 
    max="17:00">
</mosaik-timebox>
```

# mosaik-timebox

Time Box - A sophisticated time input control with dropdown time selection and flexible time formatting.

**Mixins:** Themeable, Slottable, Clearable, Valueable, Disableable, Localeable, Invalidable, Variantable, Appearanceable, DropDownable, Labelable, Focusable

## Example

```html
<mosaik-timebox
  placeholder="Select time"
  min-time="09:00"
  max-time="17:00"
  interval="15">
</mosaik-timebox>
```

## Properties

| Property            | Attribute              | Modifiers | Type                                         | Description                                      |
|---------------------|------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`        | `appearance`           |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `autocomplete`      | `autocomplete`         |           | `boolean`                                    | Gets or sets the `autocomplete` property.        |
| `autofocus`         |                        |           | `boolean`                                    | Gets or sets the `autofocus` property.           |
| `blackoutTimes`     | `blackoutTimes`        |           | `ITimeSpan[]`                                | Gets or sets the `blackoutTimes` property.       |
| `changed`           |                        | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `cleared`           |                        |           | `IEventEmitter<IEventDetail>`                | Called when the clear method will be called.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`         |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`                  |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`             |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                        | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dropDownDistance`  | `drop-down-distance`   |           | `number`                                     | Gets or sets the `dropDownDistance` property.<br />The default value is `8`, which means the drop down appears 8 pixels away from the element. |
| `dropDownHeight`    | `drop-down-height`     |           | `CssLength \| undefined`                     | Gets or sets the `dropDownHeight` property.      |
| `dropDownMaxHeight` | `drop-down-max-height` |           | `CssLength`                                  | Gets or sets the `dropDownMaxHeight` property.   |
| `dropDownMaxWidth`  | `drop-down-max-width`  |           | `CssLength \| undefined`                     | Gets or sets the `dropDownMaxWidth` property.    |
| `dropDownPlacement` | `drop-down-placement`  |           | `Placement`                                  | Gets or sets the `dropDownPlacement` property.<br />The default value is `bottom`, which means the drop down appears below the element. |
| `dropDownSkidding`  | `drop-down-skidding`   |           | `number`                                     | Gets or sets the `dropDownSkidding` property.<br />The default value is `0`, which means the drop down is aligned with the element. |
| `dropDownStaysOpen` | `drop-down-stays-open` |           | `boolean`                                    | Gets or sets the `dropDownStaysOpen` property.<br />The default value is `false`, which means the drop down closes when the user clicks outside of it. |
| `dropDownStrategy`  | `drop-down-strategy`   |           | `Strategy`                                   | Gets or sets the `dropDownStrategy` property.<br />The default value is `fixed`, which means the drop down is positioned relative to the viewport. |
| `dropDownWidth`     | `drop-down-width`      |           | `CssLength \| undefined`                     | Gets or sets the `dropDownWidth` property.       |
| `formatter`         |                        |           | `InputFormatterFn \| null`                   | Gets or sets the `formatter` property.           |
| `interval`          | `interval`             |           | `number`                                     | Gets or sets the `interval` property.            |
| `invalid`           | `invalid`              |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isClearable`       | `is-clearable`         |           | `boolean`                                    | Determines whether the element is clearable or not.<br />Clearable means that a clear button will be displayed when the element has a value.<br />When the clear button is clicked, the value of the element will be cleared. |
| `isDropDownOpen`    | `is-drop-down-open`    |           | `boolean`                                    | Gets or sets the `isDropDownOpen` property.      |
| `isEditable`        | `isEditable`           |           | `boolean`                                    | Gets or sets the `isEditable` property.          |
| `isFocused`         | `is-focused`           |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`             |                        |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`              | `lang`                 |           | `string`                                     | The lang property indicates the language of the element's content. |
| `locale`            |                        |           | `string`                                     | Gets or sets the `locale` property.<br />The default value is 'default', which means the element uses the default locale. |
| `markerHandler`     | `markerHandler`        |           | `TimeMarkerHandler`                          | A handler that gets date and returns null or a tuple with circled marker data. See `TimeMarkerData`. |
| `maxTime`           | `maxTime`              |           | `ITimeSpan \| null`                          | Gets or sets the `maxTime` property.             |
| `minTime`           | `minTime`              |           | `ITimeSpan \| null`                          | Gets or sets the `minTime` property.             |
| `name`              | `name`                 |           | `string`                                     | Gets or sets the `name` property.                |
| `parser`            |                        |           | `InputParserFn \| null`                      | Gets or sets the `parser` property.              |
| `placeholder`       | `placeholder`          |           | `string`                                     | Gets or sets the `placeholder` property.         |
| `readonly`          | `readonly`             |           | `boolean`                                    | Gets or sets the `readonly` property.            |
| `required`          | `required`             |           | `boolean`                                    | Gets or sets the `required` property.            |
| `specialTimes`      | `specialTimes`         |           | `ITimeSpan[]`                                | Gets or sets the `specialTimes` property.        |
| `state`             | `state`                |           | `InputState`                                 | Gets or sets the `state` property.               |
| `textAlign`         | `textAlign`            |           | `TextAlignment`                              | Determines the text alignment of the component.  |
| `themeName`         |                        |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`             | `value`                |           | `ITimeSpan \| null`                          | Gets or sets the `value` property.               |
| `variant`           | `variant`              |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `blur`                  | `(): void`                                       | Removes keyboard focus from the input.           |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `clear`                 | `(force?: boolean \| undefined): boolean`        | Clears the value of the element but not the validation. |
| `close`                 | `(): void`                                       | Closes the drop down.                            |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `focus`                 | `(): void`                                       | Sets focus on the input.                         |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                  | `(): void`                                       | Opens the drop down.                             |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the value, all kinds of validation and errors. |
| `selectNext`            | `(): void`                                       | Selects the next time span in the list.          |
| `selectPrevious`        | `(): void`                                       | Selects the previous time span in the list.      |
| `toggle`                | `(): void`                                       | Toggles the drop down.                           |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `cleared`      | `ClearedEvent`         | Fired when the value is cleared.                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `prefix` | Content placed before the input field.           |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content placed after the input field.            |

## CSS Shadow Parts

| Part        | Description                            |
|-------------|----------------------------------------|
| `clear`     | The clear part.                        |
| `focusRing` | The focus ring indicator.              |
| `inner`     | The inner container wrapper.           |
| `input`     | The time input field.                  |
| `label`     | The floating label element.            |
| `marker`    | The marker part.                       |
| `menu`      | The time selection menu.               |
| `menuItem`  | The menuItem part.                     |
| `popup`     | The floating time picker container.    |
| `portal`    | The portal container for the dropdown. |
| `prefix`    | The prefix content container.          |
| `suffix`    | The suffix content container.          |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--time-box-background-color`        | Color  | The background color.                            |
| `--time-box-border-color`            | Color  | The border color.                                |
| `--time-box-border-radius`           | String | The border radius.                               |
| `--time-box-border-style`            | String | The border style.                                |
| `--time-box-border-width`            | String | The border width.                                |
| `--time-box-color`                   | String | The box color CSS custom property.               |
| `--time-box-font-family`             | String | The font family.                                 |
| `--time-box-font-letter-spacing`     | String | The box font letter spacing CSS custom property. |
| `--time-box-font-line-height`        | String | The box font line height CSS custom property.    |
| `--time-box-font-size`               | String | The font size.                                   |
| `--time-box-font-text-decoration`    | String | The box font text decoration CSS custom property. |
| `--time-box-font-text-transform`     | String | The box font text transform CSS custom property. |
| `--time-box-font-weight`             | String | The font weight.                                 |
| `--time-box-foreground-color`        | Color  | The foreground color.                            |
| `--time-box-gap`                     | String | The gap between elements.                        |
| `--time-box-height`                  | String | The height.                                      |
| `--time-box-menu-item-border-radius` | String | The box menu item border radius CSS custom property. |
| `--time-box-padding-bottom`          | String | The padding bottom.                              |
| `--time-box-padding-left`            | String | The padding left.                                |
| `--time-box-padding-right`           | String | The padding right.                               |
| `--time-box-padding-top`             | String | The padding top.                                 |
| `--time-box-shadow`                  | String | The shadow.                                      |
| `--time-box-shadow-blur`             | String | The box shadow blur CSS custom property.         |
| `--time-box-shadow-color`            | String | The box shadow color CSS custom property.        |
| `--time-box-shadow-offset-x`         | String | The box shadow offset x CSS custom property.     |
| `--time-box-shadow-offset-y`         | String | The box shadow offset y CSS custom property.     |
| `--time-box-shadow-spread`           | String | The box shadow spread CSS custom property.       |
| `--time-box-transition-duration`     | String | The transition duration.                         |
| `--time-box-transition-mode`         | String | The box transition mode CSS custom property.     |
| `--time-box-transition-property`     | String | The box transition property CSS custom property. |
| `--time-box-translate`               | String | The box translate CSS custom property.           |

# mosaik-timeline-content

TimelineContent - Represents the primary content area within a timeline item.

**Mixins:** Themeable

## Example

```html
<mosaik-timeline-content>Event description goes here.</mosaik-timeline-content>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when a property changes                    |
| `connected`    | `ConnectedEvent`       | Fired when connected to DOM                      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for primary timeline content.       |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                  | Type   | Description                                      |
|-------------------------------------------|--------|--------------------------------------------------|
| `--timeline-content-font-family`          | String | Font family for content text                     |
| `--timeline-content-font-letter-spacing`  | String | Letter spacing for content text                  |
| `--timeline-content-font-line-height`     | String | Line height for content text                     |
| `--timeline-content-font-size`            | String | Font size for content text                       |
| `--timeline-content-font-text-decoration` | String | Text decoration for content text                 |
| `--timeline-content-font-text-transform`  | String | Text transform for content text                  |
| `--timeline-content-font-weight`          | String | Font weight for content text                     |
| `--timeline-content-foreground-color`     | Color  | Text color of the content area                   |
| `--timeline-content-gap`                  | String | The content gap CSS custom property.             |
| `--timeline-content-padding-bottom`       | String | The content padding bottom CSS custom property.  |
| `--timeline-content-padding-left`         | String | The content padding left CSS custom property.    |
| `--timeline-content-padding-right`        | String | The content padding right CSS custom property.   |
| `--timeline-content-padding-top`          | String | The content padding top CSS custom property.     |
| `--timeline-content-shadow`               | String | The content shadow CSS custom property.          |
| `--timeline-content-shadow-blur`          | String | The content shadow blur CSS custom property.     |
| `--timeline-content-shadow-color`         | String | The content shadow color CSS custom property.    |
| `--timeline-content-shadow-offset-x`      | String | The content shadow offset x CSS custom property. |
| `--timeline-content-shadow-offset-y`      | String | The content shadow offset y CSS custom property. |
| `--timeline-content-shadow-spread`        | String | The content shadow spread CSS custom property.   |
| `--timeline-content-transition-duration`  | String | The content transition duration CSS custom property. |
| `--timeline-content-transition-mode`      | String | The content transition mode CSS custom property. |
| `--timeline-content-transition-property`  | String | The content transition property CSS custom property. |
| `--timeline-content-translate`            | String | The content translate CSS custom property.       |

# mosaik-timeline-item

TimelineItem - Represents a single event entry within a timeline.

**Mixins:** Themeable

## Example

Timeline item with marker and content:

```html
<mosaik-timeline-item>
  <mosaik-timeline-marker text="1" variant="primary" appearance="solid"></mosaik-timeline-marker>
  <mosaik-timeline-content>Event description</mosaik-timeline-content>
  <mosaik-timeline-opposite>2024-01-01</mosaik-timeline-opposite>
</mosaik-timeline-item>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when a property changes                    |
| `connected`    | `ConnectedEvent`       | Fired when connected to DOM                      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
| `content`  | Required content slot for a `TimelineContentElement` representing the primary timeline information. |
| `marker`   | Optional marker slot. Accepts a `TimelineMarkerElement`. Defaults to an internally rendered marker when omitted. |
| `opposite` | Optional slot for a `TimelineOppositeElement` positioned opposite the main content. |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part             | Description                                      |
|------------------|--------------------------------------------------|
| `content`        | The wrapper around the content slot              |
| `item`           | The root grid container of the timeline item     |
| `marker`         | The positioning wrapper around the marker slot   |
| `marker-default` | The fallback marker element rendered when no marker is slotted |
| `opposite`       | The wrapper around the opposite slot             |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--timeline-item-content-gap`          | String | Gap between content areas                        |
| `--timeline-item-font-family`          | String | The item font family CSS custom property.        |
| `--timeline-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--timeline-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--timeline-item-font-size`            | String | The item font size CSS custom property.          |
| `--timeline-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--timeline-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--timeline-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--timeline-item-gap`                  | String | The item gap CSS custom property.                |
| `--timeline-item-line-offset`          | String | Offset used for marker placement along the timeline line |
| `--timeline-item-marker-border-color`  | Color  | Border color of the default marker               |
| `--timeline-item-marker-border-width`  | String | Border width of the default marker               |
| `--timeline-item-marker-color`         | Color  | Background color of the default marker           |
| `--timeline-item-marker-size`          | String | Size (width and height) of the marker area       |
| `--timeline-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--timeline-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--timeline-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--timeline-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--timeline-item-shadow`               | String | The item shadow CSS custom property.             |
| `--timeline-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--timeline-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--timeline-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--timeline-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--timeline-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--timeline-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--timeline-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--timeline-item-transition-property`  | String | The item transition property CSS custom property. |
| `--timeline-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-timeline-marker

TimelineMarker - Represents the visual marker of a timeline item.

**Mixins:** Themeable, Appearanceable, Variantable, Sizeable, Busyable, Disableable

## Examples

Default marker (renders a pip):

```html
<mosaik-timeline-marker text="1" variant="primary" appearance="solid"></mosaik-timeline-marker>
```

Busy marker with spinner:

```html
<mosaik-timeline-marker is-busy variant="primary"></mosaik-timeline-marker>
```

Marker with custom slotted content:

```html
<mosaik-timeline-marker>
  <span>✓</span>
</mosaik-timeline-marker>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`   |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `icon`         |              |           | `string`                                     | Gets or sets the icon SVG path data displayed inside the marker pip.<br />When set, the icon takes precedence over `text`.<br />The default value is an empty string (no icon). |
| `iconSize`     | `icon-size`  |           | `Size \| null`                               | Gets or sets the size of the icon inside the marker pip.<br />When `null`, the icon size adapts to the pip's own size.<br />The default value is `null`. |
| `isBusy`       | `is-busy`    |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `size`         | `size`       |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `text`         | `text`       |           | `string`                                     | Gets or sets the text content displayed inside the marker pip.<br />Can be a digit, letter, or symbol (e.g., `"1"`, `"A"`, `"✓"`).<br />Ignored when `icon` is set.<br />The default value is an empty string. |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when a property changes                    |
| `connected`    | `ConnectedEvent`       | Fired when connected to DOM                      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for custom marker content. Overrides the internal pip when provided. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `pip`          | The internal pip element used as default marker indicator |
| `progressRing` | The indeterminate progress ring shown during busy state |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--timeline-marker-font-family`          | String | The marker font family CSS custom property.      |
| `--timeline-marker-font-letter-spacing`  | String | The marker font letter spacing CSS custom property. |
| `--timeline-marker-font-line-height`     | String | The marker font line height CSS custom property. |
| `--timeline-marker-font-size`            | String | The marker font size CSS custom property.        |
| `--timeline-marker-font-text-decoration` | String | The marker font text decoration CSS custom property. |
| `--timeline-marker-font-text-transform`  | String | The marker font text transform CSS custom property. |
| `--timeline-marker-font-weight`          | String | The marker font weight CSS custom property.      |
| `--timeline-marker-gap`                  | String | The marker gap CSS custom property.              |
| `--timeline-marker-marker-border-color`  | String | Border color of the marker                       |
| `--timeline-marker-marker-border-width`  | String | Border width of the marker                       |
| `--timeline-marker-marker-color`         | String | Background color of the marker                   |
| `--timeline-marker-marker-size`          | String | Width and height of the marker                   |
| `--timeline-marker-padding-bottom`       | String | The marker padding bottom CSS custom property.   |
| `--timeline-marker-padding-left`         | String | The marker padding left CSS custom property.     |
| `--timeline-marker-padding-right`        | String | The marker padding right CSS custom property.    |
| `--timeline-marker-padding-top`          | String | The marker padding top CSS custom property.      |
| `--timeline-marker-progress-ring-width`  | String | Stroke width of the busy progress ring           |
| `--timeline-marker-shadow`               | String | The marker shadow CSS custom property.           |
| `--timeline-marker-shadow-blur`          | String | The marker shadow blur CSS custom property.      |
| `--timeline-marker-shadow-color`         | String | The marker shadow color CSS custom property.     |
| `--timeline-marker-shadow-offset-x`      | String | The marker shadow offset x CSS custom property.  |
| `--timeline-marker-shadow-offset-y`      | String | The marker shadow offset y CSS custom property.  |
| `--timeline-marker-shadow-spread`        | String | The marker shadow spread CSS custom property.    |
| `--timeline-marker-transition-duration`  | String | The marker transition duration CSS custom property. |
| `--timeline-marker-transition-mode`      | String | The marker transition mode CSS custom property.  |
| `--timeline-marker-transition-property`  | String | The marker transition property CSS custom property. |
| `--timeline-marker-translate`            | String | The marker translate CSS custom property.        |

# mosaik-timeline-opposite

TimelineOpposite - Represents secondary content positioned opposite the main timeline content.

**Mixins:** Themeable

## Example

```html
<mosaik-timeline-opposite>January 2024</mosaik-timeline-opposite>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when a property changes                    |
| `connected`    | `ConnectedEvent`       | Fired when connected to DOM                      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for opposite content.               |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                   | Type   | Description                                      |
|--------------------------------------------|--------|--------------------------------------------------|
| `--timeline-opposite-font-family`          | String | Font family for opposite text                    |
| `--timeline-opposite-font-letter-spacing`  | String | Letter spacing for opposite text                 |
| `--timeline-opposite-font-line-height`     | String | Line height for opposite text                    |
| `--timeline-opposite-font-size`            | String | Font size for opposite text                      |
| `--timeline-opposite-font-text-decoration` | String | Text decoration for opposite text                |
| `--timeline-opposite-font-text-transform`  | String | Text transform for opposite text                 |
| `--timeline-opposite-font-weight`          | String | Font weight for opposite text                    |
| `--timeline-opposite-foreground-color`     | Color  | Text color of the opposite area                  |
| `--timeline-opposite-gap`                  | String | The opposite gap CSS custom property.            |
| `--timeline-opposite-padding-bottom`       | String | The opposite padding bottom CSS custom property. |
| `--timeline-opposite-padding-left`         | String | The opposite padding left CSS custom property.   |
| `--timeline-opposite-padding-right`        | String | The opposite padding right CSS custom property.  |
| `--timeline-opposite-padding-top`          | String | The opposite padding top CSS custom property.    |
| `--timeline-opposite-shadow`               | String | The opposite shadow CSS custom property.         |
| `--timeline-opposite-shadow-blur`          | String | The opposite shadow blur CSS custom property.    |
| `--timeline-opposite-shadow-color`         | String | The opposite shadow color CSS custom property.   |
| `--timeline-opposite-shadow-offset-x`      | String | The opposite shadow offset x CSS custom property. |
| `--timeline-opposite-shadow-offset-y`      | String | The opposite shadow offset y CSS custom property. |
| `--timeline-opposite-shadow-spread`        | String | The opposite shadow spread CSS custom property.  |
| `--timeline-opposite-transition-duration`  | String | The opposite transition duration CSS custom property. |
| `--timeline-opposite-transition-mode`      | String | The opposite transition mode CSS custom property. |
| `--timeline-opposite-transition-property`  | String | The opposite transition property CSS custom property. |
| `--timeline-opposite-translate`            | String | The opposite translate CSS custom property.      |

# mosaik-timeline

Timeline - A sequential visualization of events or steps along a line.

**Mixins:** Themeable, Orientable

## Example

Vertical timeline:

```html
<mosaik-timeline orientation="vertical" align="start">
  <mosaik-timeline-item>
    <mosaik-timeline-marker text="1" variant="primary" appearance="solid"></mosaik-timeline-marker>
    <mosaik-timeline-content>Step one</mosaik-timeline-content>
  </mosaik-timeline-item>
</mosaik-timeline>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `align`        | `align`       |           | `TimelineAlignment`                          | Gets or sets the `align` property.               |
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when a property changes                    |
| `connected`    | `ConnectedEvent`       | Fired when connected to DOM                      |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Default slot for `TimelineItemElement` children. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part   | Description                                      |
|--------|--------------------------------------------------|
| `line` | The visual connector line running through the timeline. |

## CSS Custom Properties

| Property                          | Type   | Description                              |
|-----------------------------------|--------|------------------------------------------|
| `--timeline-content-gap`          | String | Gap between content areas                |
| `--timeline-font-family`          | String | Font family for timeline text            |
| `--timeline-font-letter-spacing`  | String | Letter spacing for timeline text         |
| `--timeline-font-line-height`     | String | Line height for timeline text            |
| `--timeline-font-size`            | String | Font size for timeline text              |
| `--timeline-font-text-decoration` | String | Text decoration for timeline text        |
| `--timeline-font-text-transform`  | String | Text transform for timeline text         |
| `--timeline-font-weight`          | String | Font weight for timeline text            |
| `--timeline-foreground-color`     | Color  | Text color of the timeline               |
| `--timeline-gap`                  | String | Gap between timeline items               |
| `--timeline-line-color`           | Color  | Color of the connecting line             |
| `--timeline-line-offset`          | String | Offset position of the timeline line     |
| `--timeline-line-thickness`       | String | Thickness of the connecting line         |
| `--timeline-marker-border-color`  | Color  | Border color of the marker               |
| `--timeline-marker-border-width`  | String | Border width of the marker               |
| `--timeline-marker-color`         | Color  | Background color of the marker           |
| `--timeline-marker-size`          | String | Size of the timeline marker              |
| `--timeline-padding-bottom`       | String | Bottom padding of the timeline           |
| `--timeline-padding-left`         | String | Left padding of the timeline             |
| `--timeline-padding-right`        | String | Right padding of the timeline            |
| `--timeline-padding-top`          | String | Top padding of the timeline              |
| `--timeline-shadow`               | String | The shadow CSS custom property.          |
| `--timeline-shadow-blur`          | String | The shadow blur CSS custom property.     |
| `--timeline-shadow-color`         | String | The shadow color CSS custom property.    |
| `--timeline-shadow-offset-x`      | String | The shadow offset x CSS custom property. |
| `--timeline-shadow-offset-y`      | String | The shadow offset y CSS custom property. |
| `--timeline-shadow-spread`        | String | The shadow spread CSS custom property.   |
| `--timeline-transition-duration`  | String | Transition duration                      |
| `--timeline-transition-mode`      | String | Transition timing function               |
| `--timeline-transition-property`  | String | Properties that transition               |
| `--timeline-translate`            | String | CSS translate offset                     |

# TitleBarElement - Window title bar with icon, title, and action buttons

## Description
The TitleBarElement is a graphical control element that forms part of a window decoration, typically used to display the title of the window, the icon of the application, and the window's control buttons (minimize, maximize, close).

## Element
- **Tag**: `mosaik-titlebar`
- **Category**: Grouping

## Slots
- `icon` - The icon slot for displaying application or window icon
- `title` - The title slot for custom title content
- `action` - The action slot for window control buttons

## CSS Parts
- `root` - The root container element
- `icon` - The icon display area
- `title` - The title text display area
- `action` - The action buttons container

## CSS Custom Properties
- `--titlebar-font-family` - The font family for the title text
- `--titlebar-font-size` - The font size for the title text
- `--titlebar-font-line-height` - The line height for the title text
- `--titlebar-font-weight` - The font weight for the title text
- `--titlebar-font-letter-spacing` - The letter spacing for the title text
- `--titlebar-font-text-decoration` - The text decoration for the title text
- `--titlebar-font-text-transform` - The text transform for the title text

## Dependencies
- `mosaik-text` - The text element for displaying the title
- `mosaik-icon` - The icon element for displaying the window/app icon
- `mosaik-button` - The button element for action buttons

## Examples

### Basic title bar
```html
<mosaik-titlebar title="Application Window"></mosaik-titlebar>
```

### With icon
```html
<mosaik-titlebar 
    title="Document Editor" 
    icon="app-icon-path">
</mosaik-titlebar>
```

### With custom title content
```html
<mosaik-titlebar>
    <span slot="title">
        <strong>My App</strong> - Document.txt
    </span>
</mosaik-titlebar>
```

### With custom icon and actions
```html
<mosaik-titlebar title="Settings">
    <mosaik-icon slot="icon" data="settings-icon"></mosaik-icon>
    <div slot="action">
        <mosaik-button icon="minimize-icon"></mosaik-button>
        <mosaik-button icon="maximize-icon"></mosaik-button>
        <mosaik-button icon="close-icon" variant="error"></mosaik-button>
    </div>
</mosaik-titlebar>
```

### Styled with text formatting
```html
<mosaik-titlebar 
    title="My Application"
    formatter="uppercase">
</mosaik-titlebar>
```

# mosaik-title-layout

The `TitleLayoutElement` element.

**Mixins:** Themeable, Slottable

## Example

Title layout with slotted start, center, and end content:

```html
<mosaik-title-layout>
  <mosaik-button slot="start"></mosaik-button>
  <span>Page Title</span>
  <mosaik-button slot="end"></mosaik-button>
</mosaik-title-layout>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `end`   | The end slot.                                    |
| `start` | The start slot.                                  |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

# mosaik-titlebar

Title Bar - A title bar is a graphical control element and part of a window decoration.

**Mixins:** Themeable, TextFormattable

## Examples

Title bar with title slot:

```html
<mosaik-titlebar>
  <span slot="title">My Application</span>
</mosaik-titlebar>
```

Title bar with custom content in the title slot:

```html
<mosaik-titlebar>
  <span slot="title">My Application</span>
  <mosaik-button slot="action"></mosaik-button>
</mosaik-titlebar>
```

## Properties

| Property       | Attribute | Modifiers | Type                                         | Description                                      |
|----------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`    |           |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `icon`         |           |           | `string`                                     | Gets or sets the `icon` property.                |
| `lang`         | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `title`        |           |           | `string`                                     | Gets or sets the `title` property.               |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `icon`  | The icon slot.                                   |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |
| `title` | The title slot.                                  |

## CSS Shadow Parts

| Part     | Description      |
|----------|------------------|
| `action` | The action part. |
| `root`   | The root part.   |
| `title`  | The title part.  |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--title-bar-font-family`          | String | The bar font family CSS custom property.         |
| `--title-bar-font-letter-spacing`  | String | The bar font letter spacing CSS custom property. |
| `--title-bar-font-line-height`     | String | The bar font line height CSS custom property.    |
| `--title-bar-font-size`            | String | The bar font size CSS custom property.           |
| `--title-bar-font-text-decoration` | String | The bar font text decoration CSS custom property. |
| `--title-bar-font-text-transform`  | String | The bar font text transform CSS custom property. |
| `--title-bar-font-weight`          | String | The bar font weight CSS custom property.         |
| `--title-bar-gap`                  | String | The bar gap CSS custom property.                 |
| `--title-bar-padding-bottom`       | String | The bar padding bottom CSS custom property.      |
| `--title-bar-padding-left`         | String | The bar padding left CSS custom property.        |
| `--title-bar-padding-right`        | String | The bar padding right CSS custom property.       |
| `--title-bar-padding-top`          | String | The bar padding top CSS custom property.         |
| `--title-bar-shadow`               | String | The bar shadow CSS custom property.              |
| `--title-bar-shadow-blur`          | String | The bar shadow blur CSS custom property.         |
| `--title-bar-shadow-color`         | String | The bar shadow color CSS custom property.        |
| `--title-bar-shadow-offset-x`      | String | The bar shadow offset x CSS custom property.     |
| `--title-bar-shadow-offset-y`      | String | The bar shadow offset y CSS custom property.     |
| `--title-bar-shadow-spread`        | String | The bar shadow spread CSS custom property.       |
| `--title-bar-transition-duration`  | String | The bar transition duration CSS custom property. |
| `--title-bar-transition-mode`      | String | The bar transition mode CSS custom property.     |
| `--title-bar-transition-property`  | String | The bar transition property CSS custom property. |
| `--title-bar-translate`            | String | The bar translate CSS custom property.           |

# mosaik-toast

Toast - A transient notification that appears briefly, typically near the edge of the screen.

**Mixins:** Themeable, Animatable, Variantable, TextFormattable, Busyable, Openable, Closeable

## Examples

Toast at the top with progress:

```html
<mosaik-toast position="top" show-progress timeout="3000"></mosaik-toast>
```

Toast at bottom-center:

```html
<mosaik-toast position="bottom"></mosaik-toast>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Default       | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|---------------|--------------------------------------------------|
| `animationTarget`     |                       | readonly  | `HTMLElement`                                |               | Gets the animation target element.<br />For the toast, animations are applied to the root template part instead of the host element. |
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |               | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    |               | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    |               | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |               | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        |               | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`             |                       |           | `string`                                     |               | Gets or sets the `content` property.             |
| `dir`                 | `dir`                 |           | `FlowDirection`                              |               | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        |               | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`               | `enter`               |           |                                              | "fadeSlideIn" | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`                | `exit`                |           |                                              | "fadeOut"     | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `formatter`           |                       |           | `TextFormatter \| null`                      |               | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    |               | Gets or sets the `hasBackdrop` property.         |
| `header`              |                       |           | `string`                                     |               | Gets or sets the `header` property.              |
| `isBusy`              | `is-busy`             |           | `boolean`                                    |               | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isOpen`              | `isOpen`              |           | `boolean`                                    |               | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     |               | The lang property indicates the language of the element's content. |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |               | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `position`            | `position`            |           | `ToastPosition`                              |               | Gets or sets the `position` property.            |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    |               | Gets or sets the `pressEscapeToClose` property.  |
| `showProgress`        | `showProgress`        |           | `boolean`                                    |               | Gets or sets the `showProgress` property.        |
| `themeName`           |                       |           | `string`                                     |               | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `timeout`             | `timeout`             |           | `number`                                     |               | Gets or sets the `timeout` property.<br />The timeout only when the given value is greater than zero. |
| `variant`             | `variant`             |           | `Variant`                                    |               | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`            | `(): Promise<boolean>`                           | Closes the `ToastElement`.                       |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `open`             | `(): Promise<void>`                              | Opens the `OverlayElement`.                      |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the overlay completes its close transition (isOpen becomes false) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the overlay completes its open transition (isOpen becomes true) |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `actions` | The actions slot.                                |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `backdrop`     | The backdrop part.                               |
| `content`      | The content part.                                |
| `header`       | The header part.                                 |
| `progressFill` | The progress fill bar that animates from right to left during timeout. |
| `progressRing` | The progressRing part.                           |
| `root`         | The root part.                                   |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--toast-background-color`         | String | The background color CSS custom property.        |
| `--toast-border`                   | String | The border CSS custom property.                  |
| `--toast-border-color`             | String | The border color CSS custom property.            |
| `--toast-border-radius`            | String | The border radius CSS custom property.           |
| `--toast-border-style`             | String | The border style CSS custom property.            |
| `--toast-border-width`             | String | The border width CSS custom property.            |
| `--toast-font-family`              | String | The font family CSS custom property.             |
| `--toast-font-letter-spacing`      | String | The font letter spacing CSS custom property.     |
| `--toast-font-line-height`         | String | The font line height CSS custom property.        |
| `--toast-font-size`                | String | The font size CSS custom property.               |
| `--toast-font-text-decoration`     | String | The font text decoration CSS custom property.    |
| `--toast-font-text-transform`      | String | The font text transform CSS custom property.     |
| `--toast-font-weight`              | String | The font weight CSS custom property.             |
| `--toast-foreground-color`         | String | The foreground color CSS custom property.        |
| `--toast-gap`                      | String | The gap CSS custom property.                     |
| `--toast-offset-y`                 | String | The vertical edge offset used for top and bottom positions. |
| `--toast-padding-bottom`           | String | The padding bottom CSS custom property.          |
| `--toast-padding-left`             | String | The padding left CSS custom property.            |
| `--toast-padding-right`            | String | The padding right CSS custom property.           |
| `--toast-padding-top`              | String | The padding top CSS custom property.             |
| `--toast-progress-fill-color`      | String | The progress fill bar color CSS custom property. |
| `--toast-progress-ring-fill-color` | String | The progress ring fill color CSS custom property. |
| `--toast-shadow`                   | String | The shadow CSS custom property.                  |
| `--toast-shadow-blur`              | String | The shadow blur CSS custom property.             |
| `--toast-shadow-color`             | String | The shadow color CSS custom property.            |
| `--toast-shadow-offset-x`          | String | The shadow offset x CSS custom property.         |
| `--toast-shadow-offset-y`          | String | The shadow offset y CSS custom property.         |
| `--toast-shadow-spread`            | String | The shadow spread CSS custom property.           |
| `--toast-transition-duration`      | String | The transition duration CSS custom property.     |
| `--toast-transition-mode`          | String | The transition mode CSS custom property.         |
| `--toast-transition-property`      | String | The transition property CSS custom property.     |
| `--toast-translate`                | String | The translate CSS custom property.               |

# mosaik-toggle-button-group

Toggle Button Group - A container for grouping multiple toggle buttons with single-selection behavior.

**Mixins:** Themeable, Invalidable, Valueable, Disableable, Orientable, Appearanceable, Variantable, Slottable

## Example

```html
<mosaik-toggle-button-group>
  <mosaik-toggle-button value="1"></mosaik-toggle-button>
  <mosaik-toggle-button value="2"></mosaik-toggle-button>
  <mosaik-toggle-button value="3"></mosaik-toggle-button>
</mosaik-toggle-button-group>
```

## Properties

| Property        | Attribute     | Modifiers | Type                                             | Description                                      |
|-----------------|---------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`  |           | `Appearance`                                     | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`     |               | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`         |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`    |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |               | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `invalid`       | `invalid`     |           | `boolean`                                        | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `lang`          | `lang`        |           | `string`                                         | The lang property indicates the language of the element's content. |
| `orientation`   | `orientation` |           | `Orientation`                                    | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `themeName`     |               |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggleChanged` |               | readonly  | `IEventEmitter<IGroupChangedEventDetail<unknown>>` | Called when the selection in the group changes.<br />Provides reference to `IGroupChangedEventDetail` as event detail. |
| `value`         | `value`       |           | `TType`                                          | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`     |           | `Variant`                                        | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `checkValidity`        | `(): boolean`                                    | Returns whether a form will validate when it is submitted, without having to submit it. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(): void`                                       | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                | `(): void`                                       | Resets the element to its initial state.         |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `groupChanged` | `GroupChangedEvent`    | Called when the selection in the group changes.  |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for toggle buttons.             |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                                     | Type   | Description                                      |
|----------------------------------------------|--------|--------------------------------------------------|
| `--toggle-button-group-background-color`     | String | The button group background color CSS custom property. |
| `--toggle-button-group-border-color`         | String | The button group border color CSS custom property. |
| `--toggle-button-group-border-radius`        | String | The button group border radius CSS custom property. |
| `--toggle-button-group-border-style`         | String | The button group border style CSS custom property. |
| `--toggle-button-group-border-width`         | String | The button group border width CSS custom property. |
| `--toggle-button-group-font-family`          | String | The button group font family CSS custom property. |
| `--toggle-button-group-font-letter-spacing`  | String | The button group font letter spacing CSS custom property. |
| `--toggle-button-group-font-line-height`     | String | The button group font line height CSS custom property. |
| `--toggle-button-group-font-size`            | String | The button group font size CSS custom property.  |
| `--toggle-button-group-font-text-decoration` | String | The button group font text decoration CSS custom property. |
| `--toggle-button-group-font-text-transform`  | String | The button group font text transform CSS custom property. |
| `--toggle-button-group-font-weight`          | String | The button group font weight CSS custom property. |
| `--toggle-button-group-foreground-color`     | String | The button group foreground color CSS custom property. |
| `--toggle-button-group-gap`                  | String | The button group gap CSS custom property.        |
| `--toggle-button-group-padding-bottom`       | String | The button group padding bottom CSS custom property. |
| `--toggle-button-group-padding-left`         | String | The button group padding left CSS custom property. |
| `--toggle-button-group-padding-right`        | String | The button group padding right CSS custom property. |
| `--toggle-button-group-padding-top`          | String | The button group padding top CSS custom property. |
| `--toggle-button-group-shadow`               | String | The button group shadow CSS custom property.     |
| `--toggle-button-group-shadow-blur`          | String | The button group shadow blur CSS custom property. |
| `--toggle-button-group-shadow-color`         | String | The button group shadow color CSS custom property. |
| `--toggle-button-group-shadow-offset-x`      | String | The button group shadow offset x CSS custom property. |
| `--toggle-button-group-shadow-offset-y`      | String | The button group shadow offset y CSS custom property. |
| `--toggle-button-group-shadow-spread`        | String | The button group shadow spread CSS custom property. |
| `--toggle-button-group-transition-duration`  | String | The button group transition duration CSS custom property. |
| `--toggle-button-group-transition-mode`      | String | The button group transition mode CSS custom property. |
| `--toggle-button-group-transition-property`  | String | The button group transition property CSS custom property. |
| `--toggle-button-group-translate`            | String | The button group translate CSS custom property.  |

# mosaik-toggle-button

ToggleButton - An interactive button component that maintains a binary checked/unchecked state.

**Mixins:** Themeable, Reversible, Orientable, ContentAlignable, Fitable, Busyable, Checkable, Labelable, Iconable, Rippleable, Variantable, Appearanceable, Sizeable, Valueable, Disableable, Focusable

## Examples

Basic toggle button with slotted label:

```html
<mosaik-toggle-button variant="primary">
  <span slot="label">Enable Notifications</span>
</mosaik-toggle-button>
```

Pre-checked toggle button with solid appearance:

```html
<mosaik-toggle-button is-checked appearance="solid" variant="primary"></mosaik-toggle-button>
```

## Properties

| Property                     | Attribute                      | Modifiers | Type                                         | Description                                      |
|------------------------------|--------------------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`                 | `appearance`                   |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`                    |                                | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`                    |                                |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property is `true`.<br />Provides reference to the `IEventDetail` as event argument. |
| `connected`                  |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`                        | `dir`                          |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`                   | `disabled`                     |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`               |                                | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`                        | `fit`                          |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `horizontalContentAlignment` | `horizontal-content-alignment` |           | `HorizontalAlignment`                        | A property that supports adjusting the horizontal alignment of its content.<br />The default value is `center`, which means the content is centered horizontally. |
| `icon`                       |                                |           | `string`                                     | Gets or sets the `icon` property.<br />The default value is an empty string, which means no icon is displayed. |
| `iconPosition`               | `icon-position`                |           | `IconPosition`                               | Gets or sets the `iconPosition` property.<br />The default value is `before`, which means the icon is displayed before the content. |
| `iconSize`                   | `icon-size`                    |           | `Size \| null`                               | Gets or sets the `iconSize` property.<br />The default value is `null`, which means the icon size is not specified. |
| `isBusy`                     | `is-busy`                      |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isChecked`                  | `is-checked`                   |           | `boolean`                                    | Gets or sets the `isChecked` property.<br />The default value is `false`, which means the element is not checked. |
| `isFocused`                  | `is-focused`                   |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `label`                      |                                |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `lang`                       | `lang`                         |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`                | `orientation`                  |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`                    | `reverse`                      |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `ripple`                     | `ripple`                       |           | `boolean`                                    | Gets or sets the `ripple` property.<br />When set to `false`, the ripple effect is disabled for the element.<br />The default value is `true`, which means the ripple effect is enabled. |
| `size`                       | `size`                         |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `themeName`                  |                                |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `toggled`                    |                                |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property changes (either direction).<br />Provides reference to the `IEventDetail` as event argument. |
| `type`                       | `type`                         |           | `ButtonType`                                 | The type of the button.                          |
| `unchecked`                  |                                |           | `IEventEmitter<IEventDetail>`                | Called when the `isChecked` property is `false`.<br />Provides reference to the `IEventDetail` as event argument. |
| `value`                      | `value`                        |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`                    | `variant`                      |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |
| `verticalContentAlignment`   | `vertical-content-alignment`   |           | `VerticalAlignment`                          | A property that supports adjusting the vertical alignment of its content.<br />The default value is `center`, which means the content is centered vertically. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `check`                 | `(): void`                                       | Checks the element.                              |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the element to its initial state.         |
| `toggle`                | `(): void`                                       |                                                  |
| `uncheck`               | `(): void`                                       | Unchecks the element.                            |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checked`      | `CheckedEvent`         | Fired when the button transitions to checked state |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `toggled`      | `ToggledEvent`         | Dispatched when the button is toggled, regardless of the new state |
| `unchecked`    | `UncheckedEvent`       | Fired when the button transitions to unchecked state |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
| `icon`    | Icon content area for visual state representation and identification |
| `label`   | Text label content area for button identification and description |
| `overlay` | Overlay content area for badges, notifications, or additional state indicators |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part           | Description                                      |
|----------------|--------------------------------------------------|
| `button`       | The main toggle button element container         |
| `focusRing`    | The focus indicator ring for keyboard navigation accessibility |
| `icon`         | The icon display area within the button          |
| `innerStack`   | The internal stack layout container for organizing icon and label |
| `label`        | The text label display area                      |
| `progressRing` | The busy state progress indicator                |
| `ripple`       | The touch feedback ripple effect container       |

## CSS Custom Properties

| Property                                    | Type   | Description                                      |
|---------------------------------------------|--------|--------------------------------------------------|
| `--toggle-button-background-color`          | String | The background fill color                        |
| `--toggle-button-border-color`              | String | The border outline color                         |
| `--toggle-button-border-radius`             | String | The corner rounding radius                       |
| `--toggle-button-border-style`              | String | The border line style                            |
| `--toggle-button-border-width`              | String | The border thickness                             |
| `--toggle-button-focus-ring-active-width`   | String | The focus ring width when active (from focusRing mixin) |
| `--toggle-button-focus-ring-color`          | String | The focus ring color (from focusRing mixin)      |
| `--toggle-button-focus-ring-inward-offset`  | String | The focus ring inward offset (from focusRing mixin) |
| `--toggle-button-focus-ring-outward-offset` | String | The focus ring outward offset (from focusRing mixin) |
| `--toggle-button-font-family`               | String | The font family for button text content          |
| `--toggle-button-font-letter-spacing`       | String | The letter spacing for button text               |
| `--toggle-button-font-line-height`          | String | The line height for button text                  |
| `--toggle-button-font-size`                 | String | The font size for button text                    |
| `--toggle-button-font-text-decoration`      | String | The text decoration style for button text        |
| `--toggle-button-font-text-transform`       | String | The text transformation style for button text    |
| `--toggle-button-font-weight`               | String | The font weight for button text                  |
| `--toggle-button-foreground-color`          | String | The text and icon color                          |
| `--toggle-button-gap`                       | String | The spacing between icon and label elements      |
| `--toggle-button-height`                    | String | The button height                                |
| `--toggle-button-icon-min-height`           | String | The minimum height for icon display area         |
| `--toggle-button-icon-min-width`            | String | The minimum width for icon display area          |
| `--toggle-button-line-height`               | String | The calculated line height for content alignment |
| `--toggle-button-min-height`                | String | The minimum button height                        |
| `--toggle-button-min-width`                 | String | The minimum button width                         |
| `--toggle-button-padding-bottom`            | String | The bottom padding inside the button             |
| `--toggle-button-padding-left`              | String | The left padding inside the button               |
| `--toggle-button-padding-right`             | String | The right padding inside the button              |
| `--toggle-button-padding-top`               | String | The top padding inside the button                |
| `--toggle-button-progress-ring-width`       | String | The button progress ring width CSS custom property. |
| `--toggle-button-ripple-color`              | String | The ripple effect color (from ripple mixin)      |
| `--toggle-button-ripple-duration`           | String | The ripple effect animation duration (from ripple mixin) |
| `--toggle-button-shadow`                    | String | The drop shadow or elevation effect              |
| `--toggle-button-shadow-blur`               | String | The button shadow blur CSS custom property.      |
| `--toggle-button-shadow-color`              | String | The button shadow color CSS custom property.     |
| `--toggle-button-shadow-offset-x`           | String | The button shadow offset x CSS custom property.  |
| `--toggle-button-shadow-offset-y`           | String | The button shadow offset y CSS custom property.  |
| `--toggle-button-shadow-spread`             | String | The button shadow spread CSS custom property.    |
| `--toggle-button-transition-duration`       | String | The duration of state change transitions         |
| `--toggle-button-transition-mode`           | String | The timing function for transitions              |
| `--toggle-button-transition-property`       | String | The CSS properties to animate during transitions |
| `--toggle-button-translate`                 | String | The transform translation offset                 |
| `--toggle-button-width`                     | String | The button width                                 |

# mosaik-toggle-switch

Toggle Switch - A binary input control for switching between on/off states with visual switch metaphor.

**Mixins:** Themeable, Invalidable, Valueable, Variantable, Appearanceable, Disableable, Labelable, TextFormattable, Focusable

## Example

```html
<mosaik-toggle-switch
  is-checked>
</mosaik-toggle-switch>
```

## Properties

| Property        | Attribute       | Modifiers | Type                                         | Description                                      |
|-----------------|-----------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`    | `appearance`    |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`       |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `checked`       |                 | readonly  | `IEventEmitter<ICheckedEventDetail>`         | Called when the `isChecked` property is `true`.<br />Provides reference to the `ICheckedEventDetail` as event argument. |
| `connected`     |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`           | `dir`           |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`      | `disabled`      |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`  |                 | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`     |                 |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `indeterminate` |                 | readonly  | `IEventEmitter<IIndeterminateEventDetail>`   | Called when the `isChecked` property is `null`.<br />Provides reference to the `IIndeterminateEventDetail` as event argument. |
| `invalid`       | `invalid`       |           | `boolean`                                    | Determines whether the element is invalid or not.<br />If `true`, the element will be invalid.<br />The default value is `false`, which means the element is valid. |
| `isChecked`     | `isChecked`     |           | `boolean \| null`                            | Indicates whether the `ToggableElement` is checked. |
| `isFocused`     | `is-focused`    |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isThreeState`  | `isThreeState`  |           | `boolean`                                    | The `isThreeState` property determines whether the `ToggableElement` supports two or three states.<br />`isChecked` property can be set to `null` as a third state when `isThreeState` is `true` |
| `label`         |                 |           | `string`                                     | Gets or sets the `label` property.<br />The default value is an empty string, which means no label is displayed. |
| `labelPosition` | `labelPosition` |           | `LabelPosition`                              | Gets or sets the `labelPosition` property.       |
| `lang`          | `lang`          |           | `string`                                     | The lang property indicates the language of the element's content. |
| `name`          | `name`          |           | `string`                                     | Gets or sets the `name` property.                |
| `required`      | `required`      |           | `boolean`                                    | Gets or sets the `required` property.            |
| `themeName`     |                 |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `unchecked`     |                 | readonly  | `IEventEmitter<IUncheckedEventDetail>`       | Called when the `isChecked` property is `false`.<br />Provides reference to the `IUncheckedEventDetail` as event argument. |
| `value`         | `value`         |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`       | `variant`       |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `check`                 | `(): void`                                       | Checks the element.<br />If the element is disabled, nothing happens. |
| `checkValidity`         | `(): boolean`                                    | Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `reset`                 | `(): void`                                       | Resets the element to its initial state.         |
| `toggle`                | `(): void`                                       | Toggles the element between checked and unchecked states. |
| `uncheck`               | `(): void`                                       | Unchecks the element.<br />If the element is disabled, nothing happens. |

## Events

| Event           | Type                   | Description                                      |
|-----------------|------------------------|--------------------------------------------------|
| `changed`       | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `checked`       | `CheckedEvent`         | Dispatched when the element transitions to checked state (isChecked = true) |
| `connected`     | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`  | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `indeterminate` | `IndeterminateEvent`   | Dispatched when the element transitions to indeterminate state (isChecked = null, requires isThreeState = true) |
| `unchecked`     | `UncheckedEvent`       | Dispatched when the element transitions to unchecked state (isChecked = false) |

## Slots

| Name        | Description                                      |
|-------------|--------------------------------------------------|
| `checkmark` | Custom checkmark/switch indicator content.       |
| `label`     | Custom label content.                            |
| `prefix`    | Content placed before the switch control.        |
| `style`     | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix`    | Content placed after the switch control.         |

## CSS Shadow Parts

| Part        | Description                        |
|-------------|------------------------------------|
| `checkmark` | The visual switch control.         |
| `focusRing` | The focus ring indicator.          |
| `input`     | The hidden checkbox input element. |
| `label`     | The text label element.            |

## CSS Custom Properties

| Property                               | Type   | Description                                      |
|----------------------------------------|--------|--------------------------------------------------|
| `--toggle-switch-background-color`     | String | The switch background color CSS custom property. |
| `--toggle-switch-border-color`         | Color  | The border color.                                |
| `--toggle-switch-border-radius`        | String | The border radius.                               |
| `--toggle-switch-border-style`         | String | The border style.                                |
| `--toggle-switch-border-width`         | String | The border width.                                |
| `--toggle-switch-font-family`          | String | The font family.                                 |
| `--toggle-switch-font-letter-spacing`  | String | The font letter spacing.                         |
| `--toggle-switch-font-line-height`     | String | The font line height.                            |
| `--toggle-switch-font-size`            | String | The font size.                                   |
| `--toggle-switch-font-text-decoration` | String | The font text decoration.                        |
| `--toggle-switch-font-text-transform`  | String | The font text transform.                         |
| `--toggle-switch-font-weight`          | String | The font weight.                                 |
| `--toggle-switch-foreground-color`     | String | The switch foreground color CSS custom property. |
| `--toggle-switch-gap`                  | String | The gap between elements.                        |
| `--toggle-switch-padding-bottom`       | String | The padding bottom.                              |
| `--toggle-switch-padding-left`         | String | The padding left.                                |
| `--toggle-switch-padding-right`        | String | The padding right.                               |
| `--toggle-switch-padding-top`          | String | The padding top.                                 |
| `--toggle-switch-shadow`               | String | The switch shadow CSS custom property.           |
| `--toggle-switch-shadow-blur`          | String | The switch shadow blur CSS custom property.      |
| `--toggle-switch-shadow-color`         | String | The switch shadow color CSS custom property.     |
| `--toggle-switch-shadow-offset-x`      | String | The switch shadow offset x CSS custom property.  |
| `--toggle-switch-shadow-offset-y`      | String | The switch shadow offset y CSS custom property.  |
| `--toggle-switch-shadow-spread`        | String | The switch shadow spread CSS custom property.    |
| `--toggle-switch-transition-duration`  | String | The transition duration.                         |
| `--toggle-switch-transition-mode`      | String | The switch transition mode CSS custom property.  |
| `--toggle-switch-transition-property`  | String | The switch transition property CSS custom property. |
| `--toggle-switch-translate`            | String | The switch translate CSS custom property.        |

# ToggleTipElement - Interactive help icon with toggleable tooltip

## Description
The ToggleTip element combines an information icon with a tooltip to provide on-demand help and context. Unlike standard tooltips that appear on hover, toggletips are explicitly triggered and can remain visible while users interact with the content. Supports various trigger modes (hover, click, focus), placement options, delays, and customizable offset positioning. Ideal for inline help, form field explanations, and feature descriptions.

## Element
- **Tag**: `mosaik-toggletip`
- **Category**: Primitives

## Slots
- **default** - Custom trigger content (overrides default info icon)

## CSS Parts
- `tooltip` - The tooltip component container

## Dependencies
- `mosaik-tooltip` - Tooltip component for displaying content
- `mosaik-icon` - Icon component for the info indicator

## Examples

### Basic toggle with hover trigger
```html
<label for="password">
    Password
    <mosaik-toggletip
        content="Must be at least 8 characters with uppercase, lowercase, and numbers">
    </mosaik-toggletip>
</label>
<input type="password" id="password">
```

### Click-triggered toggletip
```html
<mosaik-toggletip
    content="Click the settings icon to customize your preferences"
    trigger="click"
    stays-open="true"
    placement="right">
</mosaik-toggletip>
```

### Custom positioning
```html
<mosaik-toggletip
    content="This is a detailed explanation that appears above"
    placement="top"
    horizontal-offset="0"
    vertical-offset="12"
    size="small">
</mosaik-toggletip>
```

### With delays and formatting
```html
<mosaik-toggletip
    id="helpTip"
    content="Feature available in {plan} plan"
    show-delay="300"
    hide-delay="100"
    placement="bottom">
</mosaik-toggletip>

<script>
    document.getElementById('helpTip').formatter = (text) => 
        text.replace('{plan}', 'Premium');
</script>
```

# mosaik-toggletip

ToggleTip - An interactive icon that displays contextual help content in a toggleable tooltip.

**Mixins:** Themeable, Disableable, Sizeable, TextFormattable, Dimensionable

## Examples

Basic toggletip with hover trigger:

```html
<label for="password">
  Password
  <mosaik-toggletip
    content="Must be at least 8 characters with uppercase, lowercase, and numbers">
  </mosaik-toggletip>
</label>
<input type="password" id="password">
```

Click-triggered toggletip that stays open:

```html
<mosaik-toggletip
  content="Click the settings icon to customize your preferences"
  trigger="click"
  stays-open
  placement="right">
</mosaik-toggletip>
```

Toggletip with custom positioning:

```html
<mosaik-toggletip
  content="This is a detailed explanation that appears above"
  placement="top"
  horizontal-offset="0"
  vertical-offset="12"
  size="small">
</mosaik-toggletip>
```

Toggletip with delays and custom formatting:

```html
<mosaik-toggletip
  id="helpTip"
  content="Feature available in {plan} plan"
  show-delay="300"
  hide-delay="100"
  placement="bottom">
</mosaik-toggletip>

<script>
  document.getElementById('helpTip').formatter = (text) =>
    text.replace('{plan}', 'Premium');
</script>
```

## Properties

| Property           | Attribute          | Modifiers | Type                                         | Description                                      |
|--------------------|--------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`          |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`          | `content`          |           | `string`                                     | Gets or sets the `content` property.             |
| `dir`              | `dir`              |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`         |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `formatter`        |                    |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `height`           | `height`           |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `hideDelay`        | `hideDelay`        |           | `number`                                     | Gets or sets the `hideDelay` property.           |
| `horizontalOffset` | `horizontalOffset` |           | `number`                                     | Gets or sets the `horizontalOffset` property.    |
| `isOpen`           | `isOpen`           |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`             | `lang`             |           | `string`                                     | The lang property indicates the language of the element's content. |
| `placement`        | `placement`        |           | `Placement`                                  | Gets or sets the `placement` property.           |
| `showDelay`        | `showDelay`        |           | `number`                                     | Gets or sets the `showDelay` property.           |
| `size`             | `size`             |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `staysOpen`        | `staysOpen`        |           | `boolean`                                    | Gets or sets the `staysOpen` property.           |
| `themeName`        |                    |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `trigger`          | `trigger`          |           | `Trigger`                                    | Gets or sets the `trigger` property.             |
| `verticalOffset`   | `verticalOffset`   |           | `number`                                     | Gets or sets the `verticalOffset` property.      |
| `width`            | `width`            |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`         | `(): void`                                       |                                                  |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `open`          | `(): void`                                       |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description                     |
|-----------|---------------------------------|
| `tooltip` | The tooltip component container |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--toggle-tip-background-color`     | String | The tip background color CSS custom property.    |
| `--toggle-tip-font-family`          | String | The tip font family CSS custom property.         |
| `--toggle-tip-font-letter-spacing`  | String | The tip font letter spacing CSS custom property. |
| `--toggle-tip-font-line-height`     | String | The tip font line height CSS custom property.    |
| `--toggle-tip-font-size`            | String | The tip font size CSS custom property.           |
| `--toggle-tip-font-text-decoration` | String | The tip font text decoration CSS custom property. |
| `--toggle-tip-font-text-transform`  | String | The tip font text transform CSS custom property. |
| `--toggle-tip-font-weight`          | String | The tip font weight CSS custom property.         |
| `--toggle-tip-foreground-color`     | String | The tip foreground color CSS custom property.    |
| `--toggle-tip-gap`                  | String | The tip gap CSS custom property.                 |
| `--toggle-tip-padding-bottom`       | String | The tip padding bottom CSS custom property.      |
| `--toggle-tip-padding-left`         | String | The tip padding left CSS custom property.        |
| `--toggle-tip-padding-right`        | String | The tip padding right CSS custom property.       |
| `--toggle-tip-padding-top`          | String | The tip padding top CSS custom property.         |
| `--toggle-tip-shadow`               | String | The tip shadow CSS custom property.              |
| `--toggle-tip-shadow-blur`          | String | The tip shadow blur CSS custom property.         |
| `--toggle-tip-shadow-color`         | String | The tip shadow color CSS custom property.        |
| `--toggle-tip-shadow-offset-x`      | String | The tip shadow offset x CSS custom property.     |
| `--toggle-tip-shadow-offset-y`      | String | The tip shadow offset y CSS custom property.     |
| `--toggle-tip-shadow-spread`        | String | The tip shadow spread CSS custom property.       |
| `--toggle-tip-transition-duration`  | String | The tip transition duration CSS custom property. |
| `--toggle-tip-transition-mode`      | String | The tip transition mode CSS custom property.     |
| `--toggle-tip-transition-property`  | String | The tip transition property CSS custom property. |
| `--toggle-tip-translate`            | String | The tip translate CSS custom property.           |
| `--toggletip-background-color`      | Color  | Background color of the toggletip                |
| `--toggletip-foreground-color`      | Color  | Foreground color of the toggletip                |
| `--toggletip-padding-bottom`        | String | Padding bottom of the toggletip                  |
| `--toggletip-padding-left`          | String | Padding left of the toggletip                    |
| `--toggletip-padding-right`         | String | Padding right of the toggletip                   |
| `--toggletip-padding-top`           | String | Padding top of the toggletip                     |

# mosaik-toolbar

Toolbar - A horizontal container component for organizing actions, controls, and navigation elements.

**Mixins:** Themeable, Variantable, Appearanceable, Fitable, TextFormattable, Slottable

## Examples

Basic application header:

```html
<mosaik-toolbar title="My Application">
  <mosaik-button slot="start" appearance="plain"></mosaik-button>
  <mosaik-button slot="end" appearance="plain"></mosaik-button>
</mosaik-toolbar>
```

Document toolbar with subtitle:

```html
<mosaik-toolbar title="Document.pdf" sub-title="Last modified: Today">
  <mosaik-button slot="start"></mosaik-button>
  <mosaik-button slot="end" variant="error"></mosaik-button>
</mosaik-toolbar>
```

Navigation toolbar with variant:

```html
<mosaik-toolbar variant="primary" appearance="solid">
  <mosaik-button slot="start"></mosaik-button>
  <span slot="title">Settings</span>
  <mosaik-button slot="end"></mosaik-button>
</mosaik-toolbar>
```

## Properties

| Property       | Attribute    | Modifiers | Type                                         | Description                                      |
|----------------|--------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`   | `appearance` |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`      |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |              | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`        |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |              | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`          | `fit`        |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `formatter`    |              |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `lang`         | `lang`       |           | `string`                                     | The lang property indicates the language of the element's content. |
| `subTitle`     | `subTitle`   |           | `string`                                     | Gets or sets the `subTitle` property.            |
| `themeName`    |              |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `title`        |              |           | `string`                                     | Gets or sets the `title` property.               |
| `variant`      | `variant`    |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name       | Description                                      |
|------------|--------------------------------------------------|
|            | Default content slot for main toolbar controls and elements |
| `end`      | Trailing content area for secondary actions, user menus, or controls |
| `start`    | Leading content area for navigation buttons or primary actions |
| `style`    | Custom styles injection slot for shadow DOM styling escape hatch |
| `subTitle` | Secondary title or subtitle text for additional context |
| `title`    | Primary toolbar title or heading text            |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `main`     | Main content section container for default slot and titles |
| `root`     | Root container for the entire toolbar layout     |
| `subTitle` | Subtitle section styling container               |
| `title`    | Title section styling container                  |

## CSS Custom Properties

| Property                         | Type   | Description                                   |
|----------------------------------|--------|-----------------------------------------------|
| `--toolbar-background-color`     | String | Background color of the toolbar container     |
| `--toolbar-border-color`         | String | Border color for toolbar edges                |
| `--toolbar-border-radius`        | String | Border radius for toolbar corner rounding     |
| `--toolbar-border-style`         | String | Border line style (solid, dashed, dotted)     |
| `--toolbar-border-width`         | String | Border width for toolbar outline              |
| `--toolbar-font-family`          | String | Font family for toolbar text                  |
| `--toolbar-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--toolbar-font-line-height`     | String | The font line height CSS custom property.     |
| `--toolbar-font-size`            | String | Font size for toolbar text                    |
| `--toolbar-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--toolbar-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--toolbar-font-weight`          | String | Font weight for toolbar text                  |
| `--toolbar-foreground-color`     | String | Primary text and icon color                   |
| `--toolbar-gap`                  | String | Spacing between toolbar sections and elements |
| `--toolbar-height`               | String | Height of the toolbar container               |
| `--toolbar-line-height`          | String | Line height for toolbar text                  |
| `--toolbar-padding-bottom`       | String | Bottom padding for toolbar content            |
| `--toolbar-padding-left`         | String | Left padding for toolbar content              |
| `--toolbar-padding-right`        | String | Right padding for toolbar content             |
| `--toolbar-padding-top`          | String | Top padding for toolbar content               |
| `--toolbar-shadow`               | String | The shadow CSS custom property.               |
| `--toolbar-shadow-blur`          | String | Shadow blur radius for elevation effect       |
| `--toolbar-shadow-color`         | String | Shadow color for elevation effect             |
| `--toolbar-shadow-offset-x`      | String | Horizontal shadow offset                      |
| `--toolbar-shadow-offset-y`      | String | Vertical shadow offset                        |
| `--toolbar-shadow-spread`        | String | Shadow spread radius                          |
| `--toolbar-transition-duration`  | String | Duration of hover and state transitions       |
| `--toolbar-transition-mode`      | String | Timing function for transitions               |
| `--toolbar-transition-property`  | String | CSS properties to transition                  |
| `--toolbar-translate`            | String | The translate CSS custom property.            |

# mosaik-tooltip

Tooltip - A contextual popup that displays helpful information when hovering over or focusing on an element.

**Mixins:** Themeable, Animatable, Attachable, Disableable, TextFormattable, Openable, Closeable, Slottable, Dimensionable

## Examples

Basic tooltip on hover:

```html
<mosaik-tooltip content="Click to save your changes">
  <button>Save</button>
</mosaik-tooltip>
```

Tooltip with custom placement:

```html
<mosaik-tooltip content="User profile settings" placement="right">
  <mosaik-icon data="user-icon"></mosaik-icon>
</mosaik-tooltip>
```

Tooltip with click trigger:

```html
<mosaik-tooltip content="Detailed information here" trigger="click" stays-open>
  <span>Click for info</span>
</mosaik-tooltip>
```

Tooltip with custom delays:

```html
<mosaik-tooltip
  content="This appears after 500ms"
  show-delay="500"
  hide-delay="200">
  <button>Hover me</button>
</mosaik-tooltip>
```

Programmatic tooltip control:

```html
<mosaik-tooltip id="myTooltip" content="Programmatically controlled" trigger="manual">
  <button id="trigger">Show tooltip</button>
</mosaik-tooltip>
<script>
  const tooltip = document.querySelector('#myTooltip');
  const trigger = document.querySelector('#trigger');
  trigger.addEventListener('click', () => {
    tooltip.open();
  });
</script>
```

## Properties

| Property            | Attribute          | Modifiers | Type                                         | Description                                      |
|---------------------|--------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `anchorElement`     |                    | readonly  | `HTMLElement \| null`                        | Gets the anchor element for the floating popup.<br />This is the slotted control or the explicitly attached control. |
| `animationTarget`   |                    | readonly  | `HTMLElement \| undefined`                   | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`           |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `closeable`         | `closeable`        |           | `boolean`                                    | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`            |                    |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`         |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `content`           | `content`          |           | `string`                                     | Gets or sets the `content` property.             |
| `control`           |                    | readonly  | `HTMLElement \| null`                        | The element that controls the visibility of the attachable element. It is<br />one of:<br /><br />- The control referenced by the `for` attribute.<br />- The control provided to `element.attach(control)`<br />- The element's parent.<br />- `null` if the element is not controlled. |
| `dir`               | `dir`              |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled`         |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `enter`             | `enter`            |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`              | `exit`             |           | `IAnimationReferenceMetadata \| null`        | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `for`               | `for`              |           | `string \| null`                             | Reflects the value of the `for` attribute, which is the ID of the element's<br />associated control.<br /><br />Use this when the elements's associated control is not its parent.<br /><br />To manually control an element, set its `for` attribute to `""`. |
| `formattedContent`  |                    | readonly  | `string`                                     | Gets the formatted content string.               |
| `formatter`         |                    |           | `TextFormatter \| null`                      | Gets or sets the `formatter` property.<br />The default value is `null`, which means no formatter is set. |
| `hasSlottedContent` |                    | readonly  | `boolean`                                    | Gets whether slotted content is projected into the tooltip. |
| `height`            | `height`           |           | `CssLength`                                  | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `hideDelay`         | `hideDelay`        |           | `number`                                     | Gets or sets the `hideDelay` property.           |
| `horizontalOffset`  | `horizontalOffset` |           | `number`                                     | Gets or sets the `horizontalOffset` property.    |
| `isFloatingActive`  |                    | readonly  | `boolean`                                    | Gets whether the floating popup should be active.<br />FloatingElement handles its own enter/exit animations. |
| `isOpen`            | `isOpen`           |           | `boolean`                                    | Gets or sets the `isOpen` property.              |
| `lang`              | `lang`             |           | `string`                                     | The lang property indicates the language of the element's content. |
| `opened`            |                    |           | `IEventEmitter<ICancelEventDetail>`          | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `placement`         | `placement`        |           | `Placement`                                  | Gets or sets the `placement` property.           |
| `showDelay`         | `showDelay`        |           | `number`                                     | Gets or sets the `showDelay` property.           |
| `staysOpen`         | `staysOpen`        |           | `boolean`                                    | Gets or sets the `staysOpen` property.           |
| `themeName`         |                    |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `trigger`           | `trigger`          |           | `Trigger`                                    | Gets or sets the `trigger` property.             |
| `verticalOffset`    | `verticalOffset`   |           | `number`                                     | Gets or sets the `verticalOffset` property.      |
| `width`             | `width`            |           | `CssLength`                                  | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `attach`               | `(control: string \| HTMLElement): void`         | Attaches the element to an interactive control.  |
| `close`                | `(): Promise<boolean>`                           | Closes the tooltip.                              |
| `detach`               | `(): void`                                       | Detaches the element from its current control.   |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation`     | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`      | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `open`                 | `(): Promise<void>`                              | Opens the tooltip.                               |
| `play`                 | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Fired when the tooltip is closed                 |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Fired when the tooltip is opened                 |

## Slots

| Name      | Description                                      |
|-----------|--------------------------------------------------|
|           | The trigger element that activates the tooltip   |
| `content` | The tooltip content (text, elements, or formatted content) |
| `style`   | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part         | Description                                  |
|--------------|----------------------------------------------|
| `body`       | The main tooltip body containing the content |
| `popup`      | The popup part.                              |
| `portal`     | The portal part.                             |
| `projection` | The projection part.                         |
| `text`       | The text content display element             |

## CSS Custom Properties

| Property                         | Type   | Description                                  |
|----------------------------------|--------|----------------------------------------------|
| `--tooltip-background-color`     | String | Background color of the tooltip              |
| `--tooltip-border-color`         | String | Border color of the tooltip outline          |
| `--tooltip-border-radius`        | String | Corner rounding radius                       |
| `--tooltip-border-style`         | String | Border line style                            |
| `--tooltip-border-width`         | String | Border thickness                             |
| `--tooltip-font-family`          | String | Font family for tooltip text                 |
| `--tooltip-font-letter-spacing`  | String | Letter spacing for tooltip text              |
| `--tooltip-font-line-height`     | String | Line height for tooltip text                 |
| `--tooltip-font-size`            | String | Font size for tooltip text                   |
| `--tooltip-font-text-decoration` | String | Text decoration style                        |
| `--tooltip-font-text-transform`  | String | Text transformation style                    |
| `--tooltip-font-weight`          | String | Font weight for tooltip text                 |
| `--tooltip-foreground-color`     | String | Text color                                   |
| `--tooltip-gap`                  | String | Spacing between tooltip elements             |
| `--tooltip-max-width`            | String | Maximum width of the tooltip                 |
| `--tooltip-padding-bottom`       | String | Bottom padding inside the tooltip            |
| `--tooltip-padding-left`         | String | Left padding inside the tooltip              |
| `--tooltip-padding-right`        | String | Right padding inside the tooltip             |
| `--tooltip-padding-top`          | String | Top padding inside the tooltip               |
| `--tooltip-shadow`               | String | The shadow CSS custom property.              |
| `--tooltip-shadow-blur`          | String | The shadow blur CSS custom property.         |
| `--tooltip-shadow-color`         | String | The shadow color CSS custom property.        |
| `--tooltip-shadow-offset-x`      | String | The shadow offset x CSS custom property.     |
| `--tooltip-shadow-offset-y`      | String | The shadow offset y CSS custom property.     |
| `--tooltip-shadow-spread`        | String | The shadow spread CSS custom property.       |
| `--tooltip-transition-duration`  | String | The transition duration CSS custom property. |
| `--tooltip-transition-mode`      | String | The transition mode CSS custom property.     |
| `--tooltip-transition-property`  | String | The transition property CSS custom property. |
| `--tooltip-translate`            | String | The translate CSS custom property.           |

# mosaik-tour-anchor

TourAnchor - A marker element that registers a target for guided tour steps.

**Mixins:** Themeable

## Examples

Anchor wrapping a button for tour step "step-1":

```html
<mosaik-tour-anchor tour-id="onboarding" anchor-id="step-1">
  <mosaik-button variant="primary"><span slot="label">Get Started</span></mosaik-button>
</mosaik-tour-anchor>
```

Anchor wrapping a navigation item:

```html
<mosaik-tour-anchor tour-id="onboarding" anchor-id="nav-home">
  <a href="/home">Home</a>
</mosaik-tour-anchor>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `anchorId`     | `anchorId` |           | `string`                                     | Gets or sets the `anchorId` property.            |
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tourId`       | `tourId`   |           | `string`                                     | Gets or sets the `tourId` property.              |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | Content that should be associated with the anchor. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--tour-anchor-display`              | String | The anchor display CSS custom property.          |
| `--tour-anchor-font-family`          | String | The anchor font family CSS custom property.      |
| `--tour-anchor-font-letter-spacing`  | String | The anchor font letter spacing CSS custom property. |
| `--tour-anchor-font-line-height`     | String | The anchor font line height CSS custom property. |
| `--tour-anchor-font-size`            | String | The anchor font size CSS custom property.        |
| `--tour-anchor-font-text-decoration` | String | The anchor font text decoration CSS custom property. |
| `--tour-anchor-font-text-transform`  | String | The anchor font text transform CSS custom property. |
| `--tour-anchor-font-weight`          | String | The anchor font weight CSS custom property.      |
| `--tour-anchor-gap`                  | String | The anchor gap CSS custom property.              |
| `--tour-anchor-padding-bottom`       | String | The anchor padding bottom CSS custom property.   |
| `--tour-anchor-padding-left`         | String | The anchor padding left CSS custom property.     |
| `--tour-anchor-padding-right`        | String | The anchor padding right CSS custom property.    |
| `--tour-anchor-padding-top`          | String | The anchor padding top CSS custom property.      |
| `--tour-anchor-position`             | String | The anchor position CSS custom property.         |
| `--tour-anchor-shadow`               | String | The anchor shadow CSS custom property.           |
| `--tour-anchor-shadow-blur`          | String | The anchor shadow blur CSS custom property.      |
| `--tour-anchor-shadow-color`         | String | The anchor shadow color CSS custom property.     |
| `--tour-anchor-shadow-offset-x`      | String | The anchor shadow offset x CSS custom property.  |
| `--tour-anchor-shadow-offset-y`      | String | The anchor shadow offset y CSS custom property.  |
| `--tour-anchor-shadow-spread`        | String | The anchor shadow spread CSS custom property.    |
| `--tour-anchor-transition-duration`  | String | The anchor transition duration CSS custom property. |
| `--tour-anchor-transition-mode`      | String | The anchor transition mode CSS custom property.  |
| `--tour-anchor-transition-property`  | String | The anchor transition property CSS custom property. |
| `--tour-anchor-translate`            | String | The anchor translate CSS custom property.        |

# mosaik-tour-step

TourStep - Displays the content and navigation controls for a single tour step.

**Mixins:** Themeable

## Example

Tour step managed by the parent tour element:

```html
<!-- mosaik-tour-step is rendered automatically by mosaik-tour -->
<mosaik-tour tour-id="onboarding"></mosaik-tour>
```

## Properties

| Property         | Attribute | Modifiers | Type                                         | Description                                      |
|------------------|-----------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`        |           | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |           | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`     |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`   |           | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `finish`         |           | readonly  | `IEventEmitter<IEventDetail>`                | Fired when the finish action is triggered.       |
| `isFirstStep`    |           |           | `boolean`                                    | Gets or sets whether this is the first step.     |
| `isLastStep`     |           |           | `boolean`                                    | Gets or sets whether this is the last step.      |
| `lang`           | `lang`    |           | `string`                                     | The lang property indicates the language of the element's content. |
| `next`           |           | readonly  | `IEventEmitter<IEventDetail>`                | Fired when the next action is triggered.         |
| `previous`       |           | readonly  | `IEventEmitter<IEventDetail>`                | Fired when the previous action is triggered.     |
| `resolvedLabels` |           | readonly  | `ITourStepLabels`                            | Provides resolved labels for the current step.   |
| `skip`           |           | readonly  | `IEventEmitter<IEventDetail>`                | Fired when the skip action is triggered.         |
| `step`           |           |           | `ITourStep \| null`                          | Gets or sets the step data.                      |
| `themeName`      |           |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method              | Type                                             | Description                                      |
|---------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`        | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`              | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`               | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onFinishClicked`   | `(): void`                                       | Emits the finish action event.                   |
| `onNextClicked`     | `(): void`                                       | Emits the next action event.                     |
| `onPreviousClicked` | `(): void`                                       | Emits the previous action event.                 |
| `onSkipClicked`     | `(): void`                                       | Emits the skip action event.                     |
| `requestUpdate`     | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description           |
|---------------|-----------------------|
| `actions`     | The actions part.     |
| `container`   | The container part.   |
| `content`     | The content part.     |
| `description` | The description part. |
| `finish`      | The finish part.      |
| `header`      | The header part.      |
| `next`        | The next part.        |
| `previous`    | The previous part.    |
| `skip`        | The skip part.        |
| `title`       | The title part.       |

## CSS Custom Properties

| Property                            | Type   | Description                                      |
|-------------------------------------|--------|--------------------------------------------------|
| `--tour-step-background-color`      | String | The step background color CSS custom property.   |
| `--tour-step-border-color`          | String | The step border color CSS custom property.       |
| `--tour-step-border-radius`         | String | The step border radius CSS custom property.      |
| `--tour-step-border-style`          | String | The step border style CSS custom property.       |
| `--tour-step-border-width`          | String | The step border width CSS custom property.       |
| `--tour-step-content-margin-bottom` | String | The step content margin bottom CSS custom property. |
| `--tour-step-font-family`           | String | The step font family CSS custom property.        |
| `--tour-step-font-letter-spacing`   | String | The step font letter spacing CSS custom property. |
| `--tour-step-font-line-height`      | String | The step font line height CSS custom property.   |
| `--tour-step-font-size`             | String | The step font size CSS custom property.          |
| `--tour-step-font-text-decoration`  | String | The step font text decoration CSS custom property. |
| `--tour-step-font-text-transform`   | String | The step font text transform CSS custom property. |
| `--tour-step-font-weight`           | String | The step font weight CSS custom property.        |
| `--tour-step-foreground-color`      | String | The step foreground color CSS custom property.   |
| `--tour-step-gap`                   | String | The step gap CSS custom property.                |
| `--tour-step-header-font-weight`    | String | The step header font weight CSS custom property. |
| `--tour-step-header-margin-bottom`  | String | The step header margin bottom CSS custom property. |
| `--tour-step-padding-bottom`        | String | The step padding bottom CSS custom property.     |
| `--tour-step-padding-left`          | String | The step padding left CSS custom property.       |
| `--tour-step-padding-right`         | String | The step padding right CSS custom property.      |
| `--tour-step-padding-top`           | String | The step padding top CSS custom property.        |
| `--tour-step-shadow`                | String | The step shadow CSS custom property.             |
| `--tour-step-shadow-blur`           | String | The step shadow blur CSS custom property.        |
| `--tour-step-shadow-color`          | String | The step shadow color CSS custom property.       |
| `--tour-step-shadow-offset-x`       | String | The step shadow offset x CSS custom property.    |
| `--tour-step-shadow-offset-y`       | String | The step shadow offset y CSS custom property.    |
| `--tour-step-shadow-spread`         | String | The step shadow spread CSS custom property.      |
| `--tour-step-transition-duration`   | String | The step transition duration CSS custom property. |
| `--tour-step-transition-mode`       | String | The step transition mode CSS custom property.    |
| `--tour-step-transition-property`   | String | The step transition property CSS custom property. |
| `--tour-step-translate`             | String | The step translate CSS custom property.          |

# mosaik-tour

Tour - Guides users through a sequence of steps anchored to UI elements.

**Mixins:** Themeable, Openable, Closeable

## Example

Basic tour identified by tour-id:

```html
<mosaik-tour tour-id="onboarding"></mosaik-tour>
```

## Properties

| Property              | Attribute             | Modifiers | Type                                         | Default | Description                                      |
|-----------------------|-----------------------|-----------|----------------------------------------------|---------|--------------------------------------------------|
| `changed`             |                       | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |         | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `clickOutsideToClose` | `clickOutsideToClose` |           | `boolean`                                    | true    | Gets or sets the `clickOutsideToClose` property. |
| `closeable`           | `closeable`           |           | `boolean`                                    |         | Gets or sets the `closeable` property.<br />The default value is `false`, which means the element is not closeable. |
| `closed`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |         | Called when the `close` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `connected`           |                       | readonly  | `IEventEmitter<void>`                        |         | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `currentStep`         |                       | readonly  | `ITourStep \| null`                          |         | Gets the current step.                           |
| `dir`                 | `dir`                 |           | `FlowDirection`                              |         | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected`        |                       | readonly  | `IEventEmitter<void>`                        |         | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `ended`               |                       | readonly  | `IEventEmitter<IEventDetail>`                |         | Fired when the tour is ended.                    |
| `hasBackdrop`         | `hasBackdrop`         |           | `boolean`                                    | true    | Gets or sets the `hasBackdrop` property.         |
| `isFirstStep`         |                       | readonly  | `boolean`                                    |         | Indicates whether the current step is the first step. |
| `isLastStep`          |                       | readonly  | `boolean`                                    |         | Indicates whether the current step is the last step. |
| `isOpen`              | `isOpen`              |           | `boolean`                                    |         | Gets or sets the `isOpen` property.              |
| `lang`                | `lang`                |           | `string`                                     |         | The lang property indicates the language of the element's content. |
| `opened`              |                       |           | `IEventEmitter<ICancelEventDetail>`          |         | Called when the `open` method is called.<br />Provides reference to the `ICancelEventDetail` as event argument. |
| `pressEscapeToClose`  | `pressEscapeToClose`  |           | `boolean`                                    | true    | Gets or sets the `pressEscapeToClose` property.  |
| `started`             |                       | readonly  | `IEventEmitter<IEventDetail>`                |         | Fired when the tour is started.                  |
| `stepChanged`         |                       | readonly  | `IEventEmitter<ITourStepChangedEventDetail>` |         | Fired when the tour step changes.                |
| `steps`               |                       |           | `ITourStep[]`                                |         | Gets or sets the tour steps.                     |
| `themeName`           |                       |           | `string`                                     |         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `tooltipStyles`       |                       | readonly  | `Record<string, string>`                     |         | Gets the tooltip styles used for positioning.    |
| `tourId`              | `tourId`              |           | `string`                                     |         | Gets or sets the `tourId` property.              |

## Methods

| Method              | Type                                             | Description                                      |
|---------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`        | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `close`             | `(): Promise<boolean>`                           | Closes the `OverlayElement`.                     |
| `emit`              | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `finish`            | `(): void`                                       | Ends the tour and closes the overlay.            |
| `next`              | `(): void`                                       | Moves to the next step in the tour.              |
| `off`               | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onBackdropClicked` | `(event: MouseEvent): void`                      | Handles backdrop clicks.                         |
| `open`              | `(): Promise<void>`                              | Opens the `OverlayElement`.                      |
| `previous`          | `(): void`                                       | Moves to the previous step in the tour.          |
| `requestUpdate`     | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `showStep`          | `(stepId: string): void`                         | Shows the specified step by its identifier.      |
| `skip`              | `(): void`                                       | Skips the current tour.                          |
| `start`             | `(): void`                                       | Starts the tour from the first step.             |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `closed`       | `ClosedEvent`          | Dispatched when the overlay completes its close transition (isOpen becomes false) |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `opened`       | `OpenedEvent`          | Dispatched when the overlay completes its open transition (isOpen becomes true) |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part       | Description        |
|------------|--------------------|
| `backdrop` | The backdrop part. |
| `tooltip`  | The tooltip part.  |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--tour-font-family`          | String | The font family CSS custom property.          |
| `--tour-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--tour-font-line-height`     | String | The font line height CSS custom property.     |
| `--tour-font-size`            | String | The font size CSS custom property.            |
| `--tour-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--tour-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--tour-font-weight`          | String | The font weight CSS custom property.          |
| `--tour-gap`                  | String | The gap CSS custom property.                  |
| `--tour-overlay-zindex`       | String | The overlay zindex CSS custom property.       |
| `--tour-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--tour-padding-left`         | String | The padding left CSS custom property.         |
| `--tour-padding-right`        | String | The padding right CSS custom property.        |
| `--tour-padding-top`          | String | The padding top CSS custom property.          |
| `--tour-shadow`               | String | The shadow CSS custom property.               |
| `--tour-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--tour-shadow-color`         | String | The shadow color CSS custom property.         |
| `--tour-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--tour-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--tour-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--tour-tooltip-max-width`    | String | The tooltip max width CSS custom property.    |
| `--tour-transition-duration`  | String | The transition duration CSS custom property.  |
| `--tour-transition-mode`      | String | The transition mode CSS custom property.      |
| `--tour-transition-property`  | String | The transition property CSS custom property.  |
| `--tour-translate`            | String | The translate CSS custom property.            |

# mosaik-tree-item

Tree Item - A single node within a tree hierarchy that can contain nested child items.

**Mixins:** Themeable, Disableable, Valueable, Variantable, Focusable, Slottable, Busyable

## Examples

Basic tree item:

```html
<mosaik-tree-item>Documents</mosaik-tree-item>
```

Expanded tree item with nested children:

```html
<mosaik-tree-item is-expanded>
  Projects
  <mosaik-tree-item>Website</mosaik-tree-item>
  <mosaik-tree-item>Mobile App</mosaik-tree-item>
</mosaik-tree-item>
```

Checked tree item:

```html
<mosaik-tree-item is-checked>Selected Item</mosaik-tree-item>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`   |               | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`     | `disabled`    |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`  |               | readonly  | `string`                                     | Gets the `displayText` property.                 |
| `hasChildren`  | `hasChildren` |           | `boolean`                                    | The `hasChildren` property represents whether the element has children or not. |
| `index`        |               | readonly  | `number`                                     | Gets the index of the item.                      |
| `isBusy`       | `is-busy`     |           | `boolean`                                    | A visual characteristics and presentation of this element.<br />The default value is `false`, which means the element is not busy. |
| `isChecked`    | `isChecked`   |           | `boolean`                                    | Gets or sets the `isChecked` property.           |
| `isExpanded`   | `isExpanded`  |           | `boolean`                                    | Gets or sets the `isExpanded` property.          |
| `isFocused`    | `is-focused`  |           | `boolean`                                    | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `false`, which means the element is not focused. |
| `isSelected`   | `isSelected`  |           | `boolean`                                    | Gets or sets the `isSelected` property.          |
| `items`        |               | readonly  | `TreeItemElement[]`                          | Gets all the list items in the list.             |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `selected`     |               | readonly  | `IEventEmitter<IEventDetail>`                | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `text`         |               |           | `string`                                     | Gets or sets the `text` property.                |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`        | `value`       |           | `TType`                                      | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |
| `variant`      | `variant`     |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method                  | Type                                             | Description                                      |
|-------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`            | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`          | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `collapse`              | `(): void`                                       | Collapses the tree item.                         |
| `deselect`              | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`                  | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `expand`                | `(): void`                                       | Expands the tree item.                           |
| `getSlotAssignments`    | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf`  | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`        | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`               | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`        | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasVisibleFocusInTree` | `(): boolean`                                    | Returns a value indicating whether the element has visible focus in the tree. |
| `off`                   | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                    | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`         | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden. |
| `requestUpdate`         | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`                | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |
| `toggle`                | `(): void`                                       | Toggles the expanded state of the tree item.     |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot.                                |
| `prefix` | The prefix slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | The suffix slot.                                 |
| `text`   | The text slot.                                   |

## CSS Shadow Parts

| Part               | Description                |
|--------------------|----------------------------|
| `caret`            | The caret part.            |
| `checkmark`        | The checkmark part.        |
| `expandable`       | The expandable part.       |
| `prefix`           | The prefix part.           |
| `prefix-container` | The prefix-container part. |
| `progressRing`     | The progressRing part.     |
| `root`             | The root part.             |
| `suffix`           | The suffix part.           |
| `text`             | The text part.             |

## CSS Custom Properties

| Property                           | Type   | Description                                      |
|------------------------------------|--------|--------------------------------------------------|
| `--tree-item-background-color`     | String | The item background color CSS custom property.   |
| `--tree-item-border-color`         | String | The item border color CSS custom property.       |
| `--tree-item-border-radius`        | String | The item border radius CSS custom property.      |
| `--tree-item-border-style`         | String | The item border style CSS custom property.       |
| `--tree-item-border-width`         | String | The item border width CSS custom property.       |
| `--tree-item-font-family`          | String | The item font family CSS custom property.        |
| `--tree-item-font-letter-spacing`  | String | The item font letter spacing CSS custom property. |
| `--tree-item-font-line-height`     | String | The item font line height CSS custom property.   |
| `--tree-item-font-size`            | String | The item font size CSS custom property.          |
| `--tree-item-font-text-decoration` | String | The item font text decoration CSS custom property. |
| `--tree-item-font-text-transform`  | String | The item font text transform CSS custom property. |
| `--tree-item-font-weight`          | String | The item font weight CSS custom property.        |
| `--tree-item-foreground-color`     | String | The item foreground color CSS custom property.   |
| `--tree-item-gap`                  | String | The item gap CSS custom property.                |
| `--tree-item-indent-color`         | String | The item indent color CSS custom property.       |
| `--tree-item-indent-offset`        | String | The item indent offset CSS custom property.      |
| `--tree-item-indent-size`          | String | The item indent size CSS custom property.        |
| `--tree-item-padding-bottom`       | String | The item padding bottom CSS custom property.     |
| `--tree-item-padding-left`         | String | The item padding left CSS custom property.       |
| `--tree-item-padding-right`        | String | The item padding right CSS custom property.      |
| `--tree-item-padding-top`          | String | The item padding top CSS custom property.        |
| `--tree-item-shadow`               | String | The item shadow CSS custom property.             |
| `--tree-item-shadow-blur`          | String | The item shadow blur CSS custom property.        |
| `--tree-item-shadow-color`         | String | The item shadow color CSS custom property.       |
| `--tree-item-shadow-offset-x`      | String | The item shadow offset x CSS custom property.    |
| `--tree-item-shadow-offset-y`      | String | The item shadow offset y CSS custom property.    |
| `--tree-item-shadow-spread`        | String | The item shadow spread CSS custom property.      |
| `--tree-item-transition-duration`  | String | The item transition duration CSS custom property. |
| `--tree-item-transition-mode`      | String | The item transition mode CSS custom property.    |
| `--tree-item-transition-property`  | String | The item transition property CSS custom property. |
| `--tree-item-translate`            | String | The item translate CSS custom property.          |

# mosaik-tree

Tree - A hierarchical structure that displays a collection of items, allowing users to expand and collapse branches to navigate through different levels of information.

**Mixins:** Themeable, Disableable, Slottable

## Example

Basic tree with expandable items:

```html
<mosaik-tree selection-mode="single">
  <mosaik-tree-item is-expanded>
    Documents
    <mosaik-tree-item>Report.pdf</mosaik-tree-item>
    <mosaik-tree-item>Budget.xlsx</mosaik-tree-item>
  </mosaik-tree-item>
  <mosaik-tree-item>Pictures</mosaik-tree-item>
</mosaik-tree>
```

## Properties

| Property           | Attribute       | Modifiers | Type                                             | Description                                      |
|--------------------|-----------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `changed`          |                 | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                 | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`              | `dir`           |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`      |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                 | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `items`            |                 | readonly  | `TreeItemElement[]`                              | Gets all the list items in the list.             |
| `itemsChanged`     |                 | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `lang`             | `lang`          |           | `string`                                         | The lang property indicates the language of the element's content. |
| `selectionChanged` |                 | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `selectionMode`    | `selectionMode` |           | `SelectionMode`                                  | Gets or sets the `selectionMode` property.       |
| `themeName`        |                 |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `deselect`             | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetSelection`       | `(): void`                                       | Resets the current selection.                    |
| `select`               | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`          | `(): void`                                       | Select the first item.                           |
| `selectLast`           | `(): void`                                       | Select the last item.                            |
| `selectNext`           | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious`       | `(): void`                                       | Select the previous item before current selected item/index. |

## Events

| Event              | Type                    | Description                                      |
|--------------------|-------------------------|--------------------------------------------------|
| `changed`          | `PropertyChangedEvent`  | Fired when any property changes                  |
| `connected`        | `ConnectedEvent`        | Fired when the element is connected to the DOM   |
| `disconnected`     | `DisconnectedEvent`     | Emitted when the element is disconnected from the DOM |
| `itemsChanged`     | `ItemsChangedEvent`     | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged` | `SelectionChangedEvent` | Fired when the selected item changes, providing both old and new selected items |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot.                                |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property                      | Type   | Description                                   |
|-------------------------------|--------|-----------------------------------------------|
| `--tree-font-family`          | String | The font family CSS custom property.          |
| `--tree-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--tree-font-line-height`     | String | The font line height CSS custom property.     |
| `--tree-font-size`            | String | The font size CSS custom property.            |
| `--tree-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--tree-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--tree-font-weight`          | String | The font weight CSS custom property.          |
| `--tree-gap`                  | String | The gap CSS custom property.                  |
| `--tree-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--tree-padding-left`         | String | The padding left CSS custom property.         |
| `--tree-padding-right`        | String | The padding right CSS custom property.        |
| `--tree-padding-top`          | String | The padding top CSS custom property.          |
| `--tree-shadow`               | String | The shadow CSS custom property.               |
| `--tree-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--tree-shadow-color`         | String | The shadow color CSS custom property.         |
| `--tree-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--tree-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--tree-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--tree-transition-duration`  | String | The transition duration CSS custom property.  |
| `--tree-transition-mode`      | String | The transition mode CSS custom property.      |
| `--tree-transition-property`  | String | The transition property CSS custom property.  |
| `--tree-translate`            | String | The translate CSS custom property.            |

# UpDownSpinnerElement - Increment/decrement controls for numeric inputs

## Description
The UpDownSpinner element provides a pair of increase/decrease buttons typically used alongside numeric inputs, date pickers, or any value that can be adjusted incrementally. Features auto-repeat functionality when buttons are held down, customizable icons, delay/interval settings, and support for disabling individual buttons when limits are reached.

## Element
- **Tag**: `mosaik-updown-spinner`
- **Category**: Primitives

## Slots
- **default** - Content displayed between the spinner buttons
- `prefix` - Content displayed before the default slot
- `suffix` - Content displayed after the default slot

## CSS Parts
- `content` - Container for slotted content (prefix, default, suffix)
- `increase` - The increase/up button
- `decrease` - The decrease/down button

## Dependencies
- `mosaik-repeat-button` - Auto-repeating button component

## Events
- `spinned` - Fired when increase or decrease is triggered, includes `direction` ('increase' or 'decrease')

## Examples

### Basic spinner with numeric input
```html
<div class="number-input">
    <input type="number" id="quantity" value="1" min="1" max="10">
    <mosaik-updown-spinner id="spinner"></mosaik-updown-spinner>
</div>

<script>
    const input = document.getElementById('quantity');
    const spinner = document.getElementById('spinner');
    
    spinner.addEventListener('spinned', (e) => {
        const current = parseInt(input.value);
        if (e.detail.direction === 'increase') {
            input.value = Math.min(current + 1, 10);
        } else {
            input.value = Math.max(current - 1, 1);
        }
    });
</script>
```

### Custom icons and styling
```html
<mosaik-updown-spinner
    increase-icon="custom-plus-icon"
    decrease-icon="custom-minus-icon"
    variant="primary"
    size="small"
    appearance="outline">
</mosaik-updown-spinner>
```

### With disabled states at limits
```html
<mosaik-updown-spinner
    id="limitedSpinner"
    increase-disabled="false"
    decrease-disabled="true">
</mosaik-updown-spinner>

<script>
    const spinner = document.getElementById('limitedSpinner');
    let value = 0;
    const min = 0, max = 10;

    spinner.addEventListener('spinned', (e) => {
        if (e.detail.direction === 'increase' && value < max) {
            value++;
        } else if (e.detail.direction === 'decrease' && value > min) {
            value--;
        }
        
        // Update disabled states
        spinner.increaseDisabled = (value >= max);
        spinner.decreaseDisabled = (value <= min);
    });
</script>
```

### Horizontal orientation
```html
<mosaik-updown-spinner
    orientation="horizontal"
    position="right">
</mosaik-updown-spinner>
```

# mosaik-updown-spinner

UpDownSpinner - Increment/decrement controls for numeric input fields and value adjustments.

**Mixins:** Themeable, Variantable, Sizeable, Appearanceable, Orientable, Disableable

## Examples

Basic spinner with numeric input:

```html
<div class="number-input">
  <input type="number" id="quantity" value="1" min="1" max="10">
  <mosaik-updown-spinner id="spinner"></mosaik-updown-spinner>
</div>

<script>
  const input = document.getElementById('quantity');
  const spinner = document.getElementById('spinner');
  
  spinner.addEventListener('spinned', (e) => {
    const current = parseInt(input.value);
    if (e.detail.direction === 'increase') {
      input.value = Math.min(current + 1, 10);
    } else {
      input.value = Math.max(current - 1, 1);
    }
  });
</script>
```

Custom icons and styling:

```html
<mosaik-updown-spinner
  increase-icon="custom-plus-icon"
  decrease-icon="custom-minus-icon"
  variant="primary"
  size="small"
  appearance="outline">
</mosaik-updown-spinner>
```

With disabled states at limits:

```html
<mosaik-updown-spinner
  id="limitedSpinner"
  decrease-disabled>
</mosaik-updown-spinner>

<script>
  const spinner = document.getElementById('limitedSpinner');
  let value = 0;
  const min = 0, max = 10;
  
  spinner.addEventListener('spinned', (e) => {
    if (e.detail.direction === 'increase' && value < max) {
      value++;
    } else if (e.detail.direction === 'decrease' && value > min) {
      value--;
    }
    
    spinner.increaseDisabled = value >= max;
    spinner.decreaseDisabled = value <= min;
  });
</script>
```

Horizontal orientation with custom timing:

```html
<mosaik-updown-spinner
  orientation="horizontal"
  delay="300"
  interval="200"
  position="after">
</mosaik-updown-spinner>
```

## Properties

| Property           | Attribute          | Modifiers | Type                                         | Description                                      |
|--------------------|--------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `appearance`       | `appearance`       |           | `Appearance`                                 | A visual characteristics and presentation of the element.<br />The default value is `default`. |
| `changed`          |                    | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`        |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `decreaseDisabled` | `decreaseDisabled` |           | `boolean`                                    | Gets or sets the `decreaseDisabled` property.    |
| `decreaseIcon`     | `decreaseIcon`     |           | `string`                                     | Gets or sets the `decreaseIcon` property.        |
| `delay`            | `delay`            |           | `number`                                     | Gets or sets the `delay` property.               |
| `dir`              | `dir`              |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`         | `disabled`         |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`     |                    | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `focusable`        | `focusable`        |           | `boolean`                                    | Gets or sets the `focusable` property.           |
| `increaseDisabled` | `increaseDisabled` |           | `boolean`                                    | Gets or sets the `increaseDisabled` property.    |
| `increaseIcon`     | `increaseIcon`     |           | `string`                                     | Gets or sets the `increaseIcon` property.        |
| `interval`         | `interval`         |           | `number`                                     | Gets or sets the `interval` property.            |
| `lang`             | `lang`             |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`      | `orientation`      |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `position`         | `position`         |           | `UpDownSpinPosition`                         | Gets or sets the `position` property.            |
| `size`             | `size`             |           | `Size`                                       | Gets or sets the `size` property.<br />The default value is `medium`, which means the element has a medium size. |
| `spinned`          |                    | readonly  | `IEventEmitter<ISpinEventDetail>`            | Called when the element is spinned.<br />Provides reference to `ISpinEventDetail` as event argument. |
| `themeName`        |                    |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `variant`          | `variant`          |           | `Variant`                                    | Determines the visual appearance (color) of the element.<br />The default value is `default`, which means the element will use the default variant. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `spinned`      | `SpinEvent`            | Fired when increase or decrease is triggered, includes direction |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | Default content slot displayed between the spinner buttons |
| `prefix` | Content displayed before the default slot        |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |
| `suffix` | Content displayed after the default slot         |

## CSS Shadow Parts

| Part       | Description                                      |
|------------|--------------------------------------------------|
| `content`  | Container for slotted content (prefix, default, suffix) |
| `decrease` | The decrease/down button                         |
| `increase` | The increase/up button                           |

## CSS Custom Properties

| Property                                 | Type   | Description                                      |
|------------------------------------------|--------|--------------------------------------------------|
| `--up-down-spinner-font-family`          | String | The down spinner font family CSS custom property. |
| `--up-down-spinner-font-letter-spacing`  | String | The down spinner font letter spacing CSS custom property. |
| `--up-down-spinner-font-line-height`     | String | The down spinner font line height CSS custom property. |
| `--up-down-spinner-font-size`            | String | The down spinner font size CSS custom property.  |
| `--up-down-spinner-font-text-decoration` | String | The down spinner font text decoration CSS custom property. |
| `--up-down-spinner-font-text-transform`  | String | The down spinner font text transform CSS custom property. |
| `--up-down-spinner-font-weight`          | String | The down spinner font weight CSS custom property. |
| `--up-down-spinner-gap`                  | String | The down spinner gap CSS custom property.        |
| `--up-down-spinner-padding-bottom`       | String | The down spinner padding bottom CSS custom property. |
| `--up-down-spinner-padding-left`         | String | The down spinner padding left CSS custom property. |
| `--up-down-spinner-padding-right`        | String | The down spinner padding right CSS custom property. |
| `--up-down-spinner-padding-top`          | String | The down spinner padding top CSS custom property. |
| `--up-down-spinner-shadow`               | String | The down spinner shadow CSS custom property.     |
| `--up-down-spinner-shadow-blur`          | String | The down spinner shadow blur CSS custom property. |
| `--up-down-spinner-shadow-color`         | String | The down spinner shadow color CSS custom property. |
| `--up-down-spinner-shadow-offset-x`      | String | The down spinner shadow offset x CSS custom property. |
| `--up-down-spinner-shadow-offset-y`      | String | The down spinner shadow offset y CSS custom property. |
| `--up-down-spinner-shadow-spread`        | String | The down spinner shadow spread CSS custom property. |
| `--up-down-spinner-transition-duration`  | String | The down spinner transition duration CSS custom property. |
| `--up-down-spinner-transition-mode`      | String | The down spinner transition mode CSS custom property. |
| `--up-down-spinner-transition-property`  | String | The down spinner transition property CSS custom property. |
| `--up-down-spinner-translate`            | String | The down spinner translate CSS custom property.  |

# mosaik-video

Video - An enhanced video player element with controls, legend, and fit options.

**Mixins:** Themeable, Disableable, Dimensionable

## Examples

Video with controls and autoplay (muted required for autoplay):

```html
<mosaik-video show-controls auto-play muted></mosaik-video>
```

Video with legend and fixed aspect ratio:

```html
<mosaik-video show-controls legend="Introduction" legend-position="bottom" ratio="16/9"></mosaik-video>
```

Looping muted video with cover fit:

```html
<mosaik-video auto-play muted loop fit="cover"></mosaik-video>
```

## Properties

| Property         | Attribute        | Modifiers | Type                                             | Description                                      |
|------------------|------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `autoFullScreen` | `autoFullScreen` |           | `boolean`                                        | Gets or sets the `autoFullScreen` property.      |
| `autoPlay`       | `autoPlay`       |           | `boolean`                                        | Gets or sets the `autoPlay` property.            |
| `changed`        |                  | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`      |                  | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`            | `dir`            |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`       | `disabled`       |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`   |                  | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`            | `fit`            |           | `VideoFit`                                       | Gets or sets the `fit` property.                 |
| `hasSrc`         |                  | readonly  | `boolean`                                        | Returns the `hasSrc` property.                   |
| `height`         | `height`         |           | `CssLength`                                      | Gets or sets the `height` property.<br />The default value is `auto`, which means the height is determined by the content. |
| `lang`           | `lang`           |           | `string`                                         | The lang property indicates the language of the element's content. |
| `legend`         | `legend`         |           | `string`                                         | Gets or sets the `legend` property.              |
| `legendPosition` | `legendPosition` |           | `VideoLegendPosition`                            | Gets or sets the `legendPosition` property.      |
| `loop`           |                  |           | `boolean`                                        | Returns the `loop` property.                     |
| `muted`          |                  |           | `boolean`                                        | Returns the `muted` property.                    |
| `poster`         |                  |           | `string`                                         | Gets or sets the `poster` property.              |
| `ratio`          | `ratio`          |           | `CssAspectRatio`                                 | Gets or sets the `ratio` property.               |
| `showControls`   | `showControls`   |           | `boolean`                                        | Gets or sets the `showControls` property.        |
| `src`            |                  |           | `string \| Blob \| MediaStream \| MediaSource \| null` | Gets or sets the `src` property.                 |
| `themeName`      |                  |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `width`          | `width`          |           | `CssLength`                                      | Gets or sets the `width` property.<br />The default value is `auto`, which means the width is determined by the content. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `load`          | `(): void`                                       |                                                  |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `pause`         | `(): void`                                       |                                                  |
| `play`          | `(): Promise<void>`                              |                                                  |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `toggle`        | `(): void`                                       |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot.                                |
| `legend` | The legend slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `content` | The content part. |
| `legend`  | The legend part.  |
| `video`   | The video part.   |

## CSS Custom Properties

| Property                              | Type   | Description                                      |
|---------------------------------------|--------|--------------------------------------------------|
| `--video-aspect-ratio`                | String | The aspect ratio CSS custom property.            |
| `--video-background-color`            | String | Background color behind the video                |
| `--video-border-color`                | String | The border color CSS custom property.            |
| `--video-border-radius`               | String | Border radius of the video container             |
| `--video-border-style`                | String | The border style CSS custom property.            |
| `--video-border-width`                | String | The border width CSS custom property.            |
| `--video-font-family`                 | String | The font family CSS custom property.             |
| `--video-font-letter-spacing`         | String | The font letter spacing CSS custom property.     |
| `--video-font-line-height`            | String | The font line height CSS custom property.        |
| `--video-font-size`                   | String | The font size CSS custom property.               |
| `--video-font-text-decoration`        | String | The font text decoration CSS custom property.    |
| `--video-font-text-transform`         | String | The font text transform CSS custom property.     |
| `--video-font-weight`                 | String | The font weight CSS custom property.             |
| `--video-foreground-color`            | String | The foreground color CSS custom property.        |
| `--video-gap`                         | String | The gap CSS custom property.                     |
| `--video-legend-font-family`          | String | The legend font family CSS custom property.      |
| `--video-legend-font-letter-spacing`  | String | The legend font letter spacing CSS custom property. |
| `--video-legend-font-line-height`     | String | The legend font line height CSS custom property. |
| `--video-legend-font-size`            | String | The legend font size CSS custom property.        |
| `--video-legend-font-text-decoration` | String | The legend font text decoration CSS custom property. |
| `--video-legend-font-text-transform`  | String | The legend font text transform CSS custom property. |
| `--video-legend-font-weight`          | String | The legend font weight CSS custom property.      |
| `--video-padding-bottom`              | String | The padding bottom CSS custom property.          |
| `--video-padding-left`                | String | The padding left CSS custom property.            |
| `--video-padding-right`               | String | The padding right CSS custom property.           |
| `--video-padding-top`                 | String | The padding top CSS custom property.             |
| `--video-shadow`                      | String | The shadow CSS custom property.                  |
| `--video-shadow-blur`                 | String | The shadow blur CSS custom property.             |
| `--video-shadow-color`                | String | The shadow color CSS custom property.            |
| `--video-shadow-offset-x`             | String | The shadow offset x CSS custom property.         |
| `--video-shadow-offset-y`             | String | The shadow offset y CSS custom property.         |
| `--video-shadow-spread`               | String | The shadow spread CSS custom property.           |
| `--video-transition-duration`         | String | The transition duration CSS custom property.     |
| `--video-transition-mode`             | String | The transition mode CSS custom property.         |
| `--video-transition-property`         | String | The transition property CSS custom property.     |
| `--video-translate`                   | String | The translate CSS custom property.               |

# mosaik-virtualize

Virtualize - A performance-optimized list container that renders only visible items for large datasets.

Implements virtual scrolling to efficiently handle thousands of items by rendering only what's currently
visible in the viewport. Reduces DOM size and improves performance for large lists and grids.

**Mixins:** Themeable

## Examples

```typescript
// Basic virtualized list
const virtualizer = document.createElement('mosaik-virtualize');
virtualizer.items = Array.from({length: 10000}, (_, i) => `Item ${i}`);
virtualizer.renderItem = (item) => html`<div class="list-item">${item}</div>`;
virtualizer.keyFunction = (item, index) => index;
```

Virtualized list with scroll container:

```html
<mosaik-virtualize scroller></mosaik-virtualize>
```

## Properties

| Property       | Attribute  | Modifiers | Type                                         | Description                                      |
|----------------|------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`    |            | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`      |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |            | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `items`        |            |           | `T[]`                                        | Gets or sets the `items` property.               |
| `keyFunction`  |            |           | `KeyFn<T>`                                   | Gets or sets the `keyFunction` property.         |
| `lang`         | `lang`     |           | `string`                                     | The lang property indicates the language of the element's content. |
| `layout`       |            |           | `LayoutConfigValue`                          | Gets or sets the `layout` property.              |
| `renderItem`   |            |           | `RenderItemFunction<T>`                      | Gets or sets the `renderItem` property.          |
| `scroller`     | `scroller` |           | `boolean`                                    | Gets or sets the `scroller` property.            |
| `themeName`    |            |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`    | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part          | Description                                    |
|---------------|------------------------------------------------|
| `virtualizer` | The internal lit-virtualizer container element |

## CSS Custom Properties

| Property                    | Type   | Description                            |
|-----------------------------|--------|----------------------------------------|
| `--virtualizer-gap`         | String | Spacing between virtualized items      |
| `--virtualizer-height`      | String | Height of the virtualization container |
| `--virtualizer-item-height` | String | Default height for virtualized items   |
| `--virtualizer-width`       | String | Width of the virtualization container  |

# mosaik-voice-recorder-chat-tool

The `VoiceRecorderChatToolElement` element.

**Mixins:** Themeable, Disableable

## Examples

Basic usage inside a chat element tools slot:

```html
<mosaik-voice-recorder-chat-tool></mosaik-voice-recorder-chat-tool>
```

With pause support enabled:

```html
<mosaik-voice-recorder-chat-tool can-pause></mosaik-voice-recorder-chat-tool>
```

## Properties

| Property          | Attribute         | Modifiers | Type                                         | Description                                      |
|-------------------|-------------------|-----------|----------------------------------------------|--------------------------------------------------|
| `canPause`        | `canPause`        |           | `boolean`                                    | Gets or sets the `canPause` property.            |
| `changed`         |                   | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`             | `dir`             |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`        |           | `boolean`                                    | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |                   | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dock`            | `dock`            |           | `"left" \| "right"`                          | Gets or sets the `dock` property.                |
| `elapsedTime`     | `elapsedTime`     |           | `number`                                     | Gets or sets the `elapsedTime` property.         |
| `lang`            | `lang`            |           | `string`                                     | The lang property indicates the language of the element's content. |
| `maxDurationTime` | `maxDurationTime` |           | `number`                                     | Gets or sets the `maxDurationTime` property.     |
| `objectUrl`       |                   |           | `string \| null`                             | Gets or sets the `objectUrl` property.           |
| `recCancel`       |                   | readonly  | `IEventEmitter<IRecorderCancelEventDetail>`  | Called when the recording is canceled.<br />Provides reference to `IEventDetail` as event detail. |
| `recPause`        |                   | readonly  | `IEventEmitter<IRecorderPauseEventDetail>`   | Called when the recording is paused.<br />Provides reference to `IEventDetail` as event detail. |
| `recResume`       |                   | readonly  | `IEventEmitter<IRecorderResumeEventDetail>`  | Called when the recording is resumed.<br />Provides reference to `IEventDetail` as event detail. |
| `recStart`        |                   | readonly  | `IEventEmitter<IRecorderStartEventDetail>`   | Called when the recording is started.<br />Provides reference to `IEventDetail` as event detail. |
| `recStop`         |                   | readonly  | `IEventEmitter<IRecorderStopEventDetail>`    | Called when the recording is stopped.<br />Provides reference to `IEventDetail` as event detail. |
| `state`           | `state`           |           | `RecorderState`                              | Gets or sets the `state` property.               |
| `themeName`       |                   |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `attach`        | `(chat: ChatElement): void`                      | Attaches the tool to the specified chat element.<br /><br />**chat**: The chat element to attach to. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `execute`       | `(args: unknown): boolean`                       | Executes the chat tool with the given arguments.<br /><br />**args**: The arguments to execute the tool with. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event            | Type                   | Description                                      |
|------------------|------------------------|--------------------------------------------------|
| `changed`        | `PropertyChangedEvent` | Emitted when any attribute changes before update |
| `connected`      | `ConnectedEvent`       | Emitted when the element is connected to the DOM |
| `disconnected`   | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `recorderCancel` | `RecorderCancelEvent`  | Called when the recording is canceled.           |
| `recorderPause`  | `RecorderPauseEvent`   | Called when the recording is paused.             |
| `recorderResume` | `RecorderResumeEvent`  | Called when the recording is resumed.            |
| `recorderStart`  | `RecorderStartEvent`   | Called when the recording is started.            |
| `recorderStop`   | `RecorderStopEvent`    | Called when the recording is stopped.            |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part     | Description      |
|----------|------------------|
| `cancel` | The cancel part. |
| `row`    | The row part.    |
| `start`  | The start part.  |
| `stop`   | The stop part.   |
| `timer`  | The timer part.  |

# mosaik-wizard-step

Wizard step - A component that allows users to navigate through steps to complete a task.

**Mixins:** Themeable, Animatable, Disableable, Insetable, Valueable

## Examples

Basic wizard step:

```html
<mosaik-wizard-step header="Personal Information" is-active>
  <form>
    <mosaik-textbox type="text" placeholder="Your name">/mosaik-textbox>
    <mosaik-textbox type="email" placeholder="Your email"></mosaik-textbox>
  </form>
</mosaik-wizard-step>
```

Wizard step with sub-header and footer:

```html
<mosaik-wizard-step header="Review" sub-header="Please confirm your details">
  <p>Your information will be saved.</p>
  <div slot="footer">
    <button>Back</button>
    <button>Confirm</button>
  </div>
</mosaik-wizard-step>
```

## Properties

| Property          | Attribute    | Modifiers | Type                                         | Default   | Description                                      |
|-------------------|--------------|-----------|----------------------------------------------|-----------|--------------------------------------------------|
| `animationTarget` |              | readonly  | `HTMLElement \| undefined`                   |           | Gets the target element for animations.<br />Override this to animate a different element than the host (e.g., a template part). |
| `changed`         |              | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` |           | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`       |              | readonly  | `IEventEmitter<void>`                        |           | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `deselected`      |              | readonly  | `IEventEmitter<IEventDetail>`                |           | Called when the item is deselected.<br />Provides reference to `IEventDetail` as event detail. |
| `dir`             | `dir`        |           | `FlowDirection`                              |           | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`        | `disabled`   |           | `boolean`                                    |           | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`    |              | readonly  | `IEventEmitter<void>`                        |           | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `displayText`     |              | readonly  | `string`                                     |           | Gets the `displayText` property.                 |
| `enter`           | `enter`      |           |                                              | "fadeIn"  | Gets or sets the `enter` animation property.<br />The default value is `null`, which means no animation is applied. |
| `exit`            | `exit`       |           |                                              | "fadeOut" | Gets or sets the `exit` animation property.<br />The default value is `null`, which means no animation is applied. |
| `header`          | `header`     |           | `string`                                     |           | Gets or sets the `header` property.              |
| `index`           |              | readonly  | `number`                                     |           | Gets the index of the item.                      |
| `inset`           | `inset`      |           | `Inset \| Inset[] \| null`                   |           | Gets or sets the inset value.<br />Appears as dom class property.<br /><br />Possible values are:<br />* `top` - applies an inset to the top of the element<br />* `right` - applies an inset to the right of the element<br />* `bottom` - applies an inset to the bottom of the element<br />* `left` - applies an inset to the left of the element<br />* `vertical` - applies an inset to both the top and bottom of the element<br />* `horizontal` - applies an inset to both the left and right of the element<br />* `all` - applies an inset to all sides of the element<br />* `none` (default) - no inset is applied<br /><br />The default value is `none`, which means no inset is applied. |
| `isActive`        | `isActive`   |           | `boolean`                                    |           | Gets or sets the `isActive` property.            |
| `isSelected`      | `isSelected` |           | `boolean`                                    |           | Gets or sets the `isSelected` property.          |
| `lang`            | `lang`       |           | `string`                                     |           | The lang property indicates the language of the element's content. |
| `selected`        |              | readonly  | `IEventEmitter<IEventDetail>`                |           | Called when the item is selected.<br />Provides reference to `IEventDetail` as event detail. |
| `subHeader`       | `subHeader`  |           | `string`                                     |           | Gets or sets the `subHeader` property.           |
| `themeName`       |              |           | `string`                                     |           | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |
| `value`           | `value`      |           | `TType`                                      |           | Gets or sets the `value` property.<br />The default value is `undefined`, which means the element has no value set. |

## Methods

| Method             | Type                                             | Description                                      |
|--------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`       | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `deselect`         | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `false`. |
| `emit`             | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`              | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`               | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onEnterAnimation` | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is added to the DOM. |
| `onExitAnimation`  | `((): Promise<boolean>) \| undefined`            | A lifecycle hook that is invoked when the element is removed from the DOM. |
| `play`             | `(animation: IAnimationReferenceMetadata): Promise<boolean>` | Executes the animation.<br /><br />**animation**: The animation to execute. |
| `requestUpdate`    | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `select`           | `(forceUpdate?: boolean): void`                  | This method is invoked when the `isSelected` property is changed to `true`. |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `deselected`   | `DeselectedEvent`      | Fired when the item is deselected, either programmatically or through user interaction |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |
| `selected`     | `SelectedEvent`        | Fired when the item is selected, either programmatically or through user interaction |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
|          | The default slot.                                |
| `footer` | The footer slot.                                 |
| `style`  | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `content` | The content part. |
| `footer`  | The footer part.  |

## CSS Custom Properties

| Property                             | Type   | Description                                      |
|--------------------------------------|--------|--------------------------------------------------|
| `--wizard-step-font-family`          | String | The step font family CSS custom property.        |
| `--wizard-step-font-letter-spacing`  | String | The step font letter spacing CSS custom property. |
| `--wizard-step-font-line-height`     | String | The step font line height CSS custom property.   |
| `--wizard-step-font-size`            | String | The step font size CSS custom property.          |
| `--wizard-step-font-text-decoration` | String | The step font text decoration CSS custom property. |
| `--wizard-step-font-text-transform`  | String | The step font text transform CSS custom property. |
| `--wizard-step-font-weight`          | String | The step font weight CSS custom property.        |
| `--wizard-step-gap`                  | String | The step gap CSS custom property.                |
| `--wizard-step-padding-bottom`       | String | The step padding bottom CSS custom property.     |
| `--wizard-step-padding-left`         | String | The step padding left CSS custom property.       |
| `--wizard-step-padding-right`        | String | The step padding right CSS custom property.      |
| `--wizard-step-padding-top`          | String | The step padding top CSS custom property.        |
| `--wizard-step-shadow`               | String | The step shadow CSS custom property.             |
| `--wizard-step-shadow-blur`          | String | The step shadow blur CSS custom property.        |
| `--wizard-step-shadow-color`         | String | The step shadow color CSS custom property.       |
| `--wizard-step-shadow-offset-x`      | String | The step shadow offset x CSS custom property.    |
| `--wizard-step-shadow-offset-y`      | String | The step shadow offset y CSS custom property.    |
| `--wizard-step-shadow-spread`        | String | The step shadow spread CSS custom property.      |
| `--wizard-step-transition-duration`  | String | The step transition duration CSS custom property. |
| `--wizard-step-transition-mode`      | String | The step transition mode CSS custom property.    |
| `--wizard-step-transition-property`  | String | The step transition property CSS custom property. |
| `--wizard-step-translate`            | String | The step translate CSS custom property.          |

# mosaik-wizard

Wizard - A component that allows users to navigate through steps to complete a task.

**Mixins:** Themeable, Slottable, Fitable, Disableable

## Example

Basic wizard with steps:

```html
<mosaik-wizard>
  <mosaik-wizard-step header="Welcome" is-active>
    <p>Welcome to the setup wizard.</p>
  </mosaik-wizard-step>
  <mosaik-wizard-step header="Configuration">
    <p>Configure your preferences.</p>
  </mosaik-wizard-step>
  <mosaik-wizard-step header="Finish">
    <p>Setup complete!</p>
  </mosaik-wizard-step>
</mosaik-wizard>
```

## Properties

| Property            | Attribute  | Modifiers | Type                                             | Description                                      |
|---------------------|------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `activeIndex`       |            | readonly  | `number`                                         | Gets the active index of the wizard.             |
| `activeStepChanged` |            | readonly  | `IEventEmitter<IActiveStepChangedEventDetail>`   | Called when the active step has changed.<br />Provides reference to `IEventDetail` as event detail. |
| `changed`           |            | readonly  | `IEventEmitter<IPropertyChangedEventDetail>`     | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `connected`         |            | readonly  | `IEventEmitter<void>`                            | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`               | `dir`      |           | `FlowDirection`                                  | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disabled`          | `disabled` |           | `boolean`                                        | The disabled state of the element.<br />The default value is `false`, which means the element is not disabled. |
| `disconnected`      |            | readonly  | `IEventEmitter<void>`                            | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`               | `fit`      |           | `Fit`                                            | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `isFirstStep`       |            | readonly  | `boolean`                                        | Gets the first step of the wizard.               |
| `isLastStep`        |            | readonly  | `boolean`                                        | Gets the last step of the wizard.                |
| `items`             |            | readonly  | `WizardStepElement[]`                            | Returns the `items` property.                    |
| `itemsChanged`      |            | readonly  | `IEventEmitter<IItemsChangedEventDetail>`        | Called when the items has changed.<br />Provides reference to `IItemsChangedEventDetail` as event detail. |
| `lang`              | `lang`     |           | `string`                                         | The lang property indicates the language of the element's content. |
| `name`              | `name`     |           | `string`                                         | Gets or sets the `name` property.                |
| `selectedItem`      |            |           | `TItem \| null`                                  | Gets the first item in the current selection or returns null if the selection is empty. |
| `selectionChanged`  |            | readonly  | `IEventEmitter<ISelectionChangedEventDetail<TItem>>` | Called when the selection has changed.<br />Provides reference to `ISelectionChangedEventDetail` as event detail. |
| `themeName`         |            |           | `string`                                         | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method                 | Type                                             | Description                                      |
|------------------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`           | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `assignToSlot`         | `(slotName: string, node: Element \| Text): void` | Assigns nodes to a dedicated slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**node**: The nodes to assign to the slot. |
| `deselect`             | `(item: number \| TItem): void`                  | Deselect the item.<br /><br />**item**: The element or index to deselect. |
| `emit`                 | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `getSlotAssignments`   | `<T extends Element = Element>(slotName: string, filter?: ((e: T): boolean) \| undefined) => T[]` | Returns the assigned elements of a slot.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**filter**: The optional filter function. |
| `getSlotAssignmentsOf` | `<T extends Element = Element>(slotName: string, element: Constructor<T>): T[]` | Returns the assigned elements of a slot with a specific element type.<br /><br />**slotName**: The slot name (For default slot, pass an empty string).<br />**element**: The element to filter. |
| `getSlotContent`       | `(slotName: string): string`                     | Returns the assigned elements of a slot as string.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlot`              | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot exists.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `hasSlotContent`       | `(slotName: string): boolean`                    | Returns a boolean that indicates if a slot has content.<br /><br />**slotName**: The slot name (For default slot, pass an empty string). |
| `off`                  | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`                   | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `onSlotChanges`        | `(slotName?: string \| undefined): void`         | Called when the slot changes.<br />This method is a hook that can be overridden.<br /><br />**slotName**: The optional slot name (For default slot, passes undefined). |
| `requestUpdate`        | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |
| `resetSelection`       | `(): void`                                       | Resets the current selection.                    |
| `select`               | `(item: string \| number \| TItem): void`        | Select the item.<br /><br />**item**: The element, index or value to select. |
| `selectFirst`          | `(): void`                                       | Select the first item.                           |
| `selectLast`           | `(): void`                                       | Select the last item.                            |
| `selectNext`           | `(): void`                                       | Select the next item after current selected item/index. |
| `selectPrevious`       | `(): void`                                       | Select the previous item before current selected item/index. |

## Events

| Event               | Type                     | Description                                      |
|---------------------|--------------------------|--------------------------------------------------|
| `activeStepChanged` | `ActiveStepChangedEvent` | Fired when the active step has changed.          |
| `changed`           | `PropertyChangedEvent`   | Fired when any property changes                  |
| `connected`         | `ConnectedEvent`         | Fired when the element is connected to the DOM   |
| `disconnected`      | `DisconnectedEvent`      | Emitted when the element is disconnected from the DOM |
| `itemsChanged`      | `ItemsChangedEvent`      | Fired when the slotted items collection changes (items added, removed, or reordered) |
| `selectionChanged`  | `SelectionChangedEvent`  | Fired when the selected item changes, providing both old and new selected items |

## Slots

| Name            | Description                                      |
|-----------------|--------------------------------------------------|
|                 | Default slot for selector item elements          |
| `footer`        | The footer slot.                                 |
| `header`        | The header slot.                                 |
| `header-after`  | The header after slot.                           |
| `header-before` | The header before slot.                          |
| `steps`         | The steps slot.                                  |
| `style`         | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Shadow Parts

| Part      | Description       |
|-----------|-------------------|
| `content` | The content part. |
| `footer`  | The footer part.  |
| `header`  | The header part.  |
| `toolbar` | The toolbar part. |

## CSS Custom Properties

| Property                        | Type   | Description                                   |
|---------------------------------|--------|-----------------------------------------------|
| `--wizard-border-color`         | String | The border color CSS custom property.         |
| `--wizard-font-family`          | String | The font family CSS custom property.          |
| `--wizard-font-letter-spacing`  | String | The font letter spacing CSS custom property.  |
| `--wizard-font-line-height`     | String | The font line height CSS custom property.     |
| `--wizard-font-size`            | String | The font size CSS custom property.            |
| `--wizard-font-text-decoration` | String | The font text decoration CSS custom property. |
| `--wizard-font-text-transform`  | String | The font text transform CSS custom property.  |
| `--wizard-font-weight`          | String | The font weight CSS custom property.          |
| `--wizard-gap`                  | String | The gap CSS custom property.                  |
| `--wizard-padding-bottom`       | String | The padding bottom CSS custom property.       |
| `--wizard-padding-left`         | String | The padding left CSS custom property.         |
| `--wizard-padding-right`        | String | The padding right CSS custom property.        |
| `--wizard-padding-top`          | String | The padding top CSS custom property.          |
| `--wizard-shadow`               | String | The shadow CSS custom property.               |
| `--wizard-shadow-blur`          | String | The shadow blur CSS custom property.          |
| `--wizard-shadow-color`         | String | The shadow color CSS custom property.         |
| `--wizard-shadow-offset-x`      | String | The shadow offset x CSS custom property.      |
| `--wizard-shadow-offset-y`      | String | The shadow offset y CSS custom property.      |
| `--wizard-shadow-spread`        | String | The shadow spread CSS custom property.        |
| `--wizard-transition-duration`  | String | The transition duration CSS custom property.  |
| `--wizard-transition-mode`      | String | The transition mode CSS custom property.      |
| `--wizard-transition-property`  | String | The transition property CSS custom property.  |
| `--wizard-translate`            | String | The translate CSS custom property.            |

# mosaik-wrap

Wrap - A flexible layout container that automatically wraps child elements to new lines based on available space.

**Mixins:** Themeable, Reversible, Orientable, Fitable, Gapable

## Examples

Horizontal wrap with numeric pixel gap:

```html
<mosaik-wrap gap="12">
  <mosaik-button></mosaik-button>
  <mosaik-button></mosaik-button>
  <mosaik-button></mosaik-button>
  <mosaik-button></mosaik-button>
</mosaik-wrap>
```

Vertical wrap with chip children:

```html
<mosaik-wrap orientation="vertical" gap="8">
  <mosaik-chip></mosaik-chip>
  <mosaik-chip></mosaik-chip>
  <mosaik-chip></mosaik-chip>
</mosaik-wrap>
```

## Properties

| Property       | Attribute     | Modifiers | Type                                         | Description                                      |
|----------------|---------------|-----------|----------------------------------------------|--------------------------------------------------|
| `changed`      |               | readonly  | `IEventEmitter<IPropertyChangedEventDetail>` | Called when the element will be updated.<br />Provides reference to `IEventEmitter` as event argument. |
| `columns`      |               |           | `number`                                     | The `columns` property represents the number of columns before wrapping. |
| `connected`    |               | readonly  | `IEventEmitter<void>`                        | Called when the element is connected to the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `dir`          | `dir`         |           | `FlowDirection`                              | The dir property indicates the directionality of the element's text.<br /><br />Supported values are:<br />- `ltr`: Left-to-Right text direction (e.g. English, German)<br />- `rtl`: Right-to-Left text direction (e.g. Arabic, Hebrew)<br />- `auto`: Automatically determine direction based on content (default) |
| `disconnected` |               | readonly  | `IEventEmitter<void>`                        | Called when the element is disconnected from the DOM.<br />Provides reference to `IEventEmitter` as event argument. |
| `fit`          | `fit`         |           | `Fit`                                        | Gets or sets a value indicating whether this element is displayed in the UI.<br />The default value is `none`, which means the element is not displayed. |
| `gap`          | `gap`         |           | `Size \| CssNumber`                          | The `gap` represents the space between the child elements.<br />The default value is `0`, which means no gap is applied. |
| `items`        |               | readonly  | `HTMLElement[]`                              | Gets or sets the `items` property.               |
| `lang`         | `lang`        |           | `string`                                     | The lang property indicates the language of the element's content. |
| `orientation`  | `orientation` |           | `Orientation`                                | Gets or sets the `orientation` property.<br />The default value is `horizontal`. |
| `reverse`      | `reverse`     |           | `boolean`                                    | Gets or sets the `reverse` property.<br />If `true`, the element will be reversed in its orientation.<br />The default value is `false`, which means the element is not reversed. |
| `themeName`    |               |           | `string`                                     | Gets or sets the `themeName` property.<br />This property defines the name of the theme to be applied to the element.<br />If not set, the element will use the default theme.<br />The default value is an empty string, which means no theme is set. |

## Methods

| Method          | Type                                             | Description                                      |
|-----------------|--------------------------------------------------|--------------------------------------------------|
| `adoptStyle`    | `(styles: CSSResultGroup): void`                 | Adopts the specified styles.<br /><br />**styles**: The styles to adopt. |
| `emit`          | `{ <TEvent extends Event, TDetail extends UnpackCustomEvent<TEvent>>(event: TEvent, eventInitDict?: CustomEventInit<TDetail> \| undefined): boolean; <TEvent extends keyof HTMLElementEventMap, TDetail extends UnpackCustomEvent<HTMLElementEventMap[TEvent]>>(type: keyof HTMLElementEventMap, eventInitDict?: CustomEventIni...` | Emits a custom event with more convenient defaults. |
| `off`           | `{ (subscription: IEventListenerSubscription): void; <TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown): void; }` | Removes an event listener.                       |
| `on`            | `<TEvent extends keyof HTMLElementEventMap>(event: TEvent, listener: (this: HTMLElement, event: HTMLElementEventMap[TEvent]): unknown, options?: boolean \| AddEventListenerOptions \| undefined) => IEventListenerSubscription` | Adds an event listener.<br />The listener will be removed when the element is disconnected from the DOM. |
| `requestUpdate` | `(name?: keyof this \| undefined, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown> \| undefined): void` |                                                  |

## Events

| Event          | Type                   | Description                                      |
|----------------|------------------------|--------------------------------------------------|
| `changed`      | `PropertyChangedEvent` | Fired when any property changes                  |
| `connected`    | `ConnectedEvent`       | Fired when the element is connected to the DOM   |
| `disconnected` | `DisconnectedEvent`    | Emitted when the element is disconnected from the DOM |

## Slots

| Name    | Description                                      |
|---------|--------------------------------------------------|
|         | The default slot for elements that will wrap based on available space. |
| `style` | Custom styles injection slot for shadow DOM styling escape hatch |

## CSS Custom Properties

| Property         | Type   | Description                                      |
|------------------|--------|--------------------------------------------------|
| `--wrap-columns` | String | The preferred number of columns (if applicable). |
| `--wrap-gap`     | String | The gap between wrapped elements.                |

# Angular Starter Template

Use this template when the user wants to create an Angular application with Mosaik components.

**Package:** `@breadstone/mosaik-elements-angular`

**CRITICAL:** Do NOT use `CUSTOM_ELEMENTS_SCHEMA`. The Angular wrappers are proper Angular components with typed inputs and outputs. Import wrapper components directly.

## File structure

```
my-mosaik-app/
├── angular.json
├── package.json
├── tsconfig.json
└── src/
    ├── index.html
    ├── main.ts
    ├── styles.scss
    └── app/
        ├── app.component.ts
        ├── app.component.html
        └── app.component.scss
```

## package.json

```json
{
  "name": "mosaik-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "ng serve",
    "build": "ng build",
    "preview": "ng serve"
  },
  "dependencies": {
    "@breadstone/mosaik-elements": "latest",
    "@breadstone/mosaik-elements-foundation": "latest",
    "@breadstone/mosaik-elements-angular": "latest",
    "@breadstone/mosaik-themes": "latest",
    "@angular/core": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "reflect-metadata": "^0.2.2",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.0",
    "@angular/cli": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/compiler-cli": "^19.0.0",
    "typescript": "~5.8.3",
    "sass": "^1.89.0"
  }
}
```

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true
  },
  "include": ["src"]
}
```

## angular.json

```json
{
  "version": 1,
  "projects": {
    "app": {
      "root": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.json"
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "app:build"
          }
        }
      }
    }
  }
}
```

## src/index.html

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mosaik Angular App</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.scss" />
  </head>
  <body>
    <mosaik-theme2>
      <app-root></app-root>
    </mosaik-theme2>
  </body>
</html>
```

## src/main.ts

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import '@breadstone/mosaik-elements-foundation';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));
```

## src/styles.scss

```scss
@use '@breadstone/mosaik-themes/scss' as theme;
@include theme.joy-style();
```

## src/app/app.component.ts

```typescript
import { Component } from '@angular/core';
import { ButtonComponent } from '@breadstone/mosaik-elements-angular';

@Component({
  selector: 'app-root',
  imports: [ButtonComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}
```

## src/app/app.component.html

```html
<div class="content">
  <!-- Your Mosaik components go here -->
  <mosaik-button label="Hello Mosaik" />
</div>
```

## src/app/app.component.scss

```scss
.content {
  padding: 1rem;
}
```

## Usage pattern

Import Mosaik Angular wrapper components directly into your standalone components or modules:

```typescript
import { MosaikButtonComponent } from '@breadstone/mosaik-elements-angular';

@Component({
  selector: 'app-example',
  imports: [MosaikButtonComponent],
  template: `<mosaik-button label="Click me" (clickEvent)="onClick()" />`
})
export class ExampleComponent {
  protected onClick(): void {
    // handle click
  }
}
```

# Lit Starter Template

Use this template when the user wants to create a Lit application with Mosaik components.

Mosaik components are built with Lit, so using them in a Lit project is the most natural integration — no wrapper layer needed. Import and use the custom elements directly.

## File structure

```
my-mosaik-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.ts
    └── index.scss
```

## package.json

```json
{
  "name": "mosaik-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@breadstone/mosaik-elements": "latest",
    "@breadstone/mosaik-elements-foundation": "latest",
    "@breadstone/mosaik-themes": "latest",
    "lit": "^3.0.0",
    "reflect-metadata": "^0.2.2"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^6.3.5",
    "sass": "^1.89.0"
  }
}
```

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true
  },
  "include": ["src"]
}
```

## vite.config.ts

```typescript
import { defineConfig } from 'vite';

export default defineConfig({
  root: '.',
  publicDir: false
});
```

## index.html

```html
<!doctype html>
<html lang="en" theme="joy" theme-mode="light">
  <head>
    <title>Mosaik Lit App</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/index.scss" />
    <script type="module" src="./src/main.ts"></script>
  </head>
  <body>
    <div id="app">
      <mosaik-theme2>
        <!-- Your Mosaik components go here -->
        <mosaik-button label="Hello Mosaik"></mosaik-button>
      </mosaik-theme2>
    </div>
  </body>
</html>
```

## src/main.ts

```typescript
import '@breadstone/mosaik-elements-foundation';
```

## src/index.scss

```scss
@use '@breadstone/mosaik-themes/scss' as theme;
@include theme.joy-style();

html, body {
  background-color: var(--mosaik-scheme-background);
}
```

## Usage pattern

Since Mosaik IS built with Lit, use the custom elements directly in your Lit templates:

```typescript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@breadstone/mosaik-elements-foundation';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`
      <mosaik-button label="Click me" @changed=${this.handleChanged}></mosaik-button>
    `;
  }

  private handleChanged() {
    console.log('changed');
  }
}
```

# Native (Plain HTML + Web Components) Starter Template

Use this template when no specific framework (Angular, React, Vue, Svelte, Lit) is mentioned. This is the default.

## Minimal HTML Document (CDN — no build step)

Use this variant for quick prototypes, AI chat live previews (e.g. ChatGPT), or any context where a build tool is not available. The script tags load Mosaik directly from a CDN.

```html
<!DOCTYPE html>
<html lang="en" dir="ltr" theme="joy" theme-mode="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mosaik App</title>

    <!-- Font for Joy theme (REQUIRED) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

    <!-- Theme initialization (REQUIRED) -->
    <script type="module">
      import { JoyTheme, ThemeObserverServiceLocator } from "https://esm.run/@breadstone/mosaik-themes";
      import { ThemeService } from "https://esm.run/@breadstone/mosaik-elements-foundation";

      ThemeObserverServiceLocator.current.applyTheme('joy', 'light');

      await customElements.whenDefined("mosaik-theme2");

      const themeElement = document.querySelector("mosaik-theme2");
      if (themeElement) {
        themeElement.theme = JoyTheme.JOY_THEME;
      }
    </script>

    <!-- Mosaik Web Components (REQUIRED) -->
    <script type="module" src="https://esm.run/@breadstone/mosaik-elements-foundation"></script>
  </head>
  <body>
    <mosaik-theme2>
      <!-- Your Mosaik components go here -->
      <mosaik-button label="Hello Mosaik"></mosaik-button>
    </mosaik-theme2>
  </body>
</html>
```

### Key points

- The `theme` and `theme-mode` attributes on `<html>` set the active theme and color mode.
- All content must be wrapped inside `<mosaik-theme2>` for theming to work.
- The theme initialization script imports from `esm.run/@breadstone/mosaik-themes` and applies the theme programmatically.
- The component registration script imports from `esm.run/@breadstone/mosaik-elements-foundation` to register all custom elements.
- **Always** use `esm.run` as the CDN. Do NOT use `cdn.jsdelivr.net`, `unpkg.com`, or any other CDN.

### Available themes

| Theme | CSS file | Token prefix |
|---|---|---|
| Joy | `___joy-tokens.css` | `--joy-*` |
| Memphis | `___memphis-tokens.css` | `--memphis-*` |
| Cosmopolitan | `___cosmopolitan-tokens.css` | `--cosmopolitan-*` |

## Full Project Setup (with Vite build tool)

Use this variant when building a real application with a bundler.

### File structure

```
my-mosaik-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.ts
    └── index.scss
```

### package.json

```json
{
  "name": "mosaik-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@breadstone/mosaik-elements": "latest",
    "@breadstone/mosaik-elements-foundation": "latest",
    "@breadstone/mosaik-themes": "latest",
    "reflect-metadata": "^0.2.2"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^6.3.5",
    "sass": "^1.89.0"
  }
}
```

### tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true
  },
  "include": ["src"]
}
```

### vite.config.ts

```typescript
import { defineConfig } from 'vite';

export default defineConfig({
  root: '.',
  publicDir: false
});
```

### index.html

```html
<!doctype html>
<html lang="en" theme="joy" theme-mode="light">
  <head>
    <title>Mosaik App</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/index.scss" />
    <script type="module" src="./src/main.ts"></script>
  </head>
  <body>
    <div id="app">
      <mosaik-theme2>
        <!-- Your Mosaik components go here -->
        <mosaik-button label="Hello Mosaik"></mosaik-button>
      </mosaik-theme2>
    </div>
  </body>
</html>
```

### src/main.ts

```typescript
import '@breadstone/mosaik-elements-foundation';
```

### src/index.scss

```scss
@use '@breadstone/mosaik-themes/scss' as theme;
@include theme.joy-style();

html, body {
  background-color: var(--mosaik-scheme-background);
}
```

# React Starter Template

Use this template when the user wants to create a React application with Mosaik components.

**Package:** `@breadstone/mosaik-elements-react`

## File structure

```
my-mosaik-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.tsx
    ├── App.tsx
    └── index.scss
```

## package.json

```json
{
  "name": "mosaik-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@breadstone/mosaik-elements": "latest",
    "@breadstone/mosaik-elements-foundation": "latest",
    "@breadstone/mosaik-elements-react": "latest",
    "@breadstone/mosaik-themes": "latest",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "reflect-metadata": "^0.2.2"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^6.3.5",
    "sass": "^1.89.0",
    "@vitejs/plugin-react": "^4.0.0"
  }
}
```

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}
```

## vite.config.ts

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  root: '.',
  publicDir: false,
  plugins: [react()]
});
```

## index.html

```html
<!doctype html>
<html lang="en" theme="joy" theme-mode="light">
  <head>
    <title>Mosaik React App</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/index.scss" />
    <script type="module" src="./src/main.tsx"></script>
  </head>
  <body>
    <div id="app">
      <mosaik-theme2>
      </mosaik-theme2>
    </div>
  </body>
</html>
```

## src/main.tsx

```tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import '@breadstone/mosaik-elements-foundation';

const root = createRoot(document.getElementById('app')!);
root.render(<App />);
```

## src/App.tsx

```tsx
import React from 'react';
import { Button } from '@breadstone/mosaik-elements-react';

export const App = () => (
  <div>
    {/* Your Mosaik components go here */}
    <Button label="Hello Mosaik" onChanged={() => console.log('changed')} />
  </div>
);
```

## src/index.scss

```scss
@use '@breadstone/mosaik-themes/scss' as theme;
@include theme.joy-style();

html, body {
  background-color: var(--mosaik-scheme-background);
}
```

## Usage pattern

Import Mosaik React wrapper components directly:

```tsx
import { Button } from '@breadstone/mosaik-elements-react';

export function Example() {
  return <Button label="Click me" onChanged={() => console.log('changed')} />;
}
```

# Svelte Starter Template

Use this template when the user wants to create a Svelte application with Mosaik components.

**Package:** `@breadstone/mosaik-elements-svelte`

## File structure

```
my-mosaik-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.ts
    ├── App.svelte
    └── index.scss
```

## package.json

```json
{
  "name": "mosaik-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@breadstone/mosaik-elements": "latest",
    "@breadstone/mosaik-elements-foundation": "latest",
    "@breadstone/mosaik-elements-svelte": "latest",
    "@breadstone/mosaik-themes": "latest",
    "reflect-metadata": "^0.2.2"
  },
  "devDependencies": {
    "svelte": "^4.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "typescript": "~5.8.3",
    "vite": "^6.3.5",
    "sass": "^1.89.0"
  }
}
```

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true
  },
  "include": ["src"]
}
```

## vite.config.ts

```typescript
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  root: '.',
  publicDir: false,
  plugins: [svelte()]
});
```

## index.html

```html
<!doctype html>
<html lang="en" theme="joy" theme-mode="light">
  <head>
    <title>Mosaik Svelte App</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/index.scss" />
    <script type="module" src="./src/main.ts"></script>
  </head>
  <body>
    <div id="app">
      <mosaik-theme2>
      </mosaik-theme2>
    </div>
  </body>
</html>
```

## src/main.ts

```typescript
import '@breadstone/mosaik-elements-foundation';
import App from './App.svelte';

const app = new App({
  target: document.getElementById('app')!
});

export default app;
```

## src/App.svelte

```svelte
<script>
import { MosaikButton } from '@breadstone/mosaik-elements-svelte';

function handleChanged() {
  console.log('changed');
}
</script>

<!-- Your Mosaik components go here -->
<MosaikButton label="Hello Mosaik" on:changed={handleChanged} />
```

## src/index.scss

```scss
@use '@breadstone/mosaik-themes/scss' as theme;
@include theme.joy-style();

html, body {
  background-color: var(--mosaik-scheme-background);
}
```

## Usage pattern

Import Mosaik Svelte wrapper components directly:

```svelte
<script>
import { MosaikButton } from '@breadstone/mosaik-elements-svelte';
</script>

<MosaikButton label="Click me" on:changed={handleChanged} />
```

# Vue Starter Template

Use this template when the user wants to create a Vue application with Mosaik components.

**Package:** `@breadstone/mosaik-elements-vue`

## File structure

```
my-mosaik-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.ts
    ├── App.vue
    └── index.scss
```

## package.json

```json
{
  "name": "mosaik-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@breadstone/mosaik-elements": "latest",
    "@breadstone/mosaik-elements-foundation": "latest",
    "@breadstone/mosaik-elements-vue": "latest",
    "@breadstone/mosaik-themes": "latest",
    "vue": "^3.0.0",
    "reflect-metadata": "^0.2.2"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^6.3.5",
    "sass": "^1.89.0",
    "@vitejs/plugin-vue": "^5.0.0"
  }
}
```

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true
  },
  "include": ["src"]
}
```

## vite.config.ts

```typescript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  root: '.',
  publicDir: false,
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('mosaik-')
        }
      }
    })
  ]
});
```

## index.html

```html
<!doctype html>
<html lang="en" theme="joy" theme-mode="light">
  <head>
    <title>Mosaik Vue App</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/index.scss" />
    <script type="module" src="./src/main.ts"></script>
  </head>
  <body>
    <div id="app">
      <mosaik-theme2>
      </mosaik-theme2>
    </div>
  </body>
</html>
```

## src/main.ts

```typescript
import { createApp } from 'vue';
import '@breadstone/mosaik-elements-foundation';
import App from './App.vue';

createApp(App).mount('#app');
```

## src/App.vue

```vue
<script setup lang="ts">
import { ButtonComponent } from '@breadstone/mosaik-elements-vue';

function handleChanged() {
  console.log('changed');
}
</script>

<template>
  <div>
    <!-- Your Mosaik components go here -->
    <ButtonComponent label="Hello Mosaik" @changed="handleChanged" />
  </div>
</template>
```

## src/index.scss

```scss
@use '@breadstone/mosaik-themes/scss' as theme;
@include theme.joy-style();

html, body {
  background-color: var(--mosaik-scheme-background);
}
```

## Usage pattern

Import Mosaik Vue wrapper components directly:

```vue
<script setup lang="ts">
import { ButtonComponent } from '@breadstone/mosaik-elements-vue';
</script>

<template>
  <ButtonComponent label="Click me" @changed="handleChanged" />
</template>
```

---

If a capability is not described in a component's documentation file, it does not exist.