# 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)

CRITICAL: When generating standalone HTML, live previews, or any self-contained HTML output with Mosaik components, you MUST use the inline boilerplate. Without the theme initialization script, the component registration script, and the <mosaik-theme2> wrapper, Mosaik components will NOT render. Never output bare Mosaik custom elements without the full HTML document.

To retrieve the required HTML boilerplate, call the MCP tool `get_inline_boilerplate`. It returns a complete, minimal HTML document with all required CDN imports, theme initialization, and component registration that works without any build tool or package manager.

- inline.md

## Component Documentation Files

- [mosaik-absolute-item.md](llms/mosaik-absolute-item.md)
- [mosaik-absolute.md](llms/mosaik-absolute.md)
- [mosaik-actionbar-group.md](llms/mosaik-actionbar-group.md)
- [mosaik-actionbar-item.md](llms/mosaik-actionbar-item.md)
- [mosaik-actionbar-separator.md](llms/mosaik-actionbar-separator.md)
- [mosaik-actionbar.md](llms/mosaik-actionbar.md)
- [mosaik-anchor.md](llms/mosaik-anchor.md)
- [mosaik-app-header.md](llms/mosaik-app-header.md)
- [mosaik-app.md](llms/mosaik-app.md)
- [mosaik-attachment-chat-tool.md](llms/mosaik-attachment-chat-tool.md)
- [mosaik-audio.md](llms/mosaik-audio.md)
- [mosaik-auto-complete-box.md](llms/mosaik-auto-complete-box.md)
- [mosaik-autocompletebox.md](llms/mosaik-autocompletebox.md)
- [mosaik-avatar-group.md](llms/mosaik-avatar-group.md)
- [mosaik-avatar.md](llms/mosaik-avatar.md)
- [mosaik-back-top.md](llms/mosaik-back-top.md)
- [mosaik-backdrop.md](llms/mosaik-backdrop.md)
- [mosaik-badge.md](llms/mosaik-badge.md)
- [mosaik-banner-group.md](llms/mosaik-banner-group.md)
- [mosaik-banner-header.md](llms/mosaik-banner-header.md)
- [mosaik-banner-sub-header.md](llms/mosaik-banner-sub-header.md)
- [mosaik-banner.md](llms/mosaik-banner.md)
- [mosaik-box.md](llms/mosaik-box.md)
- [mosaik-breadcrumb-item.md](llms/mosaik-breadcrumb-item.md)
- [mosaik-breadcrumb.md](llms/mosaik-breadcrumb.md)
- [mosaik-busy-state.md](llms/mosaik-busy-state.md)
- [mosaik-button-group.md](llms/mosaik-button-group.md)
- [mosaik-button.md](llms/mosaik-button.md)
- [mosaik-calendar-days-view.md](llms/mosaik-calendar-days-view.md)
- [mosaik-calendar-header.md](llms/mosaik-calendar-header.md)
- [mosaik-calendar-item.md](llms/mosaik-calendar-item.md)
- [mosaik-calendar-months-view.md](llms/mosaik-calendar-months-view.md)
- [mosaik-calendar-sub-header.md](llms/mosaik-calendar-sub-header.md)
- [mosaik-calendar-years-view.md](llms/mosaik-calendar-years-view.md)
- [mosaik-calendar.md](llms/mosaik-calendar.md)
- [mosaik-camera.md](llms/mosaik-camera.md)
- [mosaik-card-actions.md](llms/mosaik-card-actions.md)
- [mosaik-card-content.md](llms/mosaik-card-content.md)
- [mosaik-card-footer.md](llms/mosaik-card-footer.md)
- [mosaik-card-header.md](llms/mosaik-card-header.md)
- [mosaik-card-sub-title.md](llms/mosaik-card-sub-title.md)
- [mosaik-card-title.md](llms/mosaik-card-title.md)
- [mosaik-card.md](llms/mosaik-card.md)
- [mosaik-carousel-2.md](llms/mosaik-carousel-2.md)
- [mosaik-carousel-item-2.md](llms/mosaik-carousel-item-2.md)
- [mosaik-carousel-item.md](llms/mosaik-carousel-item.md)
- [mosaik-carousel-item2.md](llms/mosaik-carousel-item2.md)
- [mosaik-carousel.md](llms/mosaik-carousel.md)
- [mosaik-carousel2.md](llms/mosaik-carousel2.md)
- [mosaik-cell-group.md](llms/mosaik-cell-group.md)
- [mosaik-cell.md](llms/mosaik-cell.md)
- [mosaik-chart.md](llms/mosaik-chart.md)
- [mosaik-chat-header.md](llms/mosaik-chat-header.md)
- [mosaik-chat-input-attachment-list.md](llms/mosaik-chat-input-attachment-list.md)
- [mosaik-chat-input.md](llms/mosaik-chat-input.md)
- [mosaik-chat-marker.md](llms/mosaik-chat-marker.md)
- [mosaik-chat-message-avatar.md](llms/mosaik-chat-message-avatar.md)
- [mosaik-chat-message-divider.md](llms/mosaik-chat-message-divider.md)
- [mosaik-chat-message-reaction.md](llms/mosaik-chat-message-reaction.md)
- [mosaik-chat-message.md](llms/mosaik-chat-message.md)
- [mosaik-chat.md](llms/mosaik-chat.md)
- [mosaik-check-box-group.md](llms/mosaik-check-box-group.md)
- [mosaik-check-box.md](llms/mosaik-check-box.md)
- [mosaik-checkbox-group.md](llms/mosaik-checkbox-group.md)
- [mosaik-checkbox.md](llms/mosaik-checkbox.md)
- [mosaik-checkmark.md](llms/mosaik-checkmark.md)
- [mosaik-chip-box.md](llms/mosaik-chip-box.md)
- [mosaik-chip-group.md](llms/mosaik-chip-group.md)
- [mosaik-chip.md](llms/mosaik-chip.md)
- [mosaik-chipbox.md](llms/mosaik-chipbox.md)
- [mosaik-choice-group-header.md](llms/mosaik-choice-group-header.md)
- [mosaik-choice-group.md](llms/mosaik-choice-group.md)
- [mosaik-choice.md](llms/mosaik-choice.md)
- [mosaik-code.md](llms/mosaik-code.md)
- [mosaik-color-area.md](llms/mosaik-color-area.md)
- [mosaik-color-box.md](llms/mosaik-color-box.md)
- [mosaik-color-editor-alpha-slider.md](llms/mosaik-color-editor-alpha-slider.md)
- [mosaik-color-editor-area.md](llms/mosaik-color-editor-area.md)
- [mosaik-color-editor-hue-slider.md](llms/mosaik-color-editor-hue-slider.md)
- [mosaik-color-editor-inputs.md](llms/mosaik-color-editor-inputs.md)
- [mosaik-color-editor-palette.md](llms/mosaik-color-editor-palette.md)
- [mosaik-color-editor-shade-slider.md](llms/mosaik-color-editor-shade-slider.md)
- [mosaik-color-editor-swatch.md](llms/mosaik-color-editor-swatch.md)
- [mosaik-color-editor.md](llms/mosaik-color-editor.md)
- [mosaik-color-picker.md](llms/mosaik-color-picker.md)
- [mosaik-color-slider.md](llms/mosaik-color-slider.md)
- [mosaik-color-swatch-group.md](llms/mosaik-color-swatch-group.md)
- [mosaik-color-swatch.md](llms/mosaik-color-swatch.md)
- [mosaik-color-thumb.md](llms/mosaik-color-thumb.md)
- [mosaik-colorbox.md](llms/mosaik-colorbox.md)
- [mosaik-combo-item.md](llms/mosaik-combo-item.md)
- [mosaik-combo.md](llms/mosaik-combo.md)
- [mosaik-comment.md](llms/mosaik-comment.md)
- [mosaik-compound-button.md](llms/mosaik-compound-button.md)
- [mosaik-content.md](llms/mosaik-content.md)
- [mosaik-cookies-consent.md](llms/mosaik-cookies-consent.md)
- [mosaik-data-list.md](llms/mosaik-data-list.md)
- [mosaik-data-table.md](llms/mosaik-data-table.md)
- [mosaik-date-box.md](llms/mosaik-date-box.md)
- [mosaik-date-time-box.md](llms/mosaik-date-time-box.md)
- [mosaik-datebox.md](llms/mosaik-datebox.md)
- [mosaik-datetimebox.md](llms/mosaik-datetimebox.md)
- [mosaik-designer-canvas.md](llms/mosaik-designer-canvas.md)
- [mosaik-designer-content.md](llms/mosaik-designer-content.md)
- [mosaik-designer-frame.md](llms/mosaik-designer-frame.md)
- [mosaik-designer.md](llms/mosaik-designer.md)
- [mosaik-dialog-actions.md](llms/mosaik-dialog-actions.md)
- [mosaik-dialog-content.md](llms/mosaik-dialog-content.md)
- [mosaik-dialog-footer.md](llms/mosaik-dialog-footer.md)
- [mosaik-dialog-header-sub-text.md](llms/mosaik-dialog-header-sub-text.md)
- [mosaik-dialog-header-text.md](llms/mosaik-dialog-header-text.md)
- [mosaik-dialog-header.md](llms/mosaik-dialog-header.md)
- [mosaik-dialog.md](llms/mosaik-dialog.md)
- [mosaik-disclosure.md](llms/mosaik-disclosure.md)
- [mosaik-dismiss.md](llms/mosaik-dismiss.md)
- [mosaik-divider.md](llms/mosaik-divider.md)
- [mosaik-dock-panel.md](llms/mosaik-dock-panel.md)
- [mosaik-dot-group.md](llms/mosaik-dot-group.md)
- [mosaik-dot.md](llms/mosaik-dot.md)
- [mosaik-drawer-actions.md](llms/mosaik-drawer-actions.md)
- [mosaik-drawer-container.md](llms/mosaik-drawer-container.md)
- [mosaik-drawer-content.md](llms/mosaik-drawer-content.md)
- [mosaik-drawer-footer.md](llms/mosaik-drawer-footer.md)
- [mosaik-drawer-header-sub-text.md](llms/mosaik-drawer-header-sub-text.md)
- [mosaik-drawer-header-text.md](llms/mosaik-drawer-header-text.md)
- [mosaik-drawer-header.md](llms/mosaik-drawer-header.md)
- [mosaik-drawer.md](llms/mosaik-drawer.md)
- [mosaik-drop-down-button.md](llms/mosaik-drop-down-button.md)
- [mosaik-drop-zone.md](llms/mosaik-drop-zone.md)
- [mosaik-dropdown-button.md](llms/mosaik-dropdown-button.md)
- [mosaik-elevation.md](llms/mosaik-elevation.md)
- [mosaik-emoji.md](llms/mosaik-emoji.md)
- [mosaik-empty-state.md](llms/mosaik-empty-state.md)
- [mosaik-epg-channel.md](llms/mosaik-epg-channel.md)
- [mosaik-epg-minimap.md](llms/mosaik-epg-minimap.md)
- [mosaik-epg-now-line.md](llms/mosaik-epg-now-line.md)
- [mosaik-epg-program.md](llms/mosaik-epg-program.md)
- [mosaik-epg-timeline.md](llms/mosaik-epg-timeline.md)
- [mosaik-epg.md](llms/mosaik-epg.md)
- [mosaik-error-state.md](llms/mosaik-error-state.md)
- [mosaik-error.md](llms/mosaik-error.md)
- [mosaik-expandable.md](llms/mosaik-expandable.md)
- [mosaik-expander-group.md](llms/mosaik-expander-group.md)
- [mosaik-expander-header.md](llms/mosaik-expander-header.md)
- [mosaik-expander-sub-header.md](llms/mosaik-expander-sub-header.md)
- [mosaik-expander.md](llms/mosaik-expander.md)
- [mosaik-fab-group.md](llms/mosaik-fab-group.md)
- [mosaik-fab.md](llms/mosaik-fab.md)
- [mosaik-file-picker.md](llms/mosaik-file-picker.md)
- [mosaik-file-upload-item.md](llms/mosaik-file-upload-item.md)
- [mosaik-file-upload.md](llms/mosaik-file-upload.md)
- [mosaik-flip.md](llms/mosaik-flip.md)
- [mosaik-floating-action-button-group.md](llms/mosaik-floating-action-button-group.md)
- [mosaik-floating-action-button.md](llms/mosaik-floating-action-button.md)
- [mosaik-floating-trigger.md](llms/mosaik-floating-trigger.md)
- [mosaik-floating.md](llms/mosaik-floating.md)
- [mosaik-flow-board-column-composer.md](llms/mosaik-flow-board-column-composer.md)
- [mosaik-flow-board-column-item-composer.md](llms/mosaik-flow-board-column-item-composer.md)
- [mosaik-flow-board-column-item.md](llms/mosaik-flow-board-column-item.md)
- [mosaik-flow-board-column.md](llms/mosaik-flow-board-column.md)
- [mosaik-flow-board.md](llms/mosaik-flow-board.md)
- [mosaik-focus-ring.md](llms/mosaik-focus-ring.md)
- [mosaik-font-editor.md](llms/mosaik-font-editor.md)
- [mosaik-footer-item-group.md](llms/mosaik-footer-item-group.md)
- [mosaik-footer-item.md](llms/mosaik-footer-item.md)
- [mosaik-footer.md](llms/mosaik-footer.md)
- [mosaik-form-field.md](llms/mosaik-form-field.md)
- [mosaik-form.md](llms/mosaik-form.md)
- [mosaik-ghost.md](llms/mosaik-ghost.md)
- [mosaik-grid-item.md](llms/mosaik-grid-item.md)
- [mosaik-grid.md](llms/mosaik-grid.md)
- [mosaik-helmet.md](llms/mosaik-helmet.md)
- [mosaik-hint.md](llms/mosaik-hint.md)
- [mosaik-icon.md](llms/mosaik-icon.md)
- [mosaik-image.md](llms/mosaik-image.md)
- [mosaik-indicator.md](llms/mosaik-indicator.md)
- [mosaik-ink-bar.md](llms/mosaik-ink-bar.md)
- [mosaik-jumbotron-header.md](llms/mosaik-jumbotron-header.md)
- [mosaik-jumbotron-sub-header.md](llms/mosaik-jumbotron-sub-header.md)
- [mosaik-jumbotron.md](llms/mosaik-jumbotron.md)
- [mosaik-kbd-shortcut.md](llms/mosaik-kbd-shortcut.md)
- [mosaik-kbd.md](llms/mosaik-kbd.md)
- [mosaik-light-chain.md](llms/mosaik-light-chain.md)
- [mosaik-list-item-group.md](llms/mosaik-list-item-group.md)
- [mosaik-list-item.md](llms/mosaik-list-item.md)
- [mosaik-list.md](llms/mosaik-list.md)
- [mosaik-listing-item-marker.md](llms/mosaik-listing-item-marker.md)
- [mosaik-listing-item.md](llms/mosaik-listing-item.md)
- [mosaik-listing.md](llms/mosaik-listing.md)
- [mosaik-map.md](llms/mosaik-map.md)
- [mosaik-marker.md](llms/mosaik-marker.md)
- [mosaik-marquee.md](llms/mosaik-marquee.md)
- [mosaik-masonry.md](llms/mosaik-masonry.md)
- [mosaik-menu-item-group.md](llms/mosaik-menu-item-group.md)
- [mosaik-menu-item.md](llms/mosaik-menu-item.md)
- [mosaik-menu.md](llms/mosaik-menu.md)
- [mosaik-message-box.md](llms/mosaik-message-box.md)
- [mosaik-message-content.md](llms/mosaik-message-content.md)
- [mosaik-message.md](llms/mosaik-message.md)
- [mosaik-meter-bar.md](llms/mosaik-meter-bar.md)
- [mosaik-meter-ring.md](llms/mosaik-meter-ring.md)
- [mosaik-number-box.md](llms/mosaik-number-box.md)
- [mosaik-number-counter.md](llms/mosaik-number-counter.md)
- [mosaik-number.md](llms/mosaik-number.md)
- [mosaik-numberbox.md](llms/mosaik-numberbox.md)
- [mosaik-page-content.md](llms/mosaik-page-content.md)
- [mosaik-page-header.md](llms/mosaik-page-header.md)
- [mosaik-page-menu.md](llms/mosaik-page-menu.md)
- [mosaik-page-pre-content.md](llms/mosaik-page-pre-content.md)
- [mosaik-page-pre-header.md](llms/mosaik-page-pre-header.md)
- [mosaik-page.md](llms/mosaik-page.md)
- [mosaik-pagemenu.md](llms/mosaik-pagemenu.md)
- [mosaik-paginator.md](llms/mosaik-paginator.md)
- [mosaik-password-box.md](llms/mosaik-password-box.md)
- [mosaik-passwordbox.md](llms/mosaik-passwordbox.md)
- [mosaik-pattern.md](llms/mosaik-pattern.md)
- [mosaik-persona.md](llms/mosaik-persona.md)
- [mosaik-perspective.md](llms/mosaik-perspective.md)
- [mosaik-pin-box.md](llms/mosaik-pin-box.md)
- [mosaik-pinbox.md](llms/mosaik-pinbox.md)
- [mosaik-pip.md](llms/mosaik-pip.md)
- [mosaik-placeholder.md](llms/mosaik-placeholder.md)
- [mosaik-popup.md](llms/mosaik-popup.md)
- [mosaik-portal-host.md](llms/mosaik-portal-host.md)
- [mosaik-portal-projection.md](llms/mosaik-portal-projection.md)
- [mosaik-portal.md](llms/mosaik-portal.md)
- [mosaik-press-button.md](llms/mosaik-press-button.md)
- [mosaik-progress-bar.md](llms/mosaik-progress-bar.md)
- [mosaik-progress-ring.md](llms/mosaik-progress-ring.md)
- [mosaik-q-r-code.md](llms/mosaik-q-r-code.md)
- [mosaik-qrcode.md](llms/mosaik-qrcode.md)
- [mosaik-radio-group.md](llms/mosaik-radio-group.md)
- [mosaik-radio.md](llms/mosaik-radio.md)
- [mosaik-rating.md](llms/mosaik-rating.md)
- [mosaik-reaction-chat-tool.md](llms/mosaik-reaction-chat-tool.md)
- [mosaik-region-view.md](llms/mosaik-region-view.md)
- [mosaik-region.md](llms/mosaik-region.md)
- [mosaik-repeat-button.md](llms/mosaik-repeat-button.md)
- [mosaik-resize-adorner.md](llms/mosaik-resize-adorner.md)
- [mosaik-resize-thumb.md](llms/mosaik-resize-thumb.md)
- [mosaik-resize.md](llms/mosaik-resize.md)
- [mosaik-ribbon.md](llms/mosaik-ribbon.md)
- [mosaik-rich-text-box-toolbox.md](llms/mosaik-rich-text-box-toolbox.md)
- [mosaik-rich-text-box.md](llms/mosaik-rich-text-box.md)
- [mosaik-richtextbox-toolbox.md](llms/mosaik-richtextbox-toolbox.md)
- [mosaik-richtextbox.md](llms/mosaik-richtextbox.md)
- [mosaik-ripple.md](llms/mosaik-ripple.md)
- [mosaik-scale.md](llms/mosaik-scale.md)
- [mosaik-scheduler-agenda-view.md](llms/mosaik-scheduler-agenda-view.md)
- [mosaik-scheduler-column-header.md](llms/mosaik-scheduler-column-header.md)
- [mosaik-scheduler-column.md](llms/mosaik-scheduler-column.md)
- [mosaik-scheduler-columns.md](llms/mosaik-scheduler-columns.md)
- [mosaik-scheduler-datescale.md](llms/mosaik-scheduler-datescale.md)
- [mosaik-scheduler-event-renderer.md](llms/mosaik-scheduler-event-renderer.md)
- [mosaik-scheduler-event.md](llms/mosaik-scheduler-event.md)
- [mosaik-scheduler-month-view.md](llms/mosaik-scheduler-month-view.md)
- [mosaik-scheduler-now-indicator.md](llms/mosaik-scheduler-now-indicator.md)
- [mosaik-scheduler-time-grid-view.md](llms/mosaik-scheduler-time-grid-view.md)
- [mosaik-scheduler-time-label.md](llms/mosaik-scheduler-time-label.md)
- [mosaik-scheduler-timeline-row.md](llms/mosaik-scheduler-timeline-row.md)
- [mosaik-scheduler-timeline.md](llms/mosaik-scheduler-timeline.md)
- [mosaik-scheduler-timescale.md](llms/mosaik-scheduler-timescale.md)
- [mosaik-scheduler.md](llms/mosaik-scheduler.md)
- [mosaik-scroll.md](llms/mosaik-scroll.md)
- [mosaik-scrub-slider.md](llms/mosaik-scrub-slider.md)
- [mosaik-search-box.md](llms/mosaik-search-box.md)
- [mosaik-searchbox.md](llms/mosaik-searchbox.md)
- [mosaik-segment-item.md](llms/mosaik-segment-item.md)
- [mosaik-segment.md](llms/mosaik-segment.md)
- [mosaik-select-item-group.md](llms/mosaik-select-item-group.md)
- [mosaik-select-item.md](llms/mosaik-select-item.md)
- [mosaik-select.md](llms/mosaik-select.md)
- [mosaik-selector-item.md](llms/mosaik-selector-item.md)
- [mosaik-sheet-content.md](llms/mosaik-sheet-content.md)
- [mosaik-sheet-footer.md](llms/mosaik-sheet-footer.md)
- [mosaik-sheet-header-sub-text.md](llms/mosaik-sheet-header-sub-text.md)
- [mosaik-sheet-header-text.md](llms/mosaik-sheet-header-text.md)
- [mosaik-sheet-header.md](llms/mosaik-sheet-header.md)
- [mosaik-sheet.md](llms/mosaik-sheet.md)
- [mosaik-signature-pad.md](llms/mosaik-signature-pad.md)
- [mosaik-signaturepad.md](llms/mosaik-signaturepad.md)
- [mosaik-skeleton.md](llms/mosaik-skeleton.md)
- [mosaik-slider.md](llms/mosaik-slider.md)
- [mosaik-slider2-thumb.md](llms/mosaik-slider2-thumb.md)
- [mosaik-slider2.md](llms/mosaik-slider2.md)
- [mosaik-spacer.md](llms/mosaik-spacer.md)
- [mosaik-split-button.md](llms/mosaik-split-button.md)
- [mosaik-split.md](llms/mosaik-split.md)
- [mosaik-stack.md](llms/mosaik-stack.md)
- [mosaik-stepper-item.md](llms/mosaik-stepper-item.md)
- [mosaik-stepper.md](llms/mosaik-stepper.md)
- [mosaik-sticky.md](llms/mosaik-sticky.md)
- [mosaik-success-state.md](llms/mosaik-success-state.md)
- [mosaik-summary.md](llms/mosaik-summary.md)
- [mosaik-swipe.md](llms/mosaik-swipe.md)
- [mosaik-tab-item.md](llms/mosaik-tab-item.md)
- [mosaik-tab-panel.md](llms/mosaik-tab-panel.md)
- [mosaik-tab-strip-item.md](llms/mosaik-tab-strip-item.md)
- [mosaik-tab-strip.md](llms/mosaik-tab-strip.md)
- [mosaik-tab.md](llms/mosaik-tab.md)
- [mosaik-table-body-cell.md](llms/mosaik-table-body-cell.md)
- [mosaik-table-body-row.md](llms/mosaik-table-body-row.md)
- [mosaik-table-body.md](llms/mosaik-table-body.md)
- [mosaik-table-cell.md](llms/mosaik-table-cell.md)
- [mosaik-table-footer-cell.md](llms/mosaik-table-footer-cell.md)
- [mosaik-table-footer-row.md](llms/mosaik-table-footer-row.md)
- [mosaik-table-footer.md](llms/mosaik-table-footer.md)
- [mosaik-table-header-cell.md](llms/mosaik-table-header-cell.md)
- [mosaik-table-header-row.md](llms/mosaik-table-header-row.md)
- [mosaik-table-header.md](llms/mosaik-table-header.md)
- [mosaik-table-row.md](llms/mosaik-table-row.md)
- [mosaik-table.md](llms/mosaik-table.md)
- [mosaik-text-box.md](llms/mosaik-text-box.md)
- [mosaik-text-format.md](llms/mosaik-text-format.md)
- [mosaik-text.md](llms/mosaik-text.md)
- [mosaik-textbox.md](llms/mosaik-textbox.md)
- [mosaik-thumb.md](llms/mosaik-thumb.md)
- [mosaik-thumbnail.md](llms/mosaik-thumbnail.md)
- [mosaik-tick-bar.md](llms/mosaik-tick-bar.md)
- [mosaik-tile-list-item.md](llms/mosaik-tile-list-item.md)
- [mosaik-tile-list.md](llms/mosaik-tile-list.md)
- [mosaik-tile-manager-tile.md](llms/mosaik-tile-manager-tile.md)
- [mosaik-tile-manager.md](llms/mosaik-tile-manager.md)
- [mosaik-tile.md](llms/mosaik-tile.md)
- [mosaik-time-box.md](llms/mosaik-time-box.md)
- [mosaik-timebox.md](llms/mosaik-timebox.md)
- [mosaik-timeline-content.md](llms/mosaik-timeline-content.md)
- [mosaik-timeline-item.md](llms/mosaik-timeline-item.md)
- [mosaik-timeline-marker.md](llms/mosaik-timeline-marker.md)
- [mosaik-timeline-opposite.md](llms/mosaik-timeline-opposite.md)
- [mosaik-timeline.md](llms/mosaik-timeline.md)
- [mosaik-title-bar.md](llms/mosaik-title-bar.md)
- [mosaik-title-layout.md](llms/mosaik-title-layout.md)
- [mosaik-titlebar.md](llms/mosaik-titlebar.md)
- [mosaik-toast.md](llms/mosaik-toast.md)
- [mosaik-toggle-button-group.md](llms/mosaik-toggle-button-group.md)
- [mosaik-toggle-button.md](llms/mosaik-toggle-button.md)
- [mosaik-toggle-switch.md](llms/mosaik-toggle-switch.md)
- [mosaik-toggle-tip.md](llms/mosaik-toggle-tip.md)
- [mosaik-toggletip.md](llms/mosaik-toggletip.md)
- [mosaik-toolbar.md](llms/mosaik-toolbar.md)
- [mosaik-tooltip.md](llms/mosaik-tooltip.md)
- [mosaik-tour-anchor.md](llms/mosaik-tour-anchor.md)
- [mosaik-tour-step.md](llms/mosaik-tour-step.md)
- [mosaik-tour.md](llms/mosaik-tour.md)
- [mosaik-tree-item.md](llms/mosaik-tree-item.md)
- [mosaik-tree.md](llms/mosaik-tree.md)
- [mosaik-up-down-spinner.md](llms/mosaik-up-down-spinner.md)
- [mosaik-updown-spinner.md](llms/mosaik-updown-spinner.md)
- [mosaik-video.md](llms/mosaik-video.md)
- [mosaik-virtualize.md](llms/mosaik-virtualize.md)
- [mosaik-voice-recorder-chat-tool.md](llms/mosaik-voice-recorder-chat-tool.md)
- [mosaik-wizard-step.md](llms/mosaik-wizard-step.md)
- [mosaik-wizard.md](llms/mosaik-wizard.md)
- [mosaik-wrap.md](llms/mosaik-wrap.md)

## Starter Templates

To scaffold a new application using Mosaik components from scratch, call the MCP tool `get_starter_template` with the desired framework. Each template provides a complete, runnable project setup including all dependencies, theme configuration, and component registration.

Available frameworks: `native` (default - plain HTML with CDN), `angular`, `react`, `vue`, `svelte`, `lit`.

When no specific framework is mentioned, always default to `native`. For AI chat environments with live preview (e.g. ChatGPT), use `get_inline_boilerplate` instead.

- angular.md
- lit.md
- native.md
- react.md
- svelte.md
- vue.md


---

If a capability is not described in a component's documentation file, it does not exist.