# Mielui — complete documentation

Source: http://sveltekit-prerender/docs/components/chart/bar.md

# Bar chart

Compare categories with grouped or stacked bars.

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Usage

Use one Bar for each numeric series and match its key to a config entry. Bars share a zero baseline.

Set stacked on Root to add bar series together. Positive and negative values stack on opposite sides of zero. Set orientation="horizontal" when category labels need more room.

Use the [Chart API reference](/docs/components/chart.md) for all exported parts and their props.

## Examples

### Grouped series

Compare two measurements side by side for each category.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="revenue" />
        <Chart.Bar key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Horizontal stacks

Stack related counts and keep long category names beside the bars.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', desktop: 186, mobile: 160 },
        { month: 'Feb', desktop: 242, mobile: 190 },
        { month: 'Mar', desktop: 218, mobile: 220 },
        { month: 'Apr', desktop: 304, mobile: 250 },
        { month: 'May', desktop: 286, mobile: 280 },
        { month: 'Jun', desktop: 372, mobile: 310 }
    ];
    const config = {
        desktop: { label: 'Desktop', color: 'var(--chart-1)' },
        mobile: { label: 'Mobile', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="month"
    aria-label="Monthly visitors by device"
    class="w-full"
    orientation="horizontal"
    stacked
>
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="desktop" />
        <Chart.Bar key="mobile" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Positive and negative values

Net changes extend on either side of zero. Negative values remain negative in the tooltip.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', balance: 24 },
        { month: 'Feb', balance: -12 },
        { month: 'Mar', balance: 38 },
        { month: 'Apr', balance: -6 },
        { month: 'May', balance: 19 }
    ];
    const config = { balance: { label: 'Net new accounts', color: 'var(--chart-1)' } };
</script>

<Chart.Root {data} {config} x="month" aria-label="Net account changes by month" class="w-full">
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="balance" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Revise a forecast

Switch between forecasts for the same months. Values and the numeric scale transition together, including when you switch again before motion finishes.

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';

    let revised = $state(false);
    const data = $derived(
        revised
            ? [
                  { month: 'April', sales: 240 },
                  { month: 'May', sales: 190 },
                  { month: 'June', sales: 320 }
              ]
            : [
                  { month: 'April', sales: 170 },
                  { month: 'May', sales: 280 },
                  { month: 'June', sales: 210 }
              ]
    );
    const config = { sales: { label: 'Orders', color: 'var(--chart-1)' } };

    function switchRevision() {
        revised = !revised;
    }
</script>
<div class="w-full">
    <Button variant="secondary" onclick={switchRevision}>
        {revised ? 'Show original forecast' : 'Show revised forecast'}
    </Button>
    <Chart.Root
        {data}
        {config}
        x="month"
        aria-label="Order forecasts for April through June"
        class="mt-4"
    >
        <Chart.Plot>
            <Chart.Grid />
            <Chart.XAxis />
            <Chart.YAxis />
            <Chart.Bar key="sales" />
        </Chart.Plot>
        <Chart.Tooltip />
        <Chart.Legend />
    </Chart.Root>
</div>
~~~~

### Continuous motion

A light sweep follows the existing bars. It leaves the values unchanged and pauses offscreen.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="month"
    aria-label="Monthly revenue and target"
    class="w-full"
    animation="live"
>
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="revenue" />
        <Chart.Bar key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

For the rendered guide, visit [Bar chart](/docs/components/chart/bar).


---

Source: http://sveltekit-prerender/docs/components/chart/line.md

# Line chart

Follow changes over time without a filled area.

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Usage

Use a Line for each numeric series. Sort dates before passing data; lines connect points in the supplied order.

String categories have equal spacing. Date and numeric categories preserve their distance. A null or missing measurement breaks the line instead of turning into zero.

Use the [Chart API reference](/docs/components/chart.md) for all exported parts and their props.

## Examples

### Compare trends

Two lines share one numeric scale and a labelled legend.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Missing measurements

Wednesday has no reading. The gap stays visible so the chart does not imply a measurement.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Mon', latency: 42 },
        { month: 'Tue', latency: 58 },
        { month: 'Wed', latency: null },
        { month: 'Thu', latency: 47 },
        { month: 'Fri', latency: 39 },
        { month: 'Sat', latency: 45 }
    ];
    const config = {
        latency: {
            label: 'Latency',
            color: 'var(--chart-1)',
            format: (value: number) => `${value} ms`
        }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="month"
    aria-label="Response latency with a missing Wednesday measurement"
    class="w-full"
>
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="latency" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Irregular dates

April 3 and April 10 are seven days apart. Their spacing is wider than samples taken two days apart.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { date: new Date('2026-04-01T00:00:00Z'), visitors: 120 },
        { date: new Date('2026-04-03T00:00:00Z'), visitors: 180 },
        { date: new Date('2026-04-10T00:00:00Z'), visitors: 150 },
        { date: new Date('2026-04-12T00:00:00Z'), visitors: 230 }
    ];
    const config = { visitors: { label: 'Visitors', color: 'var(--chart-2)' } };
</script>

<Chart.Root
    {data}
    {config}
    x="date"
    aria-label="Visitors sampled at irregular dates"
    class="w-full"
>
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="visitors" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Continuous motion

A traveling highlight follows each line without changing its path or values.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="month"
    aria-label="Monthly revenue and target"
    class="w-full"
    animation="live"
>
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Line key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

For the rendered guide, visit [Line chart](/docs/components/chart/line).


---

Source: http://sveltekit-prerender/docs/components/chart/area.md

# Area chart

Show the amount over time with a filled series.

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Usage

Place Area inside Plot. The fill extends to zero and fades toward the baseline.

Multiple areas overlap on the same scale. They are not stacked; use grouped bars when overlap would obscure the comparison.

Use the [Chart API reference](/docs/components/chart.md) for all exported parts and their props.

## Examples

### One series

Monthly revenue uses one filled series with an outlined edge.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186 },
        { month: 'Feb', revenue: 242 },
        { month: 'Mar', revenue: 218 },
        { month: 'Apr', revenue: 304 },
        { month: 'May', revenue: 286 },
        { month: 'Jun', revenue: 372 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Area key="revenue" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Overlapping series

Desktop and mobile sessions share a scale. Their legend and tooltip keep the two measurements identifiable.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', desktop: 186, mobile: 120 },
        { month: 'Feb', desktop: 242, mobile: 150 },
        { month: 'Mar', desktop: 218, mobile: 180 },
        { month: 'Apr', desktop: 304, mobile: 220 },
        { month: 'May', desktop: 286, mobile: 240 }
    ];
    const config = {
        desktop: { label: 'Desktop', color: 'var(--chart-1)' },
        mobile: { label: 'Mobile', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Desktop and mobile sessions" class="w-full">
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Area key="desktop" />
        <Chart.Area key="mobile" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Changing values

Switch forecasts while the chart is moving. The next transition starts from the current display.

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';

    let revised = $state(false);
    const data = $derived(
        revised
            ? [
                  { month: 'April', sales: 240 },
                  { month: 'May', sales: 190 },
                  { month: 'June', sales: 320 }
              ]
            : [
                  { month: 'April', sales: 170 },
                  { month: 'May', sales: 280 },
                  { month: 'June', sales: 210 }
              ]
    );
    const config = { sales: { label: 'Orders', color: 'var(--chart-1)' } };

    function switchRevision() {
        revised = !revised;
    }
</script>
<div class="w-full">
    <Button variant="secondary" onclick={switchRevision}>
        {revised ? 'Show original forecast' : 'Show revised forecast'}
    </Button>
    <Chart.Root
        {data}
        {config}
        x="month"
        aria-label="Order forecasts for April through June"
        class="mt-4"
    >
        <Chart.Plot>
            <Chart.Grid />
            <Chart.XAxis />
            <Chart.YAxis />
            <Chart.Area key="sales" />
        </Chart.Plot>
        <Chart.Tooltip />
        <Chart.Legend />
    </Chart.Root>
</div>
~~~~

### Continuous motion

A light sweep travels through the filled area without changing its values.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue" class="w-full" animation="live">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Area key="revenue" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

For the rendered guide, visit [Area chart](/docs/components/chart/area).


---

Source: http://sveltekit-prerender/docs/components/chart/mixed.md

# Mixed chart

Compare totals and benchmarks in one plot.

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Usage

Compose Bar, Line, and Area in the same Plot. All marks use the same numeric axis, so their values must use compatible units.

Lines do not reserve bar slots or contribute to stacked bar totals. Keep target series in config so legends and tooltips can name them.

Use the [Chart API reference](/docs/components/chart.md) for all exported parts and their props.

## Examples

### Totals and target

Bars show measured totals and a line shows the target for the same period.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Continuous motion

Bar sweeps and the line highlight continue after entry without changing the dataset.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Custom legend and tooltip

Move the legend above the plot, omit the grid and Y-axis, and render tooltip values through its snippet.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { day: 'Mon', requests: 420, target: 500 },
        { day: 'Tue', requests: 670, target: 600 },
        { day: 'Wed', requests: 590, target: 650 },
        { day: 'Thu', requests: 810, target: 750 },
        { day: 'Fri', requests: 940, target: 800 }
    ];
    const config = {
        target: { label: 'Target', color: 'var(--chart-2)' },
        requests: {
            label: 'API requests',
            color: 'var(--chart-1)',
            format: (value: number) => `${value.toLocaleString()} requests`
        }
    };
</script>
<Chart.Root
    {data}
    {config}
    x="day"
    animation="live"
    aria-label="API requests by weekday"
    class="w-full"
>
    <Chart.Legend>
        {#snippet children({ label, color })}
            <div class="flex items-center gap-2 text-sm">
                <span class="h-0.5 w-5 rounded-full" style:background={color}></span>
                {label}
                <span class="rounded-full bg-success/10 px-2 py-0.5 text-xs text-success">
                    Live example
                </span>
            </div>
        {/snippet}
    </Chart.Legend>
    <Chart.Plot class="h-56">
        <Chart.XAxis />
        <Chart.Bar key="requests" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip>
        {#snippet children({ label, values })}
            <div class="flex flex-col gap-1">
                <span class="text-foreground-muted">{label}</span>
                {#each values as item}
                    <strong class="text-sm font-medium tabular-nums">{item.formatted}</strong>
                {/each}
            </div>
        {/snippet}
    </Chart.Tooltip>
</Chart.Root>
~~~~

For the rendered guide, visit [Mixed chart](/docs/components/chart/mixed).


---

Source: http://sveltekit-prerender/docs/components/pie-chart/pie.md

# Pie chart

Show a few categories as shares of a total.

## Install

~~~~sh
pnpm dlx @mielui/svelte add pie-chart
~~~~

## Usage

Set Arc innerRadius to 0 for a solid pie and omit Label. Each datum has a stable key and a nonnegative value.

Use a bar chart when small differences matter or when many categories would produce thin slices. The legend provides exact values without relying on color.

Use the [Pie Chart API reference](/docs/components/pie-chart.md) for all exported parts and their props.

## Examples

### Category shares

A solid pie with exact values in its legend and tooltip.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    const data = [
        { key: 'paid', value: 64 },
        { key: 'trial', value: 24 },
        { key: 'free', value: 12 }
    ];
    const config = {
        paid: {
            label: 'Paid',
            color: 'var(--chart-1)',
            format: (value: number) => `${value}%`
        },
        trial: {
            label: 'Trial',
            color: 'var(--chart-2)',
            format: (value: number) => `${value}%`
        },
        free: {
            label: 'Free',
            color: 'var(--chart-3)',
            format: (value: number) => `${value}%`
        }
    };
</script>

<PieChart.Root
    {data}
    {config}
    aria-label="Accounts by subscription status"
    animation="none"
    class="w-full max-w-lg"
>
    <PieChart.Legend />
    <PieChart.Plot class="h-64">
        <PieChart.Arc innerRadius={0} cornerRadius={2} padAngle={0.02} />
    </PieChart.Plot>
    <PieChart.Tooltip />
</PieChart.Root>
~~~~

### Continuous motion

Each segment brightens in sequence. Its position and proportion stay fixed.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    const data = [
        { key: 'product', value: 52 },
        { key: 'engineering', value: 31 },
        { key: 'support', value: 17 }
    ];
    const percent = (value: number) => `${value}%`;
    const config = {
        product: { label: 'Product', color: 'var(--chart-1)', format: percent },
        engineering: { label: 'Engineering', color: 'var(--chart-2)', format: percent },
        support: { label: 'Support', color: 'var(--chart-3)', format: percent }
    };
</script>

<div class="w-full max-w-xl">
    <h3 class="font-medium">Time by team</h3>
    <p class="mt-1 text-sm text-foreground-muted">Share of tracked hours this week.</p>
    <PieChart.Root {data} {config} animation="live" aria-label="Weekly tracked hours by team">
        <PieChart.Plot class="h-72">
            <PieChart.Arc innerRadius={0} cornerRadius={5} padAngle={0.025} />
        </PieChart.Plot>
        <PieChart.Legend />
        <PieChart.Tooltip />
    </PieChart.Root>
</div>
~~~~

### Filter a category

Exclude internal traffic and watch the remaining shares recalculate. Stable keys preserve category identity.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';
    import { Switch } from '@mielui/svelte/components/switch';

    let includeInternal = $state(true);
    const records = [
        { key: 'search', value: 420 },
        { key: 'direct', value: 280 },
        { key: 'internal', value: 160 }
    ];
    const data = $derived(records.filter((item) => includeInternal || item.key !== 'internal'));
    const config = {
        search: { label: 'Search', color: 'var(--chart-1)' },
        direct: { label: 'Direct', color: 'var(--chart-2)' },
        internal: { label: 'Internal', color: 'var(--chart-3)' }
    };
</script>

<div class="w-full max-w-lg space-y-4">
    <Switch bind:checked={includeInternal} label="Include internal traffic" />
    <PieChart.Root {data} {config} aria-label="Traffic sources">
        <PieChart.Plot><PieChart.Arc innerRadius={0} /></PieChart.Plot>
        <PieChart.Tooltip />
        <PieChart.Legend>
            {#snippet children({ label, percentage })}
                <span>{label}</span>
                <span class="tabular-nums text-foreground">{percentage.toFixed(1)}%</span>
            {/snippet}
        </PieChart.Legend>
    </PieChart.Root>
</div>
~~~~

For the rendered guide, visit [Pie chart](/docs/components/pie-chart/pie).


---

Source: http://sveltekit-prerender/docs/components/pie-chart/donut.md

# Donut chart

Place a total or active value inside a category breakdown.

## Install

~~~~sh
pnpm dlx @mielui/svelte add pie-chart
~~~~

## Usage

Arc defaults to a donut. Change innerRadius to control the opening and compose Label inside Plot for center content.

Place Legend and Tooltip directly inside Root. Their snippets receive the formatted value and the percentage of the current total.

Use the [Pie Chart API reference](/docs/components/pie-chart.md) for all exported parts and their props.

## Examples

### Total in the center

The default center label shows the total and responds to the active category.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    const data = [
        { key: 'direct', value: 1240 },
        { key: 'search', value: 860 },
        { key: 'referral', value: 420 }
    ];
    const config = {
        direct: { label: 'Direct', color: 'var(--chart-1)' },
        search: { label: 'Search', color: 'var(--chart-2)' },
        referral: { label: 'Referral', color: 'var(--chart-3)' }
    };
</script>

<div class="w-full max-w-lg">
    <h3 class="font-medium">Where visitors come from</h3>
    <p class="mt-1 text-sm text-foreground-muted">Sessions by acquisition channel this month.</p>
    <PieChart.Root {data} {config} aria-label="Monthly sessions by acquisition channel">
        <PieChart.Plot class="h-64">
            <PieChart.Arc />
            <PieChart.Label />
        </PieChart.Plot>
        <PieChart.Tooltip />
        <PieChart.Legend />
    </PieChart.Root>
</div>
~~~~

### Switch periods

Switch monthly and annual subscriptions. Slice angles update while the continuous highlight remains decorative.

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    let annual = $state(false);
    const data = $derived([
        { key: 'team', value: annual ? 680 : 420 },
        { key: 'solo', value: annual ? 320 : 580 }
    ]);
    const config = {
        team: { label: 'Team', color: 'var(--chart-1)' },
        solo: { label: 'Solo', color: 'var(--chart-2)' }
    };

    function switchPeriod() {
        annual = !annual;
    }
</script>

<div class="w-full max-w-lg">
    <div class="flex items-center justify-between gap-4">
        <h3 class="font-medium">{annual ? 'Annual plans' : 'Monthly plans'}</h3>
        <Button variant="secondary" onclick={switchPeriod}>Switch period</Button>
    </div>
    <PieChart.Root {data} {config} animation="live" aria-label="Subscriptions by plan">
        <PieChart.Plot>
            <PieChart.Arc innerRadius={0.76} padAngle={0.045} />
            <PieChart.Label>
                {#snippet children({ total, active })}
                    {active ? active.value : total}
                {/snippet}
            </PieChart.Label>
        </PieChart.Plot>
        <PieChart.Tooltip />
        <PieChart.Legend />
    </PieChart.Root>
</div>
~~~~

### Custom center and legend

Replace the center content and legend labels while retaining the shared values and keyboard interaction.

~~~~svelte
<script lang="ts">
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    const data = [
        { key: 'storage', value: 1840 },
        { key: 'compute', value: 3260 },
        { key: 'network', value: 900 }
    ];
    const currency = (value: number) =>
        new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            maximumFractionDigits: 0
        }).format(value);
    const config = {
        storage: { label: 'Storage', color: 'var(--chart-1)', format: currency },
        compute: { label: 'Compute', color: 'var(--chart-2)', format: currency },
        network: { label: 'Network', color: 'var(--chart-3)', format: currency }
    };
</script>

<div class="@container w-full max-w-2xl">
    <h3 class="font-medium">Infrastructure spend</h3>
    <p class="mt-1 text-sm text-foreground-muted">This month, before tax.</p>
    <PieChart.Root
        {data}
        {config}
        aria-label="Monthly infrastructure spend"
        class="grid items-center gap-6 @lg:grid-cols-2"
    >
        <PieChart.Plot class="h-64">
            <PieChart.Arc innerRadius={0.78} padAngle={0.025} cornerRadius={3} />
            <PieChart.Label class="text-2xl">
                {#snippet children({ total, active })}
                    <tspan x="0" dy="-0.1em">{currency(active?.value ?? total)}</tspan>
                    <tspan x="0" dy="1.8em" class="fill-foreground-muted text-xs font-normal">
                        {active ? config[active.key as keyof typeof config].label : 'Total spend'}
                    </tspan>
                {/snippet}
            </PieChart.Label>
        </PieChart.Plot>
        <PieChart.Legend
            class="flex-col items-stretch gap-2 [&_button]:w-full [&_button]:justify-between"
        >
            {#snippet children({ item, label, value, percentage })}
                <span class="flex items-center gap-2">
                    <span
                        class="size-2 rounded-full"
                        style:background={config[item.key as keyof typeof config].color}
                    ></span>
                    {label}
                </span>
                <span class="ml-auto pl-4 text-right">
                    <span class="block text-foreground tabular-nums">{value}</span>
                    <span class="block text-xs tabular-nums">{percentage.toFixed(1)}%</span>
                </span>
            {/snippet}
        </PieChart.Legend>
        <PieChart.Tooltip>
            {#snippet children({ label, value, percentage })}
                <span class="grid gap-1">
                    <span class="text-foreground-muted">{label}</span>
                    <span class="font-medium">{value} ·{percentage.toFixed(1)}%</span>
                </span>
            {/snippet}
        </PieChart.Tooltip>
    </PieChart.Root>
</div>
~~~~

For the rendered guide, visit [Donut chart](/docs/components/pie-chart/donut).


---

Source: http://sveltekit-prerender/docs/agent-skill.md

# Agent skill

Install with:

```sh
npx skills add mielsense/mielui --skill mielui
```

Use /llms.txt for the index and /llms-full.txt for the complete reference.

# Mielui

Build Svelte interfaces using Mielui's documented APIs, tokens, and composition.

Mielui began from Sivir UI and is maintained independently, with its own components, behavior, themes, documentation, and releases. Use Mielui sources for implementation decisions. Sivir examples and version numbers do not establish Mielui compatibility. Preserve the upstream copyright and license notices when copying or redistributing source. The CLI stores them in `notices/mielui/` inside the configured source directory; the repository's UPSTREAM.md records its origins.

## Step 1: Establish the project state

Inspect the project before changing code:

1. Confirm the installed Mielui release's peer requirements. Mielui 0.1.1 requires Svelte 5.56 or newer within Svelte 5 and Tailwind CSS v4.
2. Read the package manifest, lockfile, global CSS entry, and nearby Svelte components.
3. Detect the integration mode:
   - Package mode: `@mielui/svelte` is a dependency and components import from it.
   - Source-copy mode: `mielui.json` and a local Mielui directory exist.
   - Not installed: neither mode is present.
4. Identify the installed Mielui package version or the component versions recorded in `mielui.json`.
5. Preserve the project's package manager, import style, aliases, theme, and local component conventions.

Do not silently switch an existing project between package and source-copy modes.

## Step 2: Load current Mielui sources

Fetch `http://sveltekit-prerender/llms.txt` at the start of each Mielui task. Treat it as the index for the current catalog, installation guide, theming guide, changelog, and generated component references.

Load documentation progressively:

| Task | Read from the `llms.txt` index |
| --- | --- |
| First Mielui integration | Introduction, Installation, and Theming |
| Choosing components | Components index, then candidate component pages |
| Implementing a component | That component's Markdown page and every Mielui dependency needed for custom composition |
| AI or coding-agent UI | Candidate AI component pages plus [component selection](http://sveltekit-prerender/docs/component-selection.md) |
| Upgrading or resolving an API mismatch | Installed version, the compiled changelog, the LLM changelog page when linked, and component pages |
| Visual design or review | [design language](http://sveltekit-prerender/docs/design-language.md) |

Each generated component page contains its current version, dependencies, install command, prop tables for exported parts, public `index.ts` API, and runnable examples. `/llms-full.txt` combines the full reference; prefer individual pages for focused tasks. Read the exact page before using a component that is new to the project. Never invent a part, prop, event, variant, slot/snippet contract, or import path.

Use this authority order when sources disagree:

1. Local source-copied components define source-copy behavior.
2. The installed package and its declarations define package behavior at the locked version.
3. The live Mielui Markdown defines the latest released API and examples.
4. The rendered documentation is visual context, not a substitute for the typed API.

If the project is behind the live release, adapt to the installed API or ask before upgrading. Do not paste latest-only syntax into an older installation.

If web access is unavailable, inspect local Mielui source or installed declarations. State that the live reference could not be checked rather than guessing.

## Step 3: Model the interface

State the user's job, the dominant content or action, and the important empty, loading, success, and error states. For substantial pages, compare at least two materially different compositions and choose the one that makes the task clearest.

Read [design language](http://sveltekit-prerender/docs/design-language.md) before creating or substantially reshaping an interface. Follow the host application's established visual system when it is more specific than Mielui's defaults.

Choose geometry before components. Mielui is a set of purposeful primitives, not a requirement to wrap every region in a component.

## Step 4: Select and verify components

Read [component selection](http://sveltekit-prerender/docs/component-selection.md) when selecting new primitives or composing an AI interface.

Prefer the highest-level Mielui component that matches the interaction semantics. Use native Svelte and semantic HTML for layout and content where Mielui adds no behavior. Avoid recreating focus management, keyboard navigation, overlays, live regions, loading behavior, or controlled state already supplied by a component.

Before implementation:

1. List the selected component slugs.
2. Fetch each selected component page from the links in `llms.txt`.
3. Confirm exports, required props, bindable state, event signatures, dependencies, and examples.
4. Reject removed components listed in the current components index and follow its migration guidance.
5. Keep compound components in their documented namespace shape, such as `Dialog.Root` and `Dialog.Content`.

Examples are API evidence, not page templates. Adapt their state model and composition to the user's real content.

## Step 5: Install consistently

When Mielui is absent, choose with the user unless the requested mode is already clear:

| Mode | Choose when |
| --- | --- |
| Package | The project wants dependency-managed updates and imports from `@mielui/svelte`. |
| Source copy | The project wants to own and modify component source. |

Use the project's package manager. Translate the documentation's pnpm examples when needed.

For package mode:

```sh
pnpm add @mielui/svelte
```

Import the token sheet once in the application's global CSS:

```css
@import '@mielui/svelte/ui.css';
```

Ignore the `mielui add` command in a component page when using package mode. That command is only for source-copy projects; package components are already available through the installed dependency.

For source-copy mode:

```sh
pnpm dlx @mielui/svelte init -y
pnpm dlx @mielui/svelte add <component-slug>
```

Import the generated token sheet once and use the aliases recorded in `mielui.json`; do not assume the default path if configuration already exists. Let the CLI resolve transitive Mielui dependencies. Add only components required by the design.

Treat `mielui add` as an operation for missing source, not a safe update command. It skips existing files unless `--overwrite` is passed but can still advance recorded versions in `mielui.json`. Before updating copied components, inspect local modifications and the upstream change, then ask before using `--overwrite` because it replaces owned source.

## Step 6: Implement with Mielui

Use Svelte 5 state and binding patterns that match the project's code. Preserve native semantics and use the component's typed callbacks and bindable props as documented.

Use Mielui semantic tokens and Tailwind utilities before custom values. Let typography, alignment, spacing, and content hierarchy do most of the visual work. Add surfaces, borders, radii, color, and motion only when they communicate grouping, interaction, state, or continuity.

For AI interfaces, compose transcript behavior, message roles, response content, reasoning, tools, questions, progress, attachments, and the composer as separate stateful concerns. Do not make every assistant event look like a chat bubble, and do not animate already-live network chunks merely for decoration.

Implement real states, not only the ideal screenshot:

- Empty content gives a useful next action.
- Loading preserves layout and communicates what is pending.
- Errors explain what failed and how to recover.
- Success confirms the user's action without unnecessary ceremony.
- Long content wraps or scrolls in the correct local region.

## Step 7: Verify the result

Run the project's normal lightweight formatting and lint checks. Run broader checks only when requested or required by the host repository.

Inspect the rendered interface at desktop and narrow widths, in every supported theme. Exercise keyboard focus, overlays, escape and outside-click behavior, form submission, disabled and pending states, transcript following, and long content where applicable. Check the browser console for runtime and accessibility errors.

Before finishing, confirm:

- Every Mielui API used matches the installed version.
- The stylesheet or local token sheet is imported exactly once.
- The first viewport makes the task and dominant action or content clear.
- Responsive behavior recomposes rather than merely shrinking.
- No decorative container, label, icon, color, or motion can be removed without losing meaning.
- The implementation uses real product content and covers relevant non-happy states.

Report the Mielui components added, integration mode, verification performed, and any version or documentation limitation.

## Current composition contracts

The catalog separates Components, Blocks, AI components, Chart components, and Actions. Public component imports remain under `@mielui/svelte/components/<slug>` even when source folders use another category. Chart, PieChart, Gauge, and Heatmap are charts. Actions use `@mielui/svelte/actions/<slug>`: morph, number-shuffle, and shimmer.

Use Dialog instead of Modal, Kbd instead of Shortcut, and HugeiconsIcon with Hugeicons glyph data. Group connects real Button, Input, and trigger components; include Group.Separator between controls. Tag Input uses outline badges.

Toast is composable through Root, Content, Footer, Title, Icon, Actions, Action, and Close. The description occupies the upper inset and the compact title/actions row sits below. The toast helpers render these same parts. Overlay surfaces accept `surface="solid" | "glass"` on the documented owning part; do not apply glass independently to nested surfaces.

Heatmap.Root accepts `animation="rows" | "columns" | "live" | "none"`, defaulting to rows. Reduced motion disables entrances. Slider range mode binds a pair of numbers, accepts thumbLabels, and supports dir="rtl". Read each page before using these APIs, particularly when the locked package predates the unreleased changelog.

## Tables, native selects, and loading placeholders

Compose Table.Root with Header, Body, Row, Head, and Cell. Caption, Footer, and ScrollArea are optional. Use variant="inset" for a recessed table. Sorting and selection remain application state; use native aria-sort and existing Button or Checkbox controls.

NativeSelect.Root renders a native select. Bind a string for single selection or a string array with multiple. Its size prop is the native number of visible options. Compose Option and OptGroup inside it.

Apply use:shimmer from @mielui/svelte/actions/shimmer to a loading container, or set variant="shimmer" on Skeleton. Shimmer takes no options and disables itself for reduced motion. Label the loading region; the visual highlight is hidden from assistive technology.

## Selection, uploads, and motion

Select.Root and Combobox.Root use a string value by default. Set `type="multiple"` and bind a `string[]` for multiple selection. Keep the documented Trigger, Content, and Item composition; multiple selection leaves the menu open. Do not add a second selection store around the binding.

FileUpload.Root owns validation and upload state. Use `maxFiles={1}` for single-file picking. Its children snippet exposes the summary for composing the empty dropzone and selected file states. `onUpload` is required; implement the upload there and resolve it only after server confirmation. A local-only demo should explicitly say that it does not upload files. Keep cancellation and retry connected to the documented upload context.

Notch provides nonmodal edge content through Root and Content, with optional Header, Peek, SideAction, and other documented parts. Use `<Toaster variant="notch" />` for notifications instead of adding a second notification host.

Gauge distinguishes `value={null}` from a valid zero measurement. Gauge and Heatmap accept loading states and handle their own placeholder presentation. Use their documented animation options instead of adding timers around examples.

Apply `use:numberShuffle={{ value }}` to a text-only element containing the final number. Keep icons and controls outside it. The action preserves accessible source text and honors reduced motion and disabled theme motion.


---

Source: http://sveltekit-prerender/docs/actions.md

# Actions

- [Morph](/docs/actions/morph.md): animate SVG geometry and text changes.
- [Number shuffle](/docs/actions/number-shuffle.md): roll digits when a value changes.
- [Shimmer](/docs/actions/shimmer.md): animate a loading highlight.


---

Source: http://sveltekit-prerender/docs/actions/morph.md

# Morph

Animate SVG geometry and text changes with the morph Svelte action.

## API

| Option | Type | Default |
| --- | --- | --- |
| key | unknown | Required |
| duration | number | 220 milliseconds |

Import from @mielui/svelte/actions/morph. Attach to a visual wrapper inside a button, keeping the accessible name on the button. Change key when its visual content changes. Use a stable wrapper size.

Closed shapes with matching viewBox values interpolate. Open strokes and incompatible geometry crossfade. Reduced motion skips animation. Interrupted or unmounted animations remove temporary visual copies.

## Example

```svelte
<script lang="ts">
    import { Moon02Icon as Moon, Sun03Icon as Sun } from '@hugeicons/core-free-icons';
    import { morph } from '@mielui/svelte/actions/morph';
    import { Button } from '@mielui/svelte/components/button';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let night = $state(false);

    function toggleAppearance() {
        night = !night;
    }
</script>
<Button variant="outline" onclick={toggleAppearance} aria-label="Switch appearance preview">
    <span class="inline-flex size-5" aria-hidden="true" use:morph={{ key: night }}>
        <HugeiconsIcon icon={night ? Moon : Sun} size={20} />
    </span>
    <span class="inline-block w-12 text-left" use:morph={{ key: night }}>
        {night ? 'Night' : 'Day'}
    </span>
</Button>

```

---

Source: http://sveltekit-prerender/docs/actions/shimmer.md

# Shimmer

Import shimmer from @mielui/svelte/actions/shimmer. Apply use:shimmer to a container. No options are required.

The decorative highlight respects rounded corners and reduced motion. Unmounting cancels the animation and restores positioning. Add an accessible loading label to the region.

Skeleton supports variant="default" | "shimmer". The default is still.

```svelte

<script lang="ts">
    import { shimmer } from '@mielui/svelte/actions/shimmer';
</script>

<div class="w-64 space-y-3" aria-label="Loading profile" role="status">
    <div use:shimmer class="h-12 w-12 rounded-full bg-secondary"></div>
    <div use:shimmer class="h-4 rounded-md bg-secondary"></div>
    <div use:shimmer class="h-4 w-2/3 rounded-md bg-secondary"></div>
    <span class="sr-only">Loading profile…</span>
</div>


```

## Text

On a plain-text element, the highlight moves through the letters. Use a status region for loading feedback.

```svelte

<script lang="ts">
    import { shimmer } from '@mielui/svelte/actions/shimmer';
</script>

<p role="status" class="text-base text-foreground-muted">
    <span use:shimmer class="inline-block">Thinking…</span>
</p>


```

---

Source: http://sveltekit-prerender/docs/actions/number-shuffle.md

# Number shuffle

Roll digits as a numeric value changes.

## Usage

Import numberShuffle from @mielui/svelte/actions/number-shuffle. Attach it to a text-only element and pass value. Render the final formatted value as normal text for server rendering and accessibility. Keep icons and markup outside the animated element.

```svelte

<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';

    let value = $state(72);
    const values = [72, 98, 104, 36];
    function updateValue() {
        value = values[(values.indexOf(value) + 1) % values.length];
    }
</script>

<div class="flex flex-col items-center gap-6">
    <span
        use:numberShuffle={{ value }}
        class="inline-block min-w-[3ch] text-center text-4xl tabular-nums"
    >
        {value}
    </span>
    <Button variant="secondary" onclick={updateValue}>Update value</Button>
</div>


```

## Formatted values

```svelte

<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';

    let value = $state(1240.5);
    const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
    function format(amount: number) {
        return currency.format(amount);
    }
</script>

<div class="flex flex-col items-center gap-6">
    <span
        use:numberShuffle={{ value, format }}
        class="inline-block min-w-[10ch] text-center text-3xl tabular-nums"
    >
        {format(value)}
    </span>
    <div class="flex gap-2">
        <Button variant="secondary" onclick={() => { value += 125.25; }}>Add $125.25</Button>
        <Button variant="outline" onclick={() => { value = 0; }}>Reset</Button>
    </div>
</div>


```

## API reference

| Option | Type | Default |

| --- | --- | --- |

| value | number | Required |

| format | (value: number) => string | String |

| duration | number | Twice the theme panel duration, fallback 480ms |

The action rolls from zero on mount and continues from the current value on interrupted updates. Reduced motion, disabled theme motion, and duration zero show the final value immediately. Visual digits are hidden from assistive technology. Removing the element cleans up animation and restores its styles.

---

Source: http://sveltekit-prerender/docs/introduction.md

# Introduction

mielui is a Svelte 5 and Tailwind CSS v4 component library. Install it as a package or use the CLI to copy component source into your project.

## Requirements

- Svelte 5
- Tailwind CSS v4

## Quick start

~~~~sh
pnpm add @mielui/svelte
# then in your CSS:
# @import '@mielui/svelte/ui.css';
~~~~

~~~~sh
pnpm dlx @mielui/svelte init -y
pnpm dlx @mielui/svelte add button
~~~~


---

Source: http://sveltekit-prerender/docs/installation.md

# Installation

Install Mielui as a package when you want dependency-managed components, or initialize it with the CLI when you want to own the copied source.

## Package

~~~~sh
pnpm add @mielui/svelte
~~~~

Add the token sheet to your CSS:

~~~~css
@import '@mielui/svelte/ui.css';
~~~~

## CLI

~~~~sh
pnpm dlx @mielui/svelte init
pnpm dlx @mielui/svelte add button
~~~~


---

Source: http://sveltekit-prerender/docs/theming.md

# Theming

Mielui components use CSS custom properties from `@mielui/svelte/ui.css`. Import that stylesheet, then override the tokens in your application CSS to adapt colors, radii, typography, and spacing to your product.

See the rendered guide at [/docs/theming](/docs/theming) for token examples and theme presets.


---

Source: http://sveltekit-prerender/docs/changelog.md

# Changelog

## 0.2.0 · Unreleased

### Docs

- Document milestone-based releases spanning multiple feature and fix pull requests.

- Redesign the landing page with a colorful hero, live component previews, and responsive navigation.
- Simplify the landing page copy and showcase, with consistent outer gutters and a distinct theme-driven palette.
- Give Docs and Studio a continuous outer shell with recessed content and integrated navigation, header, and footer controls.
- Match the landing hero and showcase accents to the active primary color.
- Move docs page controls inside the inset frame and soften the outer shell color.
- Open docs navigation and page outline in toggleable floating panels, giving content the full page width.
- Add nonmodal glass navigation and Studio inspectors with hover reveal and docking, restore the right page outline, and tighten the black outer canvas.
- Align the page-outline header with preview tabs, soften docked borders, and strengthen light-mode section headers.
- Simplify docs section labels and refresh Studio overlay previews with compact workspace content.
- Restore framed lead demos, strengthen section labels, and align footer actions in a flush row.

- Simplify Studio section labels and inspector disclosures without separator lines.

- Make the selected sidebar page easier to identify with a tinted background and stronger label.

- Remove the footer divider to match the borderless page header.

- Align the Studio sidebar toggle with its header controls in both floating and pinned layouts.

- Soften scrolling content at the header and footer with short background fades.

- Improve light-mode preview tab contrast and section info hover visibility.
- Keep search results inset from the palette sides and tint keyboard hints with the primary color.

- Expand the introduction with a setup comparison, complete package quick start, and guidance for theming and component exploration.

- Add a brief pixel reveal between pages, with reduced-motion support and interruptible navigation.

- Restore the GitHub star action in Studio with the same ordering as the docs header.

- Tighten search result insets and give keyboard hints a solid primary surface with shared control depth.

- Match selected preview tabs to the package-manager picker surface.

- Remember pinned docs and Studio sidebars independently across visits.
- Unify Docs and Studio header controls and harden sidebar pinning and page-transition cleanup.
- Correct homepage showcase composition to use supported chart surface settings and labeled tab controls.

- Refresh the README screenshot to show the redesigned homepage.

### Feature

- Choose single or double borders across framed surfaces, including cards, dialogs, menus, Notch, and Toast in themes and Studio.
- Organize Studio appearance and interaction settings, with toggle buttons for value choices and a compact Advanced colors action in the Color header.
- Add an opt-in depth toolbar variant with raised keys and recessed selections; the default remains flat.

- Use number shuffle for changing numeric readouts in tables, charts, uploads, commands, Studio, and interactive examples.

- Customize five pastel chart colors in Studio; chart demos and default series share the same palette.
- Choose the top or bottom position of inset strips, with local overrides for fixed headers.
- Add an optional inset DataTable layout with compact filters and shared pagination inside the frame.
- Preview glass against a colored Studio backdrop, with dropdown, popover, and hover-card examples.
- Use rounder default corners and more spacious composer input panels.

- Add the Daydream preset with flat sage-gray cards, soft pink controls, and pastel chart colors in light and dark modes.

### Fix

- Keep theme choice controls accessibly labelled without unsupported component props.
- Extend menu separators across the full inner panel width, including submenus.
- Keep tooltip text readable when glass surfaces are enabled.

- Refine the optional toolbar depth with shallow key faces and show zoom controls in both toolbar demos, with tooltips matching the input surface.

- Make Cartesian, pie, and heatmap tooltips follow single borders and glass surfaces.
- Keep donut tooltips aligned with the pointer without a trailing position animation.
- Soften live chart highlights, add quiet intervals, and suppress them while inspecting values.

- Preserve continuous single-border outlines on tables and preview/code cards.
- Keep glass inset panels visually distinct while allowing backdrop colors through.
- Align the Native Select chevron with other selection controls without a duplicate native arrow.
- Keep installation command tabs above the command regardless of inset-strip preference.
- Retain structural inset gutters on data tables, composers, and code/preview panels in single-border mode.
- Soften the dark glass composer input tint so backdrop color stays visible without a heavy grey fill.
- Preserve custom accessible labels on numbered data-table pagination.
- Avoid duration-formatting errors for tool status values with excessive decimal precision.

- Keep file diff signs attached to their animated counts and remove redundant inset surface styles.

- Preserve preset colors, typography, and token overrides when selecting or exporting a theme in Studio.

- Keep the Studio preset picker and reset button aligned across theme densities.

## 0.1.1

### Breaking

- Remove Fullscreen Nav. Use Sheet with navigation links for mobile menus.
- Rename Modal to Dialog, including its types, package subpath, and CLI command.

- Replace standalone Toast usage with Toast.Root and its composable parts. Toast progress bars have been removed.

- Renamed Shortcut to Kbd, including its import path and prop type.

- Require Svelte 5.33 or newer for attachment support.

- Card titles default to level-two headings and accept an explicit heading level.
- Alert announcements are opt-in, with separate polite and assertive modes.
- Breadcrumb current-page state is explicit instead of inferred from the router.
- Reorder List dragging starts from its handle; row content remains interactive and accessible.
- Enforce mode-specific Input, Question, Accordion, and Toggle Group values and branch-specific Button and Badge attributes.
- Require Svelte 5.56 or newer for modern reactive template declaration syntax.

### Docs

- Use pnpm and Node.js for repository setup, development, and release tooling.

- Added a component audit covering behavior, accessibility, composition, and motion.

- Moved Show More into Blocks.

- Toolbar now appears under Blocks. Its import path stays the same.

- Add manual installation instructions with dependency commands, file tabs, copying, and expandable source.
- Add a right-aligned On this page sidebar with smooth section navigation and reduced-motion support.
- Move Gauge into Chart components.
- Use Hugeicons throughout components and examples, with an SSR-safe HugeiconsIcon renderer.
- Use dashed guides in the left documentation navigation.
- Add replay controls to inset chart previews.

- Align the documentation breadcrumb with the article heading.

- Add Copy page actions with Markdown and AI links.
- Replace anatomy summaries with prop tables for every exported component part, including native attributes and events.
- Add the Agent skill guide and a complete llms-full.txt reference.
- Update example identities and project links to mielsense.

- Improve code-example formatting and separate API reference links in the page outline.

- Document every Table and Native Select part and use Table for API references.
- Shorten repetitive documentation copy and update component counts.
- Soften the scrolling edge beneath the documentation toolbar.

- Animate native-attribute disclosures with Collapsible.
- Align Star and theme controls with the page outline and use a home icon in breadcrumbs.
- Document component reuse and accessible interaction motion in the design guidelines.

- Group Reorder List, Command, Color Picker, and Toast under Blocks while preserving their imports and documentation links.

- Include motion actions in the component catalog and keep its counts and search in sync with navigation.

- Show headless component props in the main API tables and document props from every discriminated mode.

- Join the publish-date input and calendar trigger with Group in the Date Picker example.

- Keep the Number Field seat-count example compact instead of stretching the control to its container.

- Show Data Table search and filtering as one joined control.

- Replace the Toolbar demo with selectable design tools and keyboard hints.
- Rebuild Studio previews with aligned control states, Charts and AI sections, and an invoice table.
- Separate basic remote form validation from multiple actions and reset.
- Allow unrestricted cross-month selection in the two-month Range Calendar example and show its selected dates.
- Join Date Range Picker inputs and calendar trigger with Group.

- Add a promise-toast demo and use promise notifications in Form examples.

- Organize Studio theme controls into collapsible sections with a tooltip-labelled advanced settings button.

- Give both levels of the nested Drawer example handles and normal dismissal.

- Add Bun install commands with syntax highlighting.
- Add composed examples for File Upload, Reorder List, Toolbar, Separator, and Response Stream.
- Add tooltips to Studio and documentation icon actions.

- Simplify the top navigation to Docs and Studio.

- Replace machine-specific paths in the design-system implementation plans.

- Derive homepage component counts from the catalog and check each catalog entry's category, examples, and API reference.
- Document controlled overlays, upload cancellation and retry, and theme storage limitations.
- Add a live File Diff example and refresh generated component prop tables.
- Use shared border, radius, and elevation tokens in legacy API tables.

- Document shared edge, inset, focus, and motion rules for component contributions.
- Keep Notch and notch notification examples inside their preview frames.
- Make chart state and period-switching examples easier to adapt with named event handlers.

- Chart guides have dedicated type pages, searchable navigation, and matching Markdown references. Tablet documentation navigation remains accessible.
- Split chart examples into focused bar, line, area, mixed, pie, and donut guides with continuous motion, data updates, missing measurements, and loading states.
- Add interactive Gauge capacity and Heatmap reporting-range examples.

- Use flat leading previews and source sections, inset example cards, compact API table headers, and persistent footer page actions.

- Block examples now include contained toast previews, continuous Markdown streaming, recoverable task steps, and visible command and code-action results.

- Component examples now include working local actions, accessible icon controls, upload completion and recovery, and shorter variant comparisons.
- Make AI examples finish, stop, and retry their simulated work; preserve partial responses and clean up pending delivery when previews close.
- Document AI state ownership and add composed tool retries, response cancellation, and interactive Morph and Shimmer examples.

- Rebuild Docs and Studio around fixed headers and footers, thin section dividers, and quieter navigation. Widen the documentation section rail.

- Clarify inherited glass surfaces and keep example action results spaced below their controls.

- Center the homepage cat within a bordered layout with subtle dithering and muted scrolling component names.

- Keep preview toolbars aligned across nested examples and prevent their controls from overlapping pinned section headings.

- Clarify core component setup and form behavior, and make the Group and indeterminate Progress examples interactive.

- Balance section content spacing, keep sticky headings opaque, and center grid intersections across the documentation rails.

- Keep navigation headings and the leading preview toolbar sticky, use text-only hover and selection states, and show API guidance from an info control.

- Align footer actions with the header columns and disable elastic overscroll across the site.

- Match error pages to the documentation grid and provide a retry action when a page fails to load.

- Add visual component catalog cards with descriptions and search across component names and descriptions.

- Present each changelog version as a sticky section and keep catalog descriptions in footer info cards.

- Simplify Studio into aligned control and content previews, unify its tabs, and match footer and header heights.

- Move Studio preview tabs into the header and preview width controls into the footer.

- Keep headers, footers, section headings, and navigation headings at one shared height, with aligned intersection marks.

- Align Studio chart, conversation, and application previews with the shared section layout and keep the composer clear of messages.

- Strengthen section headings and move Button behavior notes into its Usage section.

- Keep component behavior notes inside their relevant sections instead of below standalone previews.

- Remove the trailing divider below Studio’s Typography controls.

- Widen Studio’s conversation preview and place its simulation note below the composer.

- Let the Studio conversation span the preview and scroll behind a narrower floating composer.
- Add matching grid junction markers at the Studio header and footer.

- Clarify block and AI component usage, state ownership, and Markdown link and image handling.

- Review every component’s usage, examples, and API coverage; add chart loading, empty-data, and animation examples to each chart-type guide.
- Keep documentation scrolling available over Toast previews and show section descriptions in information hover cards.

- Remove excess space below the final documentation sidebar item.

- Use warm pastel red and yellow series colors in chart examples.


- Add loading, empty, and live-motion controls to Gauge and Heatmap examples.

- Show a larger invoice dataset in Studio using the shared Data Table, with sorting, selection, and pagination.
- Arrange Studio component cards in compact responsive stacks, with a smaller calendar and label and sharing examples.

- Remove the repository’s OpenCode setup and skill lockfile.

- Show the Markdown preview directly on the canvas without a card or nested scroll area.

- Group components by type in the sidebar, with a preview catalog for each group.
- Make documentation search more compact, with quick destinations and a scrollable results list.

- Add space between catalog cards and use consistent parent-label styling and spacing for all nested sidebar groups, including charts, while keeping standalone links compact.

- Keep the expanded Notch export example clear of its trigger and show its file count in a compact badge.

- Nest catalog categories under Components in the page outline.

- Increase the space between component catalog sections.

- Clarify the homepage description of component theming.

- Match the Code tab background and rounded corners to its example preview.
- Add a single-file upload example that replaces the dropzone with the selected file.

- Gently snap sidebar groups and page sections to the top while preserving free scrolling within long sections and reduced-motion preferences.

- Snap sidebar group headings to the top without snapping to the bottom edges of long groups.

- Give consecutive documentation examples more separation while keeping their headings and previews together.

- Prevent sidebar settling from targeting offscreen groups; only visible headings approaching the top can catch.

- Align page-outline link gutters and nested indentation with the navigation sidebar.

- Use the same bounded top-only magnetic settling in the content column and sidebar.
- Give the page-outline hook a full outer gutter and more space before its labels.

- Align the footer info icon with the navigation button inset and distinguish outline hover previews with a dashed gray hook.

- Move the page-outline hook directly to a clicked section without pausing on headings passed during smooth scrolling.

- Keep catalog search pinned in a header-height row, with section headings and outline jumps positioned below it.

- Slow the page-outline hook’s glide while retaining direct section targeting and reduced-motion behavior.

- Remove the doubled divider between catalog search and the first section.

- Match article, toolbar, and footer side gutters to the page-outline header.

- Align the leading Preview / Code tabs with the shared content gutter.

- Give documentation content a moderate side gutter while keeping tabs, headings, toolbar, and footer aligned.

- Scale magnetic catch distances to neighboring section heights and settle only once per downward scroll gesture, preventing short sections from oscillating.

- Match the Copy page control height to the adjacent-page arrows in the docs footer.
- Keep Form and keyboard-shortcut demo feedback inside their previews and dispose unfinished toast demos on navigation.
- Separate page-outline state and Studio token parsing from presentation while reducing unnecessary outline work during preview updates.
- Update the agent skill and package guides for Mielui's current APIs, independent release history, and retained Sivir UI and COSS attribution.
- Refresh the README screenshot with the current homepage.
- Clarify current documentation sources and distinguish the historical Sivir UI changelog from Mielui releases.

- Document npm publishing authorization and the GitHub release steps for maintainers.

- Add agent release guidance and clarify first-publication setup before enabling trusted publishing.

### Feature

- Group components into Components, Blocks, AI components, and Chart components. Existing imports and docs URLs stay available.

- Toast notifications use an inset content area with a title and action buttons in the footer.

- Slider adds pill-shaped handles, a two-handle range mode, and right-to-left support.

- Group connects related controls with separators and optional text, in horizontal or vertical layouts.

- Add Heatmap with composable calendar, labels, summary, detail, legend, and keyboard navigation.
- Add Morph for SVG geometry transitions and text changes, including the theme switch.
- Add optional glass surfaces to overlays, menus, tooltips, selection popups, and toasts.
- Add a centered component preview and wide or narrow canvases to Theme Studio.
- Animate Heatmap cells and Gauge arcs on entry, with reduced-motion support.

- Add Table with default and inset variants, plus Native Select with grouped and multiple options.
- Add the Shimmer action and a shimmer variant for Skeleton.
- Add site-wide documentation search with Command-K and Control-K.

- Add a glass Composer surface and a Thinking text example for Shimmer.

- Add composable Task Steps rows and summaries, Reorder List handles and content, and Message metadata parts.
- Add separate Tool trigger/content parts, Color Picker surfaces, and Show More preview/trigger slots.
- Add Command search/result slots, optional Alert icons, and an optional Sheet header close control.
- Add controlled Context Menu state and manual tab activation.
- Add scoped Tooltip providers and noninteractive rich descriptions.

- Add composable Field, Fieldset, and Form components with accessible errors and SvelteKit remote-form examples.
- Add Calendar, Range Calendar, Date Picker, and Date Range Picker with keyboard navigation and date constraints.
- Add Number Field and OTP Field with native form submission and reset support.
- Add Separator and a public composable Toolbar with keyboard navigation.
- Add a swipe-dismissable Drawer with modal focus management.

- Add a composable Data Table powered by TanStack Table v9, with explicit sort menus, editable filter chips, selection, and pagination.

- Data Table filters accept a search control as children and align filter and sort buttons with inputs.
- Form error summaries accept validation paths directly and focus after unsuccessful submissions.

- Add File Upload with validation, progress, cancellation, retries, and animated completion.
- Initialize Mielui from a Studio JSON preset with `init --preset`, or apply it with `add theme`.
- Set glass surfaces globally from Studio or the `--mielui-surface` CSS variable.

- Studio’s AI workspace demonstrates streamed Markdown, reasoning, tool activity, file attachments, and an overlaid composer with stop and replay controls.

- Studio’s component preview centers interactive mini cards for controls, checklists, team members, and disclosures.

- Checkbox supports small, medium, and large sizes, with a larger 18px default.

- Add composable bar, line, area, mixed, pie, and donut charts powered by LayerChart, with tooltips, legends, and animated data updates.
- Charts offer entry reveals and ongoing live highlights that respect reduced motion and pause offscreen.
- Add a composable Empty State for first-use screens, empty search results, and completed work.
- Add Notch for custom activities at any screen edge, with solid and glass surfaces and animated expansion.
- Toast notifications can use a shared Notch surface through the Toaster variant.

- Notch offers a persistent peek rail, timed notifications, and swipe dismissal, with timers paused during interaction.

- Heatmap includes a shared tooltip for hovered and keyboard-focused days, with an optional Tooltip part for custom layouts.

- Adjust edge highlight strength in Studio or theme presets. Controls, keycaps, and raised surfaces now use half strength by default.

- Notch supports detached side actions that unfold on hover or focus. Notch notifications show one item at a time with previous and next controls.

- Place counters or custom content outside a Notch with Accessory; notification counts now use this separate part.

- Add built-in live motion to Gauge and Heatmap through their animation props.

- Add built-in loading and empty-data states to Gauge and Heatmap.

- Select and Combobox support multiple selection with array values and menus that stay open while choosing options.

- Add the Number shuffle action and animate Gauge values with rolling digits.

### Fix

- Replace the logo and favicons with the approved compact cat silhouette.

- Tag Input values have visible badge borders and backgrounds.
- Toast timers pause during keyboard interaction, and close buttons remain visible.

- Toast descriptions have more room above a compact title and action row.

- Tag Input badges use stronger borders and a contrasting fill.

- Homepage navigation uses equal button heights and spacing, with the redundant Components button removed.

- Tag Input uses the standard transparent outline Badge styling.

- Restore Changelog and Studio pages after TypeScript preprocessing and component path errors.
- Preserve Group outer borders with single-pixel separators and composed Input, menu, and popup examples.
- Match Alert to the inset Toast layout, with the description above the status row.
- Render Tag Input tags as transparent outline badges.

- Keep the darker inset panel inside frosted glass overlays.
- Match Alert text size, vertical centering, and status-row spacing to Toast.
- Use a minus indicator for checked checkboxes.
- Keep morph visuals in place while updating SVG geometry without a delayed icon swap.

- Keep the theme icon color synchronized with the active theme during morph transitions.

- Align Switch labels with the pill-shaped control.
- Keep Accordion borders between items only.

- Restore original SVG visibility when Morph is removed or its child icon changes.
- Respect the theme’s disabled-motion setting in chart entrances and motion actions.
- Preserve checkbox state while disabled and forward accessible names to the native input.

- Size Composer submission controls to their visible content and respect custom action labels.

- Preserve fractional Gauge ranges and normalize invalid numeric values.

- Fix preview deployment type checks for icon imports, native controls, table captions, and documentation examples.

- Use Bits UI for dialogs, sheets, popovers, menus, selection controls, tabs, disclosures, switches, and toggles while retaining Mielui styling and motion.
- Add menu keyboard navigation, typeahead, nested dismissal, and touch long-press behavior.
- Preserve canceled events, optional overlay labels, and conditional dialog actions.
- Keep option labels and disabled selections synchronized as collections change.
- Prevent obsolete streams, clipboard requests, and canceled reorder gestures from overwriting newer state.
- Reconcile toast persistence, durations, paused timers, and visible notification limits.
- Connect field and tooltip descriptions to their controls, and ignore inactive or composing shortcuts.
- Update scroll cues after content changes and support fractional progress ranges.
- Preserve preview state when switching to source code and reduce redundant status animation.
- Reset Avatar loading state on source changes and preserve native image callbacks.
- Keep skeleton placeholders inert, normalize pagination bounds, and prevent silent inset Card footer replacement.
- Add keyboard navigation to Toolbar and improve Color Picker labels, pointer ownership, and reduced motion.

- Preserve Slider handle identity while adopting Bits UI keyboard behavior and adding named form values and reset support.
- Use Bits UI for Combobox navigation and selection while preserving fuzzy search and Mielui styling.
- Show submission errors without losing Composer drafts or Question answers, and ignore obsolete completions.
- Keep disabled Button links from navigating and preserve native Input checkbox, radio, and file semantics.
- Repair active tabs after removal or disabling, and keep Command results synchronized during collection changes.
- Keep IME confirmation and canceled click handlers from activating commands or opening selection popups.
- Give toasts one visual exit and stop long response streams from animating every character.
- Preserve Group variant styling with a single joined divider.
- Forward overlay action refs and keep cancel actions from stealing focus after opening.
- Defer offscreen documentation previews while preserving mounted preview state.

- Remove the resting shadow from outline buttons while retaining their border and keyboard focus indicator.

- Show invalid input borders and reveal field errors with interruptible, reduced-motion-aware transitions.

- Restore pointer hover and selection in menus and floating panels by keeping their content above dismissal layers.
- Keep top and bottom drawers full width in the examples and give nested drawers separate backdrops and focus boundaries, with cancelled swipes returning to rest.
- Prevent date segments from overlapping on narrow screens and keep calendar popups above surrounding navigation.

- Keep advanced Studio spacing and motion overrides until their corresponding preset changes.
- Match date-picker trigger heights to their inputs and keep hover feedback distinct.
- Position Toast dismiss buttons at the top-right without covering the message.

- Use round send and stop icons in Composer without changing its toolbar variants.

- Show rejected attachments in compact error cards without decoding oversized image previews.
- Animate promise toast resizing in 50 ms and place title-only messages inside a fitted inset panel.
- Preserve Studio color, typography, spacing, and motion choices in CLI-compatible theme exports.

- Keep tab highlights aligned while their dialog or other parent animates in.

- Studio places advanced colors below the color controls and groups shape and motion presets with labeled advanced-settings buttons.

- Studio previews share one surface, with dedicated Charts and AI tabs and flush joins on advanced-setting controls.

- Studio uses full-width previews, a denser component gallery, and joined preset and copy controls.

- Studio shows a year of heatmap activity and pairs a full-width conversation with the narrower Composer layout used in its documentation.

- Fix TypeScript errors in composed controls, upload and toast motion, and documentation examples while preserving native event handlers and refs.

- Update the docs and installer workspace to Svelte 5.57.1 and SvelteKit 2.70.3, with svelte-check 4.7.6.

- Honor a consumer project's declared package manager and recognize Bun lockfiles in the CLI.
- Keep theme editing usable when browser storage is blocked or full, and report failed theme saves.
- Keep upload image previews stable as progress changes.
- Keep Dialog, Sheet, Popover, and File Diff state synchronized with their bound values and current props.
- Restore nested dialog stacking, single-layer dismissal, focus return, and shared background scroll locks.
- Cache the GitHub star count and retain the last valid count during temporary API failures.
- Preserve invoice-preview state when switching Studio tabs.

- Buttons, fields, selects, and floating surfaces share subtle light-catching edges that follow the theme’s shadow settings.

- Gauge defaults to a larger 120px display with proportional arcs and labels, and smoothly animates value changes.

- Pie chart tooltips use opaque inset surfaces.

- Menus, overlays, tooltips, conversation scrolling, and response text respect reduced motion and the theme’s disabled-motion setting.

- Accordion triggers retain their content relationships, and focus traversal includes editable text regions.

- Joined inputs, selects, and buttons share one control height across sizes. Table badges fit their labels instead of filling the cell.

- Segmented tabs keep even rail padding at fractional spacing and inside scaled containers.

- Keep inset Cards stable when their footer is removed during a state change.

- Studio groups edge highlight strength under its switch and restores the previous strength when re-enabled.

- Data Table uses the shared inset Table surface with a compact header.

- Alert dialogs announce their title and description. Select triggers and option lists now expose linked combobox semantics and accessible names.

- Combobox results collapse smoothly when filtered and stop locking page scroll as soon as the menu closes.

- Give Notch content more padding and keep its detached actions close to the panel.

- Dialogs restore focus when removed while open without interrupting a newly opened dialog.

- Escape closes only the deepest open dropdown or context submenu, keeping its parent menu available.

- Notch side actions unfold with synchronized shape and button motion, including interrupted hover changes.
- Morph and Shimmer stop active effects when inherited theme motion is disabled and clean up their theme observers on removal.
- Stopping a controlled Composer response no longer submits the preserved prompt again when the control returns to Send.

- Let Show More content fade into its surrounding surface without a mismatched background strip.

- Rework live chart motion with stationary pie highlights, area-fill sweeps, and staggered bar highlights; keep offscreen effects paused without trapping visible sweeps.

- Keep Reasoning duration labels spaced, respect reduced motion in copy feedback, and keep notch notification text wrapped during morphs.

- Guard font preference storage and isolate font state between server renders.

- Keep Accordion accessibility relationships valid when content is omitted and honor disabled Tag Input controls.
- Keep disabled Popover triggers closed and dismiss empty tooltips.
- Preserve invoice draft validation and reset stale filters when creating or locating an invoice in Studio.

- Scale Heatmap entrance timing with the theme motion setting.

- Keep page-outline jumps aligned after lazy previews load and track section headings by their document position.
- Remove content and icon morphing from Toast notifications, including stacked Notch notifications.

- Prevent hidden chart data tables from creating extra scroll space inside previews.

- Give chart loading and empty messages the shared inset card appearance.

- Match Heatmap tooltips to the shared chart surface and inset the Gauge arc inside a thicker track.

- Give Gauge arc ends a subtle corner radius.

- Keep Gauge loading and empty states compact without a nested card.

- Preserve the Heatmap calendar layout while loading or showing no activity.

- Match the Gauge background track to its colored arc thickness.

- Restore the Color Picker hue slider’s rainbow track.

- Match catalog preview button text colors to the active theme.

- Place Switch edge highlights on the thumb, keep passive surfaces flat, and preserve control edges when fields and buttons receive focus.
- Restrict the native file picker to one file when maxFiles is one.

- Keep File Upload removal animations inside the file list instead of jumping toward the viewport corner.

- Preserve the Gauge loading ring while using theme colors for its mask.
- Keep slider dragging focused without rescheduling focus on every pointer movement, and clear stale tab hover indicators when tabs disappear or become disabled.
- Honor motion settings and visibility for spinner, progress, and shimmer animations; update traveling highlights when theme motion settings change.
- Restore Notch swipe position and release pointer capture when gestures reverse or are cancelled.
- Handle large chart datasets without argument-limit failures and avoid rebuilding number formatters for every tick or slice.
- Parse small percentage color alpha and repeated CSS variable references correctly in Studio.
- Keep Studio header sizing within supported limits and reject font values that can break generated CSS declarations.
- Show indeterminate attachment progress for nonfinite values and refresh Morph text colors after theme changes.
- Evaluate nested Studio length calculations with correct arithmetic precedence and root-relative units.
- Include upstream license and attribution notices with CLI source installations without replacing the application's own license.
- Remove unused bundled documentation fonts that lacked accompanying license notices.
- Keep theme registry schema normalization compatible with its Elysia runtime.

- Avoid false tab-alignment test failures caused by browser subpixel rounding.
- Prevent dependency discovery from reloading browser tests during fresh CI runs.

## 0.1.0

### Docs

- Initialize Mielui from Sivir UI with renamed packages and docs, preserved MIT attribution, and sleeping-cat branding.
- Start Mielui releases at 0.1.0, independently of upstream Sivir UI versions.
- Simplify the sleeping-cat favicon and matching logo to a single outline.
- Use a mauve default accent with dark button labels and a lighter hover state.
- Restore the README’s overview, preview, documentation link, and agent-skill instructions.


---

Source: http://sveltekit-prerender/docs/components.md

# mielui components

Each component reference is generated at build time from its package manifest, public API source, and Svelte examples. Published Markdown reflects changes to those canonical sources.

## Components

- [Accordion](/docs/components/accordion.md)
- [Alert](/docs/components/alert.md)
- [Alert Dialog](/docs/components/alert-dialog.md)
- [Avatar](/docs/components/avatar.md)
- [Badge](/docs/components/badge.md)
- [Breadcrumb](/docs/components/breadcrumb.md)
- [Button](/docs/components/button.md)
- [Calendar](/docs/components/calendar.md)
- [Card](/docs/components/card.md)
- [Checkbox](/docs/components/checkbox.md)
- [Collapsible](/docs/components/collapsible.md)
- [Combobox](/docs/components/combobox.md)
- [Context Menu](/docs/components/context-menu.md)
- [Date Picker](/docs/components/date-picker.md)
- [Date Range Picker](/docs/components/date-range-picker.md)
- [Dialog](/docs/components/dialog.md)
- [Drawer](/docs/components/drawer.md)
- [Dropdown Menu](/docs/components/dropdown-menu.md)
- [Empty State](/docs/components/empty-state.md)
- [Field](/docs/components/field.md)
- [Fieldset](/docs/components/fieldset.md)
- [File Upload](/docs/components/file-upload.md)
- [Form](/docs/components/form.md)
- [Group](/docs/components/group.md)
- [Hover Card](/docs/components/hover-card.md)
- [Input](/docs/components/input.md)
- [Kbd](/docs/components/kbd.md)
- [Label](/docs/components/label.md)
- [Native Select](/docs/components/native-select.md)
- [Number Field](/docs/components/number-field.md)
- [OTP Field](/docs/components/otp-field.md)
- [Pagination](/docs/components/pagination.md)
- [Popover](/docs/components/popover.md)
- [Progress](/docs/components/progress.md)
- [Radio Group](/docs/components/radio-group.md)
- [Range Calendar](/docs/components/range-calendar.md)
- [Scroll Area](/docs/components/scroll-area.md)
- [Select](/docs/components/select.md)
- [Separator](/docs/components/separator.md)
- [Sheet](/docs/components/sheet.md)
- [Skeleton](/docs/components/skeleton.md)
- [Slider](/docs/components/slider.md)
- [Spinner](/docs/components/spinner.md)
- [Switch](/docs/components/switch.md)
- [Table](/docs/components/table.md)
- [Tabs](/docs/components/tabs.md)
- [Tag Input](/docs/components/tag-input.md)
- [Textarea](/docs/components/textarea.md)
- [Toggle](/docs/components/toggle.md)
- [Toggle Group](/docs/components/toggle-group.md)
- [Tooltip](/docs/components/tooltip.md)
- [Typography](/docs/components/typography.md)

## Blocks

- [Code Block](/docs/components/code-block.md)
- [Color Picker](/docs/components/color-picker.md)
- [Command](/docs/components/command.md)
- [Copy Button](/docs/components/copy-button.md)
- [Data Table](/docs/components/data-table.md)
- [File Diff](/docs/components/file-diff.md)
- [Markdown](/docs/components/markdown.md)
- [Notch](/docs/components/notch.md)
- [Reorder List](/docs/components/reorder-list.md)
- [Show More](/docs/components/show-more.md)
- [Task Steps](/docs/components/task-steps.md)
- [Toast](/docs/components/toast.md)
- [Toolbar](/docs/components/toolbar.md)

## AI components

- [Attachment](/docs/components/attachment.md)
- [Composer](/docs/components/composer.md)
- [Conversation](/docs/components/conversation.md)
- [Message](/docs/components/message.md)
- [Question](/docs/components/question.md)
- [Reasoning](/docs/components/reasoning.md)
- [Response Stream](/docs/components/response-stream.md)
- [Tool](/docs/components/tool.md)

## Chart components

- [Chart](/docs/components/chart.md)
- [Gauge](/docs/components/gauge.md)
- [Heatmap](/docs/components/heatmap.md)
- [Pie Chart](/docs/components/pie-chart.md)


## Package assets

- [Brand Mark](/docs/brand-mark.md) - package-only logo component; not available through `mielui add`.

## Removed components

These names are no longer standalone package exports or CLI installation targets.

- **Modal:** Rename Modal to Dialog and use the dialog package subpath or CLI target.
- **Fullscreen Nav:** Compose Sheet with navigation links for a mobile menu.
- **Approval Request:** Compose `AlertDialog` directly with the review details and confirmation actions required by your workflow.
- **Marquee:** Use a restrained Tailwind animation around the content only when continuous motion is essential.
- **Panel:** Use `Card.Root variant="panel"` for the former framed panel treatment.


---

Source: http://sveltekit-prerender/docs/components/native-controls.md

# Native controls

Buttons, text fields, and selects built around native form elements.

## Components

- [Button](/docs/components/button.md): Displays an action or link with stable loading, success, and error states.
- [Input](/docs/components/input.md): Text input with labels, helper text, leading and trailing adornments, visual variants, and native validation.
- [Native Select](/docs/components/native-select.md): A select field that uses your browser and operating system's option picker.
- [Textarea](/docs/components/textarea.md): Multi-line text input with labels, descriptions, and automatic resizing.

---

Source: http://sveltekit-prerender/docs/components/inputs.md

# Inputs

Selection, numeric, file, and structured inputs.

## Components

- [Checkbox](/docs/components/checkbox.md): A binary option presented as a labeled box.
- [Combobox](/docs/components/combobox.md): Searchable select dropdown with fuzzy matching.
- [File Upload](/docs/components/file-upload.md): File uploads with progress, cancellation, retry, and animated completion.
- [Number Field](/docs/components/number-field.md): Numeric input with native validation and composable step controls.
- [OTP Field](/docs/components/otp-field.md): One accessible input, presented as individual code cells.
- [Radio Group](/docs/components/radio-group.md): A group of mutually-exclusive options.
- [Select](/docs/components/select.md): Single or multiple selection from a short, known option list.
- [Slider](/docs/components/slider.md): Single-value and two-handle sliders with keyboard and RTL support.
- [Switch](/docs/components/switch.md): On/off toggle for system-level settings.
- [Tag Input](/docs/components/tag-input.md): Enter and validate removable tags with keyboard, paste, and form support.
- [Toggle](/docs/components/toggle.md): A two-state button that is pressed or unpressed.
- [Toggle Group](/docs/components/toggle-group.md): A row of toggles with shared selection state.

---

Source: http://sveltekit-prerender/docs/components/forms.md

# Forms

Labels, field groups, validation, and form composition.

## Components

- [Field](/docs/components/field.md): Composable labels, descriptions, and validation for native and custom form controls.
- [Fieldset](/docs/components/fieldset.md): Native form grouping with legends, descriptions, and disabled semantics.
- [Form](/docs/components/form.md): Composable native forms that preserve SvelteKit actions, remote-form attachments, validation, and submitter behavior.
- [Label](/docs/components/label.md): A styled native label that names a form control.

---

Source: http://sveltekit-prerender/docs/components/dates.md

# Dates

Calendars and date selection for single dates and ranges.

## Components

- [Calendar](/docs/components/calendar.md): A composable calendar for choosing a single date.
- [Date Picker](/docs/components/date-picker.md): An editable date field with a calendar popup.
- [Date Range Picker](/docs/components/date-range-picker.md): Editable start and end dates with a shared calendar popup.
- [Range Calendar](/docs/components/range-calendar.md): Choose a start and end date with keyboard navigation and a continuous range highlight.

---

Source: http://sveltekit-prerender/docs/components/navigation.md

# Navigation

Breadcrumbs, pagination, and tabbed views.

## Components

- [Breadcrumb](/docs/components/breadcrumb.md): A trail of links showing the user's position in a hierarchy.
- [Pagination](/docs/components/pagination.md): A compact pager that truncates with an ellipsis. Always shows the first and last page so users know how big the data set is.
- [Tabs](/docs/components/tabs.md): Switch between mutually-exclusive views with horizontal or vertical tabs and a sliding indicator.

---

Source: http://sveltekit-prerender/docs/components/overlays.md

# Overlays

Dialogs, menus, panels, and contextual information.

## Components

- [Alert Dialog](/docs/components/alert-dialog.md): A dialog that interrupts the user to confirm a consequential action.
- [Context Menu](/docs/components/context-menu.md): A right-click menu for actions that apply to whatever the user clicked on. It uses the same item grammar as DropdownMenu and opens on right-click.
- [Dialog](/docs/components/dialog.md): A dialog for focused tasks, forms, and details.
- [Drawer](/docs/components/drawer.md): Swipeable edge panel with accessible focus management and direct manipulation.
- [Dropdown Menu](/docs/components/dropdown-menu.md): A list of actions anchored to a button. Use it for user menus, row-level actions, and anywhere a `…` button needs to do more than one thing.
- [Hover Card](/docs/components/hover-card.md): A preview card that opens on hover or keyboard focus. Use it for user mentions, link previews, or definitions.
- [Popover](/docs/components/popover.md): A floating surface anchored to a trigger element.
- [Sheet](/docs/components/sheet.md): An edge-anchored drawer for mobile menus, filters, and side panels.
- [Tooltip](/docs/components/tooltip.md): Brief explanatory text on hover or focus.

---

Source: http://sveltekit-prerender/docs/components/layout.md

# Layout

Surfaces, disclosure, grouping, scrolling, and tabular layout.

## Components

- [Accordion](/docs/components/accordion.md): Stacked collapsible sections with single- and multi-open modes.
- [Card](/docs/components/card.md): Surface container for grouping related content.
- [Collapsible](/docs/components/collapsible.md): A single collapsible panel with open/close toggle.
- [Group](/docs/components/group.md): Connect related controls with separators and optional labels.
- [Scroll Area](/docs/components/scroll-area.md): A scroll container with themed scrollbars and optional overflow cues.
- [Separator](/docs/components/separator.md): Semantic or decorative divider in either orientation.
- [Table](/docs/components/table.md): Display rows and columns with native table semantics.

---

Source: http://sveltekit-prerender/docs/components/status-and-content.md

# Status and content

Status messages, progress, identity, and text.

## Components

- [Alert](/docs/components/alert.md): Tinted callouts for inline status, confirmation, and warnings.
- [Avatar](/docs/components/avatar.md): An image with initials while it loads or when it fails.
- [Badge](/docs/components/badge.md): Compact labels for status, counts, and tags.
- [Empty State](/docs/components/empty-state.md): Explain why content is missing and give people a useful next step.
- [Kbd](/docs/components/kbd.md): Inline keyboard-shortcut badge.
- [Progress](/docs/components/progress.md): Show how far along a task is. Determinate with value or indeterminate for unknown duration.
- [Skeleton](/docs/components/skeleton.md): Loading content without flicker or layout shift.
- [Spinner](/docs/components/spinner.md): An animated loading indicator for indeterminate work.
- [Typography](/docs/components/typography.md): Semantic document headings, text, inline code, and interface typography primitives.

---

Source: http://sveltekit-prerender/docs/brand-mark.md

# Brand Mark

The Mielui brand mark is a package-only visual asset. It is exported from the package root and the dedicated `brand-mark` path, but it is not a CLI registry component.

## Install

~~~~sh
pnpm add @mielui/svelte
~~~~

## API

- `size?: number` sets both dimensions in pixels and defaults to `30`.
- `class?: string` adds utility classes to the outer `span`.
- `label?: string` gives the mark an accessible image name. Without a label, the mark is decorative and hidden from assistive technology.

## Example

~~~~svelte
import { BrandMark } from '@mielui/svelte';

<BrandMark size={36} label="Mielui" />
~~~~

For a narrower import, use `@mielui/svelte/brand-mark`.


---

Source: http://sveltekit-prerender/docs/skill.md

# Mielui

Build Svelte interfaces using Mielui's documented APIs, tokens, and composition.

Mielui began from Sivir UI and is maintained independently, with its own components, behavior, themes, documentation, and releases. Use Mielui sources for implementation decisions. Sivir examples and version numbers do not establish Mielui compatibility. Preserve the upstream copyright and license notices when copying or redistributing source. The CLI stores them in `notices/mielui/` inside the configured source directory; the repository's UPSTREAM.md records its origins.

## Step 1: Establish the project state

Inspect the project before changing code:

1. Confirm the installed Mielui release's peer requirements. Mielui 0.1.1 requires Svelte 5.56 or newer within Svelte 5 and Tailwind CSS v4.
2. Read the package manifest, lockfile, global CSS entry, and nearby Svelte components.
3. Detect the integration mode:
   - Package mode: `@mielui/svelte` is a dependency and components import from it.
   - Source-copy mode: `mielui.json` and a local Mielui directory exist.
   - Not installed: neither mode is present.
4. Identify the installed Mielui package version or the component versions recorded in `mielui.json`.
5. Preserve the project's package manager, import style, aliases, theme, and local component conventions.

Do not silently switch an existing project between package and source-copy modes.

## Step 2: Load current Mielui sources

Fetch `http://sveltekit-prerender/llms.txt` at the start of each Mielui task. Treat it as the index for the current catalog, installation guide, theming guide, changelog, and generated component references.

Load documentation progressively:

| Task | Read from the `llms.txt` index |
| --- | --- |
| First Mielui integration | Introduction, Installation, and Theming |
| Choosing components | Components index, then candidate component pages |
| Implementing a component | That component's Markdown page and every Mielui dependency needed for custom composition |
| AI or coding-agent UI | Candidate AI component pages plus [component selection](http://sveltekit-prerender/docs/component-selection.md) |
| Upgrading or resolving an API mismatch | Installed version, the compiled changelog, the LLM changelog page when linked, and component pages |
| Visual design or review | [design language](http://sveltekit-prerender/docs/design-language.md) |

Each generated component page contains its current version, dependencies, install command, prop tables for exported parts, public `index.ts` API, and runnable examples. `/llms-full.txt` combines the full reference; prefer individual pages for focused tasks. Read the exact page before using a component that is new to the project. Never invent a part, prop, event, variant, slot/snippet contract, or import path.

Use this authority order when sources disagree:

1. Local source-copied components define source-copy behavior.
2. The installed package and its declarations define package behavior at the locked version.
3. The live Mielui Markdown defines the latest released API and examples.
4. The rendered documentation is visual context, not a substitute for the typed API.

If the project is behind the live release, adapt to the installed API or ask before upgrading. Do not paste latest-only syntax into an older installation.

If web access is unavailable, inspect local Mielui source or installed declarations. State that the live reference could not be checked rather than guessing.

## Step 3: Model the interface

State the user's job, the dominant content or action, and the important empty, loading, success, and error states. For substantial pages, compare at least two materially different compositions and choose the one that makes the task clearest.

Read [design language](http://sveltekit-prerender/docs/design-language.md) before creating or substantially reshaping an interface. Follow the host application's established visual system when it is more specific than Mielui's defaults.

Choose geometry before components. Mielui is a set of purposeful primitives, not a requirement to wrap every region in a component.

## Step 4: Select and verify components

Read [component selection](http://sveltekit-prerender/docs/component-selection.md) when selecting new primitives or composing an AI interface.

Prefer the highest-level Mielui component that matches the interaction semantics. Use native Svelte and semantic HTML for layout and content where Mielui adds no behavior. Avoid recreating focus management, keyboard navigation, overlays, live regions, loading behavior, or controlled state already supplied by a component.

Before implementation:

1. List the selected component slugs.
2. Fetch each selected component page from the links in `llms.txt`.
3. Confirm exports, required props, bindable state, event signatures, dependencies, and examples.
4. Reject removed components listed in the current components index and follow its migration guidance.
5. Keep compound components in their documented namespace shape, such as `Dialog.Root` and `Dialog.Content`.

Examples are API evidence, not page templates. Adapt their state model and composition to the user's real content.

## Step 5: Install consistently

When Mielui is absent, choose with the user unless the requested mode is already clear:

| Mode | Choose when |
| --- | --- |
| Package | The project wants dependency-managed updates and imports from `@mielui/svelte`. |
| Source copy | The project wants to own and modify component source. |

Use the project's package manager. Translate the documentation's pnpm examples when needed.

For package mode:

```sh
pnpm add @mielui/svelte
```

Import the token sheet once in the application's global CSS:

```css
@import '@mielui/svelte/ui.css';
```

Ignore the `mielui add` command in a component page when using package mode. That command is only for source-copy projects; package components are already available through the installed dependency.

For source-copy mode:

```sh
pnpm dlx @mielui/svelte init -y
pnpm dlx @mielui/svelte add <component-slug>
```

Import the generated token sheet once and use the aliases recorded in `mielui.json`; do not assume the default path if configuration already exists. Let the CLI resolve transitive Mielui dependencies. Add only components required by the design.

Treat `mielui add` as an operation for missing source, not a safe update command. It skips existing files unless `--overwrite` is passed but can still advance recorded versions in `mielui.json`. Before updating copied components, inspect local modifications and the upstream change, then ask before using `--overwrite` because it replaces owned source.

## Step 6: Implement with Mielui

Use Svelte 5 state and binding patterns that match the project's code. Preserve native semantics and use the component's typed callbacks and bindable props as documented.

Use Mielui semantic tokens and Tailwind utilities before custom values. Let typography, alignment, spacing, and content hierarchy do most of the visual work. Add surfaces, borders, radii, color, and motion only when they communicate grouping, interaction, state, or continuity.

For AI interfaces, compose transcript behavior, message roles, response content, reasoning, tools, questions, progress, attachments, and the composer as separate stateful concerns. Do not make every assistant event look like a chat bubble, and do not animate already-live network chunks merely for decoration.

Implement real states, not only the ideal screenshot:

- Empty content gives a useful next action.
- Loading preserves layout and communicates what is pending.
- Errors explain what failed and how to recover.
- Success confirms the user's action without unnecessary ceremony.
- Long content wraps or scrolls in the correct local region.

## Step 7: Verify the result

Run the project's normal lightweight formatting and lint checks. Run broader checks only when requested or required by the host repository.

Inspect the rendered interface at desktop and narrow widths, in every supported theme. Exercise keyboard focus, overlays, escape and outside-click behavior, form submission, disabled and pending states, transcript following, and long content where applicable. Check the browser console for runtime and accessibility errors.

Before finishing, confirm:

- Every Mielui API used matches the installed version.
- The stylesheet or local token sheet is imported exactly once.
- The first viewport makes the task and dominant action or content clear.
- Responsive behavior recomposes rather than merely shrinking.
- No decorative container, label, icon, color, or motion can be removed without losing meaning.
- The implementation uses real product content and covers relevant non-happy states.

Report the Mielui components added, integration mode, verification performed, and any version or documentation limitation.

## Current composition contracts

The catalog separates Components, Blocks, AI components, Chart components, and Actions. Public component imports remain under `@mielui/svelte/components/<slug>` even when source folders use another category. Chart, PieChart, Gauge, and Heatmap are charts. Actions use `@mielui/svelte/actions/<slug>`: morph, number-shuffle, and shimmer.

Use Dialog instead of Modal, Kbd instead of Shortcut, and HugeiconsIcon with Hugeicons glyph data. Group connects real Button, Input, and trigger components; include Group.Separator between controls. Tag Input uses outline badges.

Toast is composable through Root, Content, Footer, Title, Icon, Actions, Action, and Close. The description occupies the upper inset and the compact title/actions row sits below. The toast helpers render these same parts. Overlay surfaces accept `surface="solid" | "glass"` on the documented owning part; do not apply glass independently to nested surfaces.

Heatmap.Root accepts `animation="rows" | "columns" | "live" | "none"`, defaulting to rows. Reduced motion disables entrances. Slider range mode binds a pair of numbers, accepts thumbLabels, and supports dir="rtl". Read each page before using these APIs, particularly when the locked package predates the unreleased changelog.

## Tables, native selects, and loading placeholders

Compose Table.Root with Header, Body, Row, Head, and Cell. Caption, Footer, and ScrollArea are optional. Use variant="inset" for a recessed table. Sorting and selection remain application state; use native aria-sort and existing Button or Checkbox controls.

NativeSelect.Root renders a native select. Bind a string for single selection or a string array with multiple. Its size prop is the native number of visible options. Compose Option and OptGroup inside it.

Apply use:shimmer from @mielui/svelte/actions/shimmer to a loading container, or set variant="shimmer" on Skeleton. Shimmer takes no options and disables itself for reduced motion. Label the loading region; the visual highlight is hidden from assistive technology.

## Selection, uploads, and motion

Select.Root and Combobox.Root use a string value by default. Set `type="multiple"` and bind a `string[]` for multiple selection. Keep the documented Trigger, Content, and Item composition; multiple selection leaves the menu open. Do not add a second selection store around the binding.

FileUpload.Root owns validation and upload state. Use `maxFiles={1}` for single-file picking. Its children snippet exposes the summary for composing the empty dropzone and selected file states. `onUpload` is required; implement the upload there and resolve it only after server confirmation. A local-only demo should explicitly say that it does not upload files. Keep cancellation and retry connected to the documented upload context.

Notch provides nonmodal edge content through Root and Content, with optional Header, Peek, SideAction, and other documented parts. Use `<Toaster variant="notch" />` for notifications instead of adding a second notification host.

Gauge distinguishes `value={null}` from a valid zero measurement. Gauge and Heatmap accept loading states and handle their own placeholder presentation. Use their documented animation options instead of adding timers around examples.

Apply `use:numberShuffle={{ value }}` to a text-only element containing the final number. Keep icons and controls outside it. The action preserves accessible source text and honors reduced motion and disabled theme motion.


---

Source: http://sveltekit-prerender/docs/component-selection.md

# Mielui component selection

Use this guide to narrow candidates, then read each candidate's current Markdown page from `http://sveltekit-prerender/llms.txt` before writing code.

## Choose by job

| User need | Start with | Notes |
| --- | --- | --- |
| Trigger an action or navigate | Button | Use a real link destination through the documented link behavior. Reserve icon-only actions for recognizable icons with accessible names. |
| Toggle one setting | Switch or Toggle | Use Switch for an on/off setting; use Toggle for a pressed tool or display mode. |
| Choose one visible option | Radio Group | Best when comparing a small set benefits from seeing every choice. |
| Choose from a compact list | Select | Use for a bounded list without search. Set type="multiple" and bind a string array for multiple selection. |
| Search and choose an option | Combobox | Use for searchable option sets. Single and multiple selection use the same documented parts. |
| Run or discover commands | Command | Use for an application command palette, not ordinary form selection. |
| Show contextual actions | Dropdown Menu or Context Menu | Dropdown Menu has an explicit trigger; Context Menu is secondary pointer context and needs another accessible path. |
| Collect short or long text | Input or Textarea | Use the component's integrated label, description, and validation API when available. |
| Confirm a consequential action | Alert Dialog | Use Dialog for general tasks; reserve Alert Dialog for decisions that need explicit interruption and confirmation. |
| Complete a focused task in place | Dialog | Use Sheet when preserving more page context or a side-oriented workflow matters. |
| Show anchored supplemental UI | Popover or Hover Card | Popover is interactive; Hover Card is preview information and must not hold essential actions. |
| Communicate persistent inline state | Alert | Keep it next to the content or action it qualifies. |
| Confirm a transient action | Toast | Do not use a toast for errors or decisions that require immediate action. |
| Pick files for upload | File Upload | Root owns validation and upload state; maxFiles={1} limits picking to one file. Compose empty and selected states with its summary snippet. |
| Show ongoing edge activity | Notch | Use for nonmodal activity. Use the notch Toaster variant for notifications. |
| Compare numeric series or distributions | Chart or Pie Chart | Compose Plot, marks, Legend, and Tooltip according to the chart page. |
| Show activity over dates | Heatmap | Distinguish unavailable data from explicit zero counts. |
| Show determinate work | Progress, Gauge, or Task Steps | Progress shows completion, Gauge emphasizes a measured value, and Task Steps names ordered workflow stages. |
| Show indeterminate work | Spinner or Skeleton | Spinner marks compact activity; Skeleton reserves the shape of incoming content. |
| Organize related content | Card | Use only when a surface communicates a real grouping or interactive object better than spacing. |
| Reveal optional detail | Collapsible, Accordion, or Show More | Collapsible controls one region, Accordion manages peer sections, and Show More clamps long prose. |
| Navigate peers or hierarchy | Tabs, Breadcrumb, Pagination, or Sheet with navigation links | Match the information model; do not use Tabs as a generic layout switch when controls or links are more accurate. |

## Compose AI interfaces

Treat the AI surface as a system of independently meaningful states.

| Concern | Component | Role |
| --- | --- | --- |
| Scrollable transcript | Conversation | Manages following, empty content, transcript layout, and jump-to-latest behavior. |
| Speaker and response state | Message | Marks user, assistant, or system content and exposes streaming or error state plus contextual actions. |
| Rich answer content | Markdown or Code Block | Render structured model output and code rather than rebuilding prose styles per message. |
| Generated text arrival | Response Stream | Use for a string or async chunks when its entrance modes add useful continuity. Prefer direct rendering for already-streamed content when extra animation would delay reading. |
| Model trace | Reasoning | Exposes concise status and optional detail. Keep the collapsed title informative; do not dump an unstructured internal monologue. |
| Agent operations | Tool | Groups running, completed, or failed commands, searches, reads, inputs, and outputs without making each operation a full message. |
| User prompt | Composer | Owns the controlled prompt value, submission state, toolbar, actions, and send/stop behavior. |
| Agent clarification | Question | Uses single-choice, multiple-choice, or free-text answers with explicit submit and cancel behavior. |
| Ordered execution | Task Steps | Shows stable workflow stages and the current or failed step. |
| Files and artifacts | Attachment | Presents attached inputs or outputs with the component's documented status and actions. |

A common coding-agent composition is:

```text
Conversation.Root
├── Conversation.Content
│   ├── Message.Root from="user"
│   └── Message.Root from="assistant"
│       └── Reasoning / Tool / Markdown / CodeBlock
└── Conversation.ScrollButton

Question.Root or Composer.Root
```

Render `Question` as a temporary takeover when the agent cannot continue without structured input; preserve an unsent composer draft. Keep `Tool` and `Reasoning` lower emphasis than the answer. Use `Message.Actions` for response-scoped actions such as copy, retry, or feedback.

## Resolve common ambiguities

| Choice | Decision |
| --- | --- |
| Dialog vs Alert Dialog | Dialog supports a task; Alert Dialog blocks on a consequential decision. |
| Dialog vs Sheet | Dialog concentrates attention; Sheet preserves more spatial relationship to the page. |
| Select vs Combobox | Select is compact lookup; Combobox adds search. |
| Combobox vs Command | Combobox produces a field value; Command invokes application actions. |
| Alert vs Toast | Alert persists in context; Toast is transient confirmation. |
| Spinner vs Skeleton | Spinner indicates activity; Skeleton reserves content geometry. |
| Progress vs Task Steps | Progress communicates amount; Task Steps communicates sequence and stage identity. |
| Toggle vs Checkbox | Toggle changes a tool or view's pressed state; Checkbox selects a form option. |
| Accordion vs Tabs | Accordion reveals sections in one reading flow; Tabs switch among peer views. |
| Card vs plain layout | Use Card only when the boundary itself explains grouping, interaction, or state. |

Do not choose a component by visual resemblance alone. Match semantics, state ownership, keyboard behavior, and content structure first.


---

Source: http://sveltekit-prerender/docs/design-language.md

# Mielui Design Language

Create a calm, intentional interface whose distinctiveness comes from composition, typography, alignment, and relationships specific to the user's work.

## Start With the Job

Establish who uses the interface, what they must understand or do, the most important content or state, and which constraint or error could change the outcome.

Order the experience by user need rather than data or source order. Give each section one purpose. Make the primary path understandable from the title, headings, key values, controls, and captions alone.

Write direct, sentence-case interface copy. Name actions with the result they produce and keep that vocabulary stable through confirmation and error states.

## Compose Before Decorating

Choose geometry before components. For substantial work, consider at least two materially different layouts and select the one that makes the user's task clearest with the least mediation.

- Make the first viewport communicate the purpose and dominant action, relationship, or evidence.
- Establish one dominant object in each major section and quiet its supporting content.
- Compose the page as a field with a shared grid, not a stack of interchangeable cards.
- Map magnitude to length or position, change to sequence, composition to proportion, process to connection, and alternatives to aligned rows or columns.
- Use prose for one conclusion, tables for exact lookup, and charts only when a relationship becomes faster to understand visually.
- Give true peers equal structure and visual weight.
- Reflow underfilled splits, orphaned items, and accidental empty rectangles.

If the layout feels safe or vague, strengthen one relationship through proportion, hierarchy, density, alignment, or placement before adding effects.

## Use Type and Space as Structure

Use the application's configured sans typeface for interface text and headings. Reserve mono for code, commands, paths, timestamps, and compact technical identifiers.

- Create hierarchy with type before adding surfaces, borders, or color.
- Use one page title, clear section headings, readable body text, compact labels, and subdued metadata.
- Keep long-form text near 60 to 68 characters per line; reflow before shrinking it.
- Align related text to shared edges and baselines.
- Use unmistakable gutters between adjacent text columns.
- Use tabular numerals for vertically compared values.

Build spacing from relationships:

- Keep a heading close to its first paragraph.
- Keep a label, value, and supporting detail together.
- Use a steady body rhythm among related controls and content.
- Use a clearly larger interval between distinct sections or tasks.
- Keep captions, validation, and sources close to what they qualify.

Give each visible gap one owner. Prefer a parent stack or grid over competing child margins.

## Apply Mielui Restraint

Use Mielui semantic color tokens and preserve their meaning in every theme. Pair color-coded state with text, shape, or another non-color cue.

Treat the interface as one continuous canvas. Add a surface, border, radius, or shadow only when it clarifies grouping, interaction, selection, or state better than spacing can. Default to stillness; add motion only to explain state change, preserve continuity, or confirm an action.

Do not ship:

- All-caps or widely tracked eyebrows, kickers, and overlines.
- Decorative gradients, glows, blobs, textures, glass, or ornamental shadows.
- A generic centered hero followed by a uniform card grid.
- A rounded container around every section or metric.
- Pills for ordinary metadata, labels, or status that does not need badge semantics.
- Decorative icon tiles, oversized icons, or mixed icon styles.
- Tiny muted copy, arbitrary type sizes, inconsistent peer values, or weak contrast.
- Decorative charts, misleading scales, or color without meaning.
- Stock imagery, fake screenshots, or decoration added to fill space.
- Scroll reveals, parallax, pulsing indicators, bounce, or motion that delays the task.

Avoiding these defaults is not permission to make a blank template. Commit to a composition and make its hierarchy, alignment, and information density precise.

## Recompose Responsively

Use semantic HTML, logical heading order, native control behavior, visible focus, accessible names, sufficient contrast, and source order that matches reading order.

Treat responsive design as recomposition, not uniform shrinking. Reflow grids, stack comparisons, preserve readable type and target sizes, and let dense tables scroll locally only when simplification or reordering would hurt lookup. Never hide page overflow to conceal a layout defect.

## Review in Order

1. Is the user's task and dominant object clear in the first viewport?
2. Does each section advance the task without repeating another section?
3. Does typography communicate hierarchy before decoration does?
4. Are peers aligned and spacing relationships deliberate?
5. Can any surface, border, icon, label, color, or motion be removed without losing meaning?
6. Does the interface reflow without overflow, broken reading order, or character-level wrapping?
7. Are semantics, focus, labels, contrast, and interaction states sound?

Fix the highest-impact structural problem first, then inspect again.

## Shared appearance and motion

Use the installed token sheet for control edges, elevation, insets, focus, press feedback, and motion. Filled controls use `--elevation-control-edge`; Switch and Slider apply it to their thumbs. Keep tracks, progress fills, and passive grouping wrappers flat. Composite fields have one raised editable boundary, not a shadow on every nested input.

Overlay frames own their documented solid or glass treatment. Preserve the translucent inset in glass mode and compose focus shadows with existing elevation rather than replacing it. Check both themes and the theme's shadow switches when restyling controls.

Use component motion options before custom animation. Respect reduced motion and zero theme duration. Stop recurring effects while hidden or offscreen and clean up observers, listeners, and pending work when unmounted. Do not add duplicate focus traps or dismissal listeners around components that already own those interactions.


---

Source: http://sveltekit-prerender/changelog/0.2.0.md

# @mielui/svelte 0.2.0 changelog

This document aggregates the release notes for this version. Review it before integrating or upgrading Mielui.

Large changes for this release have an LLM context page at [/changelog/0.2.0/llm.md](/changelog/0.2.0/llm.md).

## Docs

- Document milestone-based releases spanning multiple feature and fix pull requests.

- Redesign the landing page with a colorful hero, live component previews, and responsive navigation.
- Simplify the landing page copy and showcase, with consistent outer gutters and a distinct theme-driven palette.
- Give Docs and Studio a continuous outer shell with recessed content and integrated navigation, header, and footer controls.
- Match the landing hero and showcase accents to the active primary color.
- Move docs page controls inside the inset frame and soften the outer shell color.
- Open docs navigation and page outline in toggleable floating panels, giving content the full page width.
- Add nonmodal glass navigation and Studio inspectors with hover reveal and docking, restore the right page outline, and tighten the black outer canvas.
- Align the page-outline header with preview tabs, soften docked borders, and strengthen light-mode section headers.
- Simplify docs section labels and refresh Studio overlay previews with compact workspace content.
- Restore framed lead demos, strengthen section labels, and align footer actions in a flush row.

- Simplify Studio section labels and inspector disclosures without separator lines.

- Make the selected sidebar page easier to identify with a tinted background and stronger label.

- Remove the footer divider to match the borderless page header.

- Align the Studio sidebar toggle with its header controls in both floating and pinned layouts.

- Soften scrolling content at the header and footer with short background fades.

- Improve light-mode preview tab contrast and section info hover visibility.
- Keep search results inset from the palette sides and tint keyboard hints with the primary color.

- Expand the introduction with a setup comparison, complete package quick start, and guidance for theming and component exploration.

- Add a brief pixel reveal between pages, with reduced-motion support and interruptible navigation.

- Restore the GitHub star action in Studio with the same ordering as the docs header.

- Tighten search result insets and give keyboard hints a solid primary surface with shared control depth.

- Match selected preview tabs to the package-manager picker surface.

- Remember pinned docs and Studio sidebars independently across visits.
- Unify Docs and Studio header controls and harden sidebar pinning and page-transition cleanup.
- Correct homepage showcase composition to use supported chart surface settings and labeled tab controls.

- Refresh the README screenshot to show the redesigned homepage.

## Feature

- Choose single or double borders across framed surfaces, including cards, dialogs, menus, Notch, and Toast in themes and Studio.
- Organize Studio appearance and interaction settings, with toggle buttons for value choices and a compact Advanced colors action in the Color header.
- Add an opt-in depth toolbar variant with raised keys and recessed selections; the default remains flat.

- Use number shuffle for changing numeric readouts in tables, charts, uploads, commands, Studio, and interactive examples.

- Customize five pastel chart colors in Studio; chart demos and default series share the same palette.
- Choose the top or bottom position of inset strips, with local overrides for fixed headers.
- Add an optional inset DataTable layout with compact filters and shared pagination inside the frame.
- Preview glass against a colored Studio backdrop, with dropdown, popover, and hover-card examples.
- Use rounder default corners and more spacious composer input panels.

- Add the Daydream preset with flat sage-gray cards, soft pink controls, and pastel chart colors in light and dark modes.

## Fix

- Keep theme choice controls accessibly labelled without unsupported component props.
- Extend menu separators across the full inner panel width, including submenus.
- Keep tooltip text readable when glass surfaces are enabled.

- Refine the optional toolbar depth with shallow key faces and show zoom controls in both toolbar demos, with tooltips matching the input surface.

- Make Cartesian, pie, and heatmap tooltips follow single borders and glass surfaces.
- Keep donut tooltips aligned with the pointer without a trailing position animation.
- Soften live chart highlights, add quiet intervals, and suppress them while inspecting values.

- Preserve continuous single-border outlines on tables and preview/code cards.
- Keep glass inset panels visually distinct while allowing backdrop colors through.
- Align the Native Select chevron with other selection controls without a duplicate native arrow.
- Keep installation command tabs above the command regardless of inset-strip preference.
- Retain structural inset gutters on data tables, composers, and code/preview panels in single-border mode.
- Soften the dark glass composer input tint so backdrop color stays visible without a heavy grey fill.
- Preserve custom accessible labels on numbered data-table pagination.
- Avoid duration-formatting errors for tool status values with excessive decimal precision.

- Keep file diff signs attached to their animated counts and remove redundant inset surface styles.

- Preserve preset colors, typography, and token overrides when selecting or exporting a theme in Studio.

- Keep the Studio preset picker and reset button aligned across theme densities.


---

Source: http://sveltekit-prerender/changelog/0.1.1.md

# @mielui/svelte 0.1.1 changelog

This document aggregates the release notes for this version. Review it before integrating or upgrading Mielui.

Large changes for this release have an LLM context page at [/changelog/0.1.1/llm.md](/changelog/0.1.1/llm.md).

## Breaking

- Remove Fullscreen Nav. Use Sheet with navigation links for mobile menus.
- Rename Modal to Dialog, including its types, package subpath, and CLI command.

- Replace standalone Toast usage with Toast.Root and its composable parts. Toast progress bars have been removed.

- Renamed Shortcut to Kbd, including its import path and prop type.

- Require Svelte 5.33 or newer for attachment support.

- Card titles default to level-two headings and accept an explicit heading level.
- Alert announcements are opt-in, with separate polite and assertive modes.
- Breadcrumb current-page state is explicit instead of inferred from the router.
- Reorder List dragging starts from its handle; row content remains interactive and accessible.
- Enforce mode-specific Input, Question, Accordion, and Toggle Group values and branch-specific Button and Badge attributes.
- Require Svelte 5.56 or newer for modern reactive template declaration syntax.

## Docs

- Use pnpm and Node.js for repository setup, development, and release tooling.

- Added a component audit covering behavior, accessibility, composition, and motion.

- Moved Show More into Blocks.

- Toolbar now appears under Blocks. Its import path stays the same.

- Add manual installation instructions with dependency commands, file tabs, copying, and expandable source.
- Add a right-aligned On this page sidebar with smooth section navigation and reduced-motion support.
- Move Gauge into Chart components.
- Use Hugeicons throughout components and examples, with an SSR-safe HugeiconsIcon renderer.
- Use dashed guides in the left documentation navigation.
- Add replay controls to inset chart previews.

- Align the documentation breadcrumb with the article heading.

- Add Copy page actions with Markdown and AI links.
- Replace anatomy summaries with prop tables for every exported component part, including native attributes and events.
- Add the Agent skill guide and a complete llms-full.txt reference.
- Update example identities and project links to mielsense.

- Improve code-example formatting and separate API reference links in the page outline.

- Document every Table and Native Select part and use Table for API references.
- Shorten repetitive documentation copy and update component counts.
- Soften the scrolling edge beneath the documentation toolbar.

- Animate native-attribute disclosures with Collapsible.
- Align Star and theme controls with the page outline and use a home icon in breadcrumbs.
- Document component reuse and accessible interaction motion in the design guidelines.

- Group Reorder List, Command, Color Picker, and Toast under Blocks while preserving their imports and documentation links.

- Include motion actions in the component catalog and keep its counts and search in sync with navigation.

- Show headless component props in the main API tables and document props from every discriminated mode.

- Join the publish-date input and calendar trigger with Group in the Date Picker example.

- Keep the Number Field seat-count example compact instead of stretching the control to its container.

- Show Data Table search and filtering as one joined control.

- Replace the Toolbar demo with selectable design tools and keyboard hints.
- Rebuild Studio previews with aligned control states, Charts and AI sections, and an invoice table.
- Separate basic remote form validation from multiple actions and reset.
- Allow unrestricted cross-month selection in the two-month Range Calendar example and show its selected dates.
- Join Date Range Picker inputs and calendar trigger with Group.

- Add a promise-toast demo and use promise notifications in Form examples.

- Organize Studio theme controls into collapsible sections with a tooltip-labelled advanced settings button.

- Give both levels of the nested Drawer example handles and normal dismissal.

- Add Bun install commands with syntax highlighting.
- Add composed examples for File Upload, Reorder List, Toolbar, Separator, and Response Stream.
- Add tooltips to Studio and documentation icon actions.

- Simplify the top navigation to Docs and Studio.

- Replace machine-specific paths in the design-system implementation plans.

- Derive homepage component counts from the catalog and check each catalog entry's category, examples, and API reference.
- Document controlled overlays, upload cancellation and retry, and theme storage limitations.
- Add a live File Diff example and refresh generated component prop tables.
- Use shared border, radius, and elevation tokens in legacy API tables.

- Document shared edge, inset, focus, and motion rules for component contributions.
- Keep Notch and notch notification examples inside their preview frames.
- Make chart state and period-switching examples easier to adapt with named event handlers.

- Chart guides have dedicated type pages, searchable navigation, and matching Markdown references. Tablet documentation navigation remains accessible.
- Split chart examples into focused bar, line, area, mixed, pie, and donut guides with continuous motion, data updates, missing measurements, and loading states.
- Add interactive Gauge capacity and Heatmap reporting-range examples.

- Use flat leading previews and source sections, inset example cards, compact API table headers, and persistent footer page actions.

- Block examples now include contained toast previews, continuous Markdown streaming, recoverable task steps, and visible command and code-action results.

- Component examples now include working local actions, accessible icon controls, upload completion and recovery, and shorter variant comparisons.
- Make AI examples finish, stop, and retry their simulated work; preserve partial responses and clean up pending delivery when previews close.
- Document AI state ownership and add composed tool retries, response cancellation, and interactive Morph and Shimmer examples.

- Rebuild Docs and Studio around fixed headers and footers, thin section dividers, and quieter navigation. Widen the documentation section rail.

- Clarify inherited glass surfaces and keep example action results spaced below their controls.

- Center the homepage cat within a bordered layout with subtle dithering and muted scrolling component names.

- Keep preview toolbars aligned across nested examples and prevent their controls from overlapping pinned section headings.

- Clarify core component setup and form behavior, and make the Group and indeterminate Progress examples interactive.

- Balance section content spacing, keep sticky headings opaque, and center grid intersections across the documentation rails.

- Keep navigation headings and the leading preview toolbar sticky, use text-only hover and selection states, and show API guidance from an info control.

- Align footer actions with the header columns and disable elastic overscroll across the site.

- Match error pages to the documentation grid and provide a retry action when a page fails to load.

- Add visual component catalog cards with descriptions and search across component names and descriptions.

- Present each changelog version as a sticky section and keep catalog descriptions in footer info cards.

- Simplify Studio into aligned control and content previews, unify its tabs, and match footer and header heights.

- Move Studio preview tabs into the header and preview width controls into the footer.

- Keep headers, footers, section headings, and navigation headings at one shared height, with aligned intersection marks.

- Align Studio chart, conversation, and application previews with the shared section layout and keep the composer clear of messages.

- Strengthen section headings and move Button behavior notes into its Usage section.

- Keep component behavior notes inside their relevant sections instead of below standalone previews.

- Remove the trailing divider below Studio’s Typography controls.

- Widen Studio’s conversation preview and place its simulation note below the composer.

- Let the Studio conversation span the preview and scroll behind a narrower floating composer.
- Add matching grid junction markers at the Studio header and footer.

- Clarify block and AI component usage, state ownership, and Markdown link and image handling.

- Review every component’s usage, examples, and API coverage; add chart loading, empty-data, and animation examples to each chart-type guide.
- Keep documentation scrolling available over Toast previews and show section descriptions in information hover cards.

- Remove excess space below the final documentation sidebar item.

- Use warm pastel red and yellow series colors in chart examples.


- Add loading, empty, and live-motion controls to Gauge and Heatmap examples.

- Show a larger invoice dataset in Studio using the shared Data Table, with sorting, selection, and pagination.
- Arrange Studio component cards in compact responsive stacks, with a smaller calendar and label and sharing examples.

- Remove the repository’s OpenCode setup and skill lockfile.

- Show the Markdown preview directly on the canvas without a card or nested scroll area.

- Group components by type in the sidebar, with a preview catalog for each group.
- Make documentation search more compact, with quick destinations and a scrollable results list.

- Add space between catalog cards and use consistent parent-label styling and spacing for all nested sidebar groups, including charts, while keeping standalone links compact.

- Keep the expanded Notch export example clear of its trigger and show its file count in a compact badge.

- Nest catalog categories under Components in the page outline.

- Increase the space between component catalog sections.

- Clarify the homepage description of component theming.

- Match the Code tab background and rounded corners to its example preview.
- Add a single-file upload example that replaces the dropzone with the selected file.

- Gently snap sidebar groups and page sections to the top while preserving free scrolling within long sections and reduced-motion preferences.

- Snap sidebar group headings to the top without snapping to the bottom edges of long groups.

- Give consecutive documentation examples more separation while keeping their headings and previews together.

- Prevent sidebar settling from targeting offscreen groups; only visible headings approaching the top can catch.

- Align page-outline link gutters and nested indentation with the navigation sidebar.

- Use the same bounded top-only magnetic settling in the content column and sidebar.
- Give the page-outline hook a full outer gutter and more space before its labels.

- Align the footer info icon with the navigation button inset and distinguish outline hover previews with a dashed gray hook.

- Move the page-outline hook directly to a clicked section without pausing on headings passed during smooth scrolling.

- Keep catalog search pinned in a header-height row, with section headings and outline jumps positioned below it.

- Slow the page-outline hook’s glide while retaining direct section targeting and reduced-motion behavior.

- Remove the doubled divider between catalog search and the first section.

- Match article, toolbar, and footer side gutters to the page-outline header.

- Align the leading Preview / Code tabs with the shared content gutter.

- Give documentation content a moderate side gutter while keeping tabs, headings, toolbar, and footer aligned.

- Scale magnetic catch distances to neighboring section heights and settle only once per downward scroll gesture, preventing short sections from oscillating.

- Match the Copy page control height to the adjacent-page arrows in the docs footer.
- Keep Form and keyboard-shortcut demo feedback inside their previews and dispose unfinished toast demos on navigation.
- Separate page-outline state and Studio token parsing from presentation while reducing unnecessary outline work during preview updates.
- Update the agent skill and package guides for Mielui's current APIs, independent release history, and retained Sivir UI and COSS attribution.
- Refresh the README screenshot with the current homepage.
- Clarify current documentation sources and distinguish the historical Sivir UI changelog from Mielui releases.

- Document npm publishing authorization and the GitHub release steps for maintainers.

- Add agent release guidance and clarify first-publication setup before enabling trusted publishing.

## Feature

- Group components into Components, Blocks, AI components, and Chart components. Existing imports and docs URLs stay available.

- Toast notifications use an inset content area with a title and action buttons in the footer.

- Slider adds pill-shaped handles, a two-handle range mode, and right-to-left support.

- Group connects related controls with separators and optional text, in horizontal or vertical layouts.

- Add Heatmap with composable calendar, labels, summary, detail, legend, and keyboard navigation.
- Add Morph for SVG geometry transitions and text changes, including the theme switch.
- Add optional glass surfaces to overlays, menus, tooltips, selection popups, and toasts.
- Add a centered component preview and wide or narrow canvases to Theme Studio.
- Animate Heatmap cells and Gauge arcs on entry, with reduced-motion support.

- Add Table with default and inset variants, plus Native Select with grouped and multiple options.
- Add the Shimmer action and a shimmer variant for Skeleton.
- Add site-wide documentation search with Command-K and Control-K.

- Add a glass Composer surface and a Thinking text example for Shimmer.

- Add composable Task Steps rows and summaries, Reorder List handles and content, and Message metadata parts.
- Add separate Tool trigger/content parts, Color Picker surfaces, and Show More preview/trigger slots.
- Add Command search/result slots, optional Alert icons, and an optional Sheet header close control.
- Add controlled Context Menu state and manual tab activation.
- Add scoped Tooltip providers and noninteractive rich descriptions.

- Add composable Field, Fieldset, and Form components with accessible errors and SvelteKit remote-form examples.
- Add Calendar, Range Calendar, Date Picker, and Date Range Picker with keyboard navigation and date constraints.
- Add Number Field and OTP Field with native form submission and reset support.
- Add Separator and a public composable Toolbar with keyboard navigation.
- Add a swipe-dismissable Drawer with modal focus management.

- Add a composable Data Table powered by TanStack Table v9, with explicit sort menus, editable filter chips, selection, and pagination.

- Data Table filters accept a search control as children and align filter and sort buttons with inputs.
- Form error summaries accept validation paths directly and focus after unsuccessful submissions.

- Add File Upload with validation, progress, cancellation, retries, and animated completion.
- Initialize Mielui from a Studio JSON preset with `init --preset`, or apply it with `add theme`.
- Set glass surfaces globally from Studio or the `--mielui-surface` CSS variable.

- Studio’s AI workspace demonstrates streamed Markdown, reasoning, tool activity, file attachments, and an overlaid composer with stop and replay controls.

- Studio’s component preview centers interactive mini cards for controls, checklists, team members, and disclosures.

- Checkbox supports small, medium, and large sizes, with a larger 18px default.

- Add composable bar, line, area, mixed, pie, and donut charts powered by LayerChart, with tooltips, legends, and animated data updates.
- Charts offer entry reveals and ongoing live highlights that respect reduced motion and pause offscreen.
- Add a composable Empty State for first-use screens, empty search results, and completed work.
- Add Notch for custom activities at any screen edge, with solid and glass surfaces and animated expansion.
- Toast notifications can use a shared Notch surface through the Toaster variant.

- Notch offers a persistent peek rail, timed notifications, and swipe dismissal, with timers paused during interaction.

- Heatmap includes a shared tooltip for hovered and keyboard-focused days, with an optional Tooltip part for custom layouts.

- Adjust edge highlight strength in Studio or theme presets. Controls, keycaps, and raised surfaces now use half strength by default.

- Notch supports detached side actions that unfold on hover or focus. Notch notifications show one item at a time with previous and next controls.

- Place counters or custom content outside a Notch with Accessory; notification counts now use this separate part.

- Add built-in live motion to Gauge and Heatmap through their animation props.

- Add built-in loading and empty-data states to Gauge and Heatmap.

- Select and Combobox support multiple selection with array values and menus that stay open while choosing options.

- Add the Number shuffle action and animate Gauge values with rolling digits.

## Fix

- Replace the logo and favicons with the approved compact cat silhouette.

- Tag Input values have visible badge borders and backgrounds.
- Toast timers pause during keyboard interaction, and close buttons remain visible.

- Toast descriptions have more room above a compact title and action row.

- Tag Input badges use stronger borders and a contrasting fill.

- Homepage navigation uses equal button heights and spacing, with the redundant Components button removed.

- Tag Input uses the standard transparent outline Badge styling.

- Restore Changelog and Studio pages after TypeScript preprocessing and component path errors.
- Preserve Group outer borders with single-pixel separators and composed Input, menu, and popup examples.
- Match Alert to the inset Toast layout, with the description above the status row.
- Render Tag Input tags as transparent outline badges.

- Keep the darker inset panel inside frosted glass overlays.
- Match Alert text size, vertical centering, and status-row spacing to Toast.
- Use a minus indicator for checked checkboxes.
- Keep morph visuals in place while updating SVG geometry without a delayed icon swap.

- Keep the theme icon color synchronized with the active theme during morph transitions.

- Align Switch labels with the pill-shaped control.
- Keep Accordion borders between items only.

- Restore original SVG visibility when Morph is removed or its child icon changes.
- Respect the theme’s disabled-motion setting in chart entrances and motion actions.
- Preserve checkbox state while disabled and forward accessible names to the native input.

- Size Composer submission controls to their visible content and respect custom action labels.

- Preserve fractional Gauge ranges and normalize invalid numeric values.

- Fix preview deployment type checks for icon imports, native controls, table captions, and documentation examples.

- Use Bits UI for dialogs, sheets, popovers, menus, selection controls, tabs, disclosures, switches, and toggles while retaining Mielui styling and motion.
- Add menu keyboard navigation, typeahead, nested dismissal, and touch long-press behavior.
- Preserve canceled events, optional overlay labels, and conditional dialog actions.
- Keep option labels and disabled selections synchronized as collections change.
- Prevent obsolete streams, clipboard requests, and canceled reorder gestures from overwriting newer state.
- Reconcile toast persistence, durations, paused timers, and visible notification limits.
- Connect field and tooltip descriptions to their controls, and ignore inactive or composing shortcuts.
- Update scroll cues after content changes and support fractional progress ranges.
- Preserve preview state when switching to source code and reduce redundant status animation.
- Reset Avatar loading state on source changes and preserve native image callbacks.
- Keep skeleton placeholders inert, normalize pagination bounds, and prevent silent inset Card footer replacement.
- Add keyboard navigation to Toolbar and improve Color Picker labels, pointer ownership, and reduced motion.

- Preserve Slider handle identity while adopting Bits UI keyboard behavior and adding named form values and reset support.
- Use Bits UI for Combobox navigation and selection while preserving fuzzy search and Mielui styling.
- Show submission errors without losing Composer drafts or Question answers, and ignore obsolete completions.
- Keep disabled Button links from navigating and preserve native Input checkbox, radio, and file semantics.
- Repair active tabs after removal or disabling, and keep Command results synchronized during collection changes.
- Keep IME confirmation and canceled click handlers from activating commands or opening selection popups.
- Give toasts one visual exit and stop long response streams from animating every character.
- Preserve Group variant styling with a single joined divider.
- Forward overlay action refs and keep cancel actions from stealing focus after opening.
- Defer offscreen documentation previews while preserving mounted preview state.

- Remove the resting shadow from outline buttons while retaining their border and keyboard focus indicator.

- Show invalid input borders and reveal field errors with interruptible, reduced-motion-aware transitions.

- Restore pointer hover and selection in menus and floating panels by keeping their content above dismissal layers.
- Keep top and bottom drawers full width in the examples and give nested drawers separate backdrops and focus boundaries, with cancelled swipes returning to rest.
- Prevent date segments from overlapping on narrow screens and keep calendar popups above surrounding navigation.

- Keep advanced Studio spacing and motion overrides until their corresponding preset changes.
- Match date-picker trigger heights to their inputs and keep hover feedback distinct.
- Position Toast dismiss buttons at the top-right without covering the message.

- Use round send and stop icons in Composer without changing its toolbar variants.

- Show rejected attachments in compact error cards without decoding oversized image previews.
- Animate promise toast resizing in 50 ms and place title-only messages inside a fitted inset panel.
- Preserve Studio color, typography, spacing, and motion choices in CLI-compatible theme exports.

- Keep tab highlights aligned while their dialog or other parent animates in.

- Studio places advanced colors below the color controls and groups shape and motion presets with labeled advanced-settings buttons.

- Studio previews share one surface, with dedicated Charts and AI tabs and flush joins on advanced-setting controls.

- Studio uses full-width previews, a denser component gallery, and joined preset and copy controls.

- Studio shows a year of heatmap activity and pairs a full-width conversation with the narrower Composer layout used in its documentation.

- Fix TypeScript errors in composed controls, upload and toast motion, and documentation examples while preserving native event handlers and refs.

- Update the docs and installer workspace to Svelte 5.57.1 and SvelteKit 2.70.3, with svelte-check 4.7.6.

- Honor a consumer project's declared package manager and recognize Bun lockfiles in the CLI.
- Keep theme editing usable when browser storage is blocked or full, and report failed theme saves.
- Keep upload image previews stable as progress changes.
- Keep Dialog, Sheet, Popover, and File Diff state synchronized with their bound values and current props.
- Restore nested dialog stacking, single-layer dismissal, focus return, and shared background scroll locks.
- Cache the GitHub star count and retain the last valid count during temporary API failures.
- Preserve invoice-preview state when switching Studio tabs.

- Buttons, fields, selects, and floating surfaces share subtle light-catching edges that follow the theme’s shadow settings.

- Gauge defaults to a larger 120px display with proportional arcs and labels, and smoothly animates value changes.

- Pie chart tooltips use opaque inset surfaces.

- Menus, overlays, tooltips, conversation scrolling, and response text respect reduced motion and the theme’s disabled-motion setting.

- Accordion triggers retain their content relationships, and focus traversal includes editable text regions.

- Joined inputs, selects, and buttons share one control height across sizes. Table badges fit their labels instead of filling the cell.

- Segmented tabs keep even rail padding at fractional spacing and inside scaled containers.

- Keep inset Cards stable when their footer is removed during a state change.

- Studio groups edge highlight strength under its switch and restores the previous strength when re-enabled.

- Data Table uses the shared inset Table surface with a compact header.

- Alert dialogs announce their title and description. Select triggers and option lists now expose linked combobox semantics and accessible names.

- Combobox results collapse smoothly when filtered and stop locking page scroll as soon as the menu closes.

- Give Notch content more padding and keep its detached actions close to the panel.

- Dialogs restore focus when removed while open without interrupting a newly opened dialog.

- Escape closes only the deepest open dropdown or context submenu, keeping its parent menu available.

- Notch side actions unfold with synchronized shape and button motion, including interrupted hover changes.
- Morph and Shimmer stop active effects when inherited theme motion is disabled and clean up their theme observers on removal.
- Stopping a controlled Composer response no longer submits the preserved prompt again when the control returns to Send.

- Let Show More content fade into its surrounding surface without a mismatched background strip.

- Rework live chart motion with stationary pie highlights, area-fill sweeps, and staggered bar highlights; keep offscreen effects paused without trapping visible sweeps.

- Keep Reasoning duration labels spaced, respect reduced motion in copy feedback, and keep notch notification text wrapped during morphs.

- Guard font preference storage and isolate font state between server renders.

- Keep Accordion accessibility relationships valid when content is omitted and honor disabled Tag Input controls.
- Keep disabled Popover triggers closed and dismiss empty tooltips.
- Preserve invoice draft validation and reset stale filters when creating or locating an invoice in Studio.

- Scale Heatmap entrance timing with the theme motion setting.

- Keep page-outline jumps aligned after lazy previews load and track section headings by their document position.
- Remove content and icon morphing from Toast notifications, including stacked Notch notifications.

- Prevent hidden chart data tables from creating extra scroll space inside previews.

- Give chart loading and empty messages the shared inset card appearance.

- Match Heatmap tooltips to the shared chart surface and inset the Gauge arc inside a thicker track.

- Give Gauge arc ends a subtle corner radius.

- Keep Gauge loading and empty states compact without a nested card.

- Preserve the Heatmap calendar layout while loading or showing no activity.

- Match the Gauge background track to its colored arc thickness.

- Restore the Color Picker hue slider’s rainbow track.

- Match catalog preview button text colors to the active theme.

- Place Switch edge highlights on the thumb, keep passive surfaces flat, and preserve control edges when fields and buttons receive focus.
- Restrict the native file picker to one file when maxFiles is one.

- Keep File Upload removal animations inside the file list instead of jumping toward the viewport corner.

- Preserve the Gauge loading ring while using theme colors for its mask.
- Keep slider dragging focused without rescheduling focus on every pointer movement, and clear stale tab hover indicators when tabs disappear or become disabled.
- Honor motion settings and visibility for spinner, progress, and shimmer animations; update traveling highlights when theme motion settings change.
- Restore Notch swipe position and release pointer capture when gestures reverse or are cancelled.
- Handle large chart datasets without argument-limit failures and avoid rebuilding number formatters for every tick or slice.
- Parse small percentage color alpha and repeated CSS variable references correctly in Studio.
- Keep Studio header sizing within supported limits and reject font values that can break generated CSS declarations.
- Show indeterminate attachment progress for nonfinite values and refresh Morph text colors after theme changes.
- Evaluate nested Studio length calculations with correct arithmetic precedence and root-relative units.
- Include upstream license and attribution notices with CLI source installations without replacing the application's own license.
- Remove unused bundled documentation fonts that lacked accompanying license notices.
- Keep theme registry schema normalization compatible with its Elysia runtime.

- Avoid false tab-alignment test failures caused by browser subpixel rounding.
- Prevent dependency discovery from reloading browser tests during fresh CI runs.


---

Source: http://sveltekit-prerender/changelog/0.1.0.md

# @mielui/svelte 0.1.0 changelog

This document aggregates the release notes for this version. Review it before integrating or upgrading Mielui.

Large changes for this release have an LLM context page at [/changelog/0.1.0/llm.md](/changelog/0.1.0/llm.md).

## Docs

- Initialize Mielui from Sivir UI with renamed packages and docs, preserved MIT attribution, and sleeping-cat branding.
- Start Mielui releases at 0.1.0, independently of upstream Sivir UI versions.
- Simplify the sleeping-cat favicon and matching logo to a single outline.
- Use a mauve default accent with dark button labels and a lighter hover state.
- Restore the README’s overview, preview, documentation link, and agent-skill instructions.


---

Source: http://sveltekit-prerender/changelog/0.2.0/llm.md

# @mielui/svelte 0.2.0 LLM changelog

Context for coding agents upgrading or composing against this release. The human changelog is the short bullet list; this page covers only changes that need migration or composition detail.

## Borders

Themes accept `chrome.borders: 'single' | 'double'`. Omitted values retain the
existing double frame. Theme parsing preserves the setting and rejects unsupported
values. Studio saves and exports it under Appearance as Borders.

All double-frame surfaces honor `--mielui-border-inset-scale`, which defaults to
one without generated theme CSS. Single sets the scale to zero; double sets it
to one. This includes cards, menus, dialogs, sheets, toasts, Notch, code blocks,
diffs, inset tables, composers, and chart tooltips. Shared modal and inset frames
scale only their decorative inset. Panel cards also scale the inner border ring.
Notch keeps its outer SVG outline, hides the inner outline, and expands the fill
to the outer clip in single mode.

Keep inset variants, their content padding, footers, and subpart composition.
The setting changes the double-frame treatment, not the component variant.
Existing single-border surfaces stay single. Glass, shadows, focus rings, and
edge highlights remain independent. New double-frame implementations must follow
this token rather than introduce fixed inset padding or a fixed inner ring.

## Toolbar depth exploration

Toolbar.Root stays flat by default (`variant="default"`). Set `variant="depth"`
on Root to enable the floating shell. Its Button, Link, and Item inherit the
variant reactively, including through wrapper elements, and use the shared
`--mielui-toolbar-raised` elevation, while selected Items use
`--mielui-toolbar-pressed`. These theme-owned tokens include a contact shadow or
inward shade and flatten with controlShadows: false. Compose
focus rings with the appropriate elevation. Keep these treatments tied to theme
shadow tokens; do not add fixed shadows to toolbar examples. The callable Toolbar
used by composers retains its flat layout. The only public addition is Root's optional `variant: "default" | "depth"` prop.

Glass Tooltip.Content uses the ordinary theme foreground to match its card-based
translucent surface. Solid tooltips keep the dedicated tooltip color pair. Rich
shortcut content should inherit the tooltip foreground, not the page's muted
foreground, so it stays readable with both treatments.

## Changing numeric readouts

Use `numberShuffle` from the existing action subpath for changing HTML numeric
readouts. Give it a text-only span with the current value as source text. Pass
the raw number as `value` and format its numeric argument for currencies, units,
or decimals; a formatter returning a captured display string will not animate.
Leave native editable inputs, SVG labels, and static identifiers unchanged.
Custom render snippets should compose the same action. Never attach it to hidden
tooltip sources that get cloned, because cloned DOM does not retain the action.
Source-copy manifests that include these parts must also include both the action
index and its render module. The action owns reduced-motion behavior and cleanup.

## Chart tooltip surfaces

Chart tooltips inherit `overlaySurface()` and the shared inset frame. Do not
override the frame padding with fixed spacing or add an inner border: its scaled
padding already follows single/double borders. Keep the inner surface translucent
in glass mode. Heatmap tooltip content is cloned into the shared tooltip bubble,
so its content stays transparent and the bubble owns the glass treatment.

## Chart palette and rounder defaults

Default chart colors are `--chart-1` through `--chart-5`, ordered purple, blue,
red, green, yellow. Use `var(--chart-N)` in series config instead of hardcoded
example colors. Explicit colors still override the fallback. Heatmaps use the
first color for intensity and gauges use it for the primary tone; status tones
keep their semantic colors. Studio saves palette edits in the active mode's
theme tokens. The default radius scale is now 8/10/14/20px. Custom tokens and
other radius presets remain available.

## Inset layout and glass

Studio exports `--mielui-inset-position` as `top` or `bottom`. The shared internal
`insetLayout` action moves exposed chrome strips and restores authored order
when the token is absent. Consumers may pin an individual frame with
`class="[--mielui-inset-position:top]"`. Use this for headers whose meaning
depends on staying above content, such as package-manager tabs. Do not force
a global preference onto both regions of a data table. Single-border mode removes decorative inset spacing on cards and ordinary
overlays. Inset DataTable, Composer, CodeBlock, and documentation preview
panels retain their structural gutter in both modes. Set the frame inset locally
for those layouts; do not change the global border scale or ordinary cards.

`DataTable.Root variant="inset"` is opt-in. Compose `Toolbar`, `View`, then a
footer wrapper marked `data-ui="data-table-footer"` containing `Summary` and
`Pagination`. These are the same parts used by the default high-level rendering.
Omit or replace regions through the existing children snippet. The footer
marker applies compact strip styling without introducing a new subcomponent.
Known page counts use Mielui Pagination; unknown counts retain previous/next
controls.

Glass uses a translucent outer chrome and a separate translucent card fill
inside. Do not make composer input panels fully transparent or opaque: both
destroy either inset contrast or the backdrop. Preserve the shared surface
helper, reduced-transparency fallback, and single-border geometry.


---

Source: http://sveltekit-prerender/changelog/0.1.1/llm.md

# @mielui/svelte 0.1.1 LLM changelog

Context for coding agents upgrading or composing against this release. The human changelog is the short bullet list; this page covers only changes that need migration or composition detail.

## Navigation and repository tooling

FullscreenNav and its component subpath are removed. Compose Sheet.Root, Sheet.Trigger, and Sheet.Content with a Sheet.Title, Sheet.Description, Sheet.Close, and ordinary navigation links. Keep the link list in a scrollable region and close the sheet when a link is selected.

The repository now uses pnpm with Node.js. Install with `pnpm install --frozen-lockfile` and run workspace commands with `pnpm --filter <workspace> run <script>`. Package and registry tests use Vitest. TypeScript tooling runs through tsx. Existing component imports still use `@mielui/svelte/components/<name>` even when the source lives in `blocks/` or `ai-components/`.

## Dialog naming

Replace `Modal` with `Dialog` in imports and composed parts. Use `@mielui/svelte/components/dialog` and `mielui add dialog`. Rename `ModalProps`, `ModalContentProps`, and the other component prop types to their `Dialog` equivalents. The composed parts and behavior remain the same. AlertDialog uses Dialog internally and remains the confirmation component. Modal is not retained as an alias.

## Toast composition

Toast is now a namespace with Root, Content, Footer, Title, Icon, Actions, Action, and Close. Replace `<Toast toast={item} />` with `<Toast.Root toast={item} />`. Toaster and toast.success() keep their existing imports and behavior. Root without children uses these public parts. With children, it renders only the supplied composition. Put description or custom content in Content and place Title and Actions inside Footer. Actions defaults to the toast actions; custom Action parts take an action object with label, callback, and optional variant. Close calls the toast exit callback. Root itself does not register a toast or create a portal. Use toast() and Toaster for timed, portaled notifications. Use persistent: true for a decision that must wait for a user. There is no progress bar. Hover and keyboard focus both pause timed notifications.

## Kbd and Show More

Replace Shortcut and ShortcutProps with Kbd and KbdProps. Import Kbd from @mielui/svelte/components/kbd or the package root. The shortcut string prop and ontrigger callback retain their behavior. The previous components/shortcut entry is removed. Show More is now grouped with Blocks in source and docs; its public import stays @mielui/svelte/components/show-more.

## Slider range and direction

Slider keeps a number value by default. With range enabled, bind a typed [number, number] pair; onValueChange receives the same pair shape. Optional thumbLabels supplies separate accessible names. Handles retain minimum and maximum identity and stop at each other. dir="rtl" reverses the visual direction without reversing the pair. Direction can also inherit from a parent. Keep state values ordered and within min/max; rendering normalizes invalid values without emitting a user change callback.

## Group composition

Import Group as a namespace and compose Root, Separator and Text. Put a Separator between adjacent controls, including outline buttons. Root is an accessible group with normal Tab navigation, not a toolbar or toggle-selection manager. Label it with aria-label or aria-labelledby. For vertical groups set Root orientation="vertical" and Separator orientation="horizontal". Text defaults to a div; use as="label" and for to name an input. Nested Roots retain their own corner rounding and receive a gap.

## Overlay surfaces and Alert layout

Set surface="glass" on the Content part of Dialog, AlertDialog, Sheet, Popover, HoverCard, Tooltip, Command, Select, Combobox, ColorPicker, DropdownMenu, and ContextMenu. Set it separately on SubContent for submenus. Solid remains the default. Toast.Root accepts surface, and toast options accept the same value. The shared glass treatment belongs on the overlay frame; its inset child must stay translucent so an opaque card does not hide the blur.

Alert keeps Root, Title, and Description. Description now occupies the upper inset and Title appears in the lower status row next to the icon. Do not add another opaque wrapper around these parts.

## Hugeicons

HugeiconsIcon is available from the package root or as the default export of @mielui/svelte/hugeicons-icon. Import icon data as named exports from @hugeicons/core-free-icons. Version 4.3.3 does not ship declarations for individual icon subpaths, so those paths fail strict TypeScript checks. The renderer emits SVG children during SSR. Icon data is not a Svelte component, so render it through HugeiconsIcon instead of passing it to component-valued icon slots. Copied components need the shared renderer as well as the icon-data dependency.

## Heatmap and Morph

Heatmap's default rendering uses the same exported parts as custom compositions. Root children receive computed days and total. Grid children receive the computed day list; pass one of those days to Cell. Counts and levels use only visible dates, dates use UTC, duplicate dates use the final input entry, and missing dates become zero. Explicit endDate avoids a moving empty-data range.

Morph is a Svelte action imported from @mielui/svelte/actions/morph. Apply use:morph={{ key, duration: 220 }} to a visual span inside an existing control. It samples SVG geometry with matching viewBox values and crossfades text or incompatible SVGs. Keep interactive controls and their accessible names outside the animated wrapper.

## Heatmap entrance direction

Heatmap.Root accepts animation="rows" | "columns" | "none", defaulting to rows. Reduced-motion preferences disable the entrance regardless of this value. Remount the example to replay; changing the animation selection in the docs also remounts the chart.

## Glass inset contrast

Glass overlays retain a darker translucent inset inside the frosted outer frame. Do not clear the inner panel background when composing Dialog, Command, Sheet, Toast, or Popover surfaces.

## Documentation access

Use /llms.txt to discover component, action, skill, and release-note Markdown. /llms-full.txt combines these references. The rendered component API tables and Markdown prop tables are extracted from component source types; regenerate them with the docs generate:api script when changing a contract.

## Table, Native Select, and Skeleton

Compose Table with Root, Header, Body, Footer, Row, Head, Cell, Caption, and an optional ScrollArea around Root. Root's inset variant changes presentation only. Use native scope and aria-sort attributes and compose sorting, selection, and pagination with existing controls. Table does not own those states.

NativeSelect.Root wraps a real select element. Bind a string for a single selection and a string array when multiple is true. Its size prop is the native visible-row count, not a visual size name. Compose Option and OptGroup inside Root.

Skeleton accepts variant="default" or variant="shimmer". The default remains static. The standalone shimmer action takes no options; apply it to a non-void visual container. It owns and removes an inert visual overlay, respects reduced motion, and stops its animation on destroy. Mielui now requires Svelte 5.29 or newer because Skeleton uses an attachment internally.

Composer.Root also accepts surface="solid" or surface="glass". Keep Input and Toolbar as public parts; the glass frame retains the darker inset. Shimmer also detects plain-text containers and clips the moving highlight to their letters.

Gauge preserves any positive finite max, including fractions. An invalid max falls back to 100; a non-finite value falls back to zero. Values are clamped to the effective range.

## Bits UI interaction ownership

Mielui wrappers now depend on Bits UI 2.19.2, requiring Svelte 5.33 or newer. Source-copy manifests include Bits UI and the shared transition/surface helpers. Keep importing Mielui parts; do not replace them with styled upstream examples or add a second focus trap, Escape listener, or outside-click controller around a Bits-backed overlay. Mielui still owns styling, inset surfaces, and motion tokens. Combobox and Slider now also use direct Bits primitives. Combobox retains a private fuzzy-search registry. Slider retains a narrow pointer adapter for grab offset, crossing clamps, and stable minimum/maximum handle identity; do not replace that adapter with upstream auto-sorting.

Menus use Bits collection navigation, including arrows, typeahead, disabled items, submenus, and Context Menu long press. Consumer click handlers run before internal activation where supported, and preventDefault cancels that activation. Conditional overlay titles, descriptions, and footers release their registrations when removed. Select keeps its closed item tree inert to register labels before first opening; do not put unbounded background work in option snippets.

## Lifecycle and accessibility corrections

A replaced or unmounted Response Stream cannot complete a later run. Reorder cancellation preserves the latest item payloads and membership instead of restoring an obsolete array. Toast updates reconcile persistence and duration and preserve interaction pauses. Composer and Question catch rejected submission handlers, retain the current draft/answer, display their error message, and allow retry. Use onError for application reporting; controlled error status still belongs to the application.

Input and Textarea descriptions merge with external aria-describedby references. Tag Input excludes disabled hidden fields from form data and ignores IME confirmation while composing. Tooltip descriptions attach to focusable descendants and the moving shared bubble is decorative. Kbd ignores consumed/composing events and inactive owners. Progress supports native naming attributes and finite fractional ranges. Docs previews remain mounted while their source is shown, so consumers of preview examples should still clean up timers and observers normally.

## Static semantics and composition boundaries

Badge no longer announces every instance as a status region. Set role="status" explicitly for a changing status badge that should be announced. Message.Actions is a group with ordinary Tab navigation. Toolbar implements roving keyboard focus, including orientation, RTL, Home, and End, and leaves text-editing keys to nested fields.

An inset Card accepts one Footer at a time. Multiple Footer instances now throw a clear composition error instead of silently replacing content. Conditionally remove the previous Footer before mounting another. Avatar resets loaded/error state when its source changes and ignores late events from previous images. Skeleton placeholders are inert, including delayed placeholders. Pagination normalizes invalid counts/pages and bounds the sibling window.


## Remaining audit contracts

Card.Title defaults to h2 and accepts level from 1 through 6. Set level=1 only when the card title is the page heading. Alert.Root announcement defaults to off; choose polite for background status and assertive for urgent interruption, independently of the visual variant. icon=false omits the icon and an icon snippet replaces it. Breadcrumb.Item requires current=true for aria-current; it no longer imports router state. Button and Badge use href to select their native attribute branch, including empty-string links. A disabled Button link drops href and leaves sequential focus; loading stays focusable unless the caller explicitly sets tabindex=-1.

Input file mode binds files rather than value. Checkbox and radio modes preserve value for form submission and expose checked; same-name radio checked bindings synchronize within their native form and tree. Text/numeric values are strings or numbers. Question single/text modes use a string answer; multiple uses string[]. Accordion and ToggleGroup likewise require value/callback shape to match type. Do not carry broad union bindings into a fixed mode.

Slider name submits a scalar or repeated minimum/maximum values; use FormData.getAll for range mode. Disabled values are omitted, form can target an external form, and reset restores the initial value. Root id and element identify the wrapper; ARIA naming reaches its handles. Keep values ordered and use thumbLabels to distinguish range handles. Select and Combobox click callbacks receive the native event before click activation; preventDefault cancels that activation. Input-style Combobox may open on focus separately.

TaskSteps retains its default export and data-driven form. Import the namespace from the component subpath for Root, List, Item, Indicator, Label, Meta, and Summary. Root children receive the same rows and completed/total state as the default form. Put row parts inside Item; Summary's default text is debounced, while custom summary snippets own their announcement timing. ReorderList similarly retains its callable export, but rows now use Item/Handle/Content. Use its row(item) snippet to compose those parts. Drag starts only on Handle, keeping links and controls inside Content usable.

Message.Root layout replaces the default layout; compose Avatar, Body, Metadata, Name, Time, Status, Content, and Actions there. Name/time/avatar/status use Root fallbacks. Tool.Root composed=true renders the supplied Trigger and Content directly; omit composed for the existing automatic header/content. Both paths use the same public parts and disclosure lifecycle. ColorPicker.Content children replace the default Plane/Hue/Preview/HexInput/Channels/Presets layout, sharing Root's color state. ShowMore preview hides and inerts full content while collapsed; its trigger snippet must spread the supplied button props.

Toast removal immediately leaves active state; the mounted Toaster owns the only visual exit. Do not add a second removal timer or global outro. ResponseStream uses rolling character presentation only below 4,000 UTF-16 code units and uses plain text for longer responses or reduced motion. This bounds rendering work without delaying incoming text. Its private run controller ignores obsolete iterator completions and callbacks after disposal.

Command mounts panel and scrim immediately while retaining Bits Dialog focus and dismissal. Search icon/count/announcement and Results empty slots customize presentation without replacing the search controller. Tabs can use manual activation so arrows move focus and Enter/Space select. Removed or disabled active tabs select the first enabled trigger. ContextMenu supports bind:open and onOpenChange. Sheet.Header close=false lets a composed Sheet.Close own the close position; all overlay action elements are bindable and their click handlers can cancel dismissal.

The shared utility implementation now lives in private actions, overlays, and positioning modules. Public utils imports remain unchanged. Copied installations must include the _internal/utils dependency as well as field metadata, submission, disclosure, and other helper files declared by component manifests. Do not copy a lone wrapper file or add a second overlay manager around Bits-owned behavior.


## Tooltip scope and rich content

Tooltip.Provider owns an isolated moving bubble and disposes its listeners and surfaces. Omit Provider to retain the shared default. Content rich=true preserves passive formatting and basic SVG in the visual bubble; descriptions remain hidden source nodes linked from the actual trigger. Cloned visuals are inert and aria-hidden, discard duplicate IDs and form/event behavior, and do not instantiate custom elements again. Interactive content belongs in Popover. Plain Content retains the existing text roller and shared motion.

## Form and input families

Field is a composable accessibility/layout wrapper, not a form state manager. Spread the attributes from Field.Control onto the actual input (or NumberField.Input / OTPField.Root), keeping framework attachments intact. Use Field.Label, Description and Error as separate parts. Automatic metadata discovery handles optional parts after hydration; for SSR and no-JavaScript error relationships, give description/error parts explicit IDs and pass describedBy/errorId to Control. Fieldset.Root and Legend retain native grouping and disabling.

Form.Root forwards native form attributes and symbol-keyed attachments. Spread a SvelteKit remote form or enhance result directly onto it; do not add a competing preventDefault handler or serialize its fields a second time. Pass the remote pending count to Root; Form.Submit inherits it without removing submitter name/value. Keep schema validation, authentication, mutation, and resetting with the remote handler/application. Remote functions remain an explicit experimental SvelteKit opt-in; the component package does not require enabling them. ErrorSummary accepts message/controlId issues, including global messages without a target, and exposes a ref for deliberate focus. Field.Error reveals using the shared press duration and respects reduced motion. When focusing an error summary, disable individual error live announcements to avoid duplicate reading.

NumberField owns a number-or-undefined value and one native numeric input. Configure submission and bounds on Root, spread Field.Control on Input, and keep Root disabled/required state consistent with Field.Root. Root inputId customizes the default label/input relationship; overriding Input.id directly also requires Label.for. Typing retains native invalid values for validation rather than silently clamping them. OTPField uses Bits PinInput with one real input and decorative Cell parts. Keep the provided cells in order; reducing length truncates the bound and submitted value. Supply minlength with required to reject incomplete codes.

Calendar and RangeCalendar use @internationalized/date values, not JavaScript Date. Use DatePicker or DateRangePicker for segmented input plus popup composition. Their form adapters submit ISO values, omit disabled values, handle native reset, and focus visible segments on validation failure. Keep named inputs inside the picker composition and use stable date values for SSR.

Drawer uses the exact vaul-svelte prerelease pinned by this version together with Bits Dialog. This wrapper supports modal drag dismissal and nested drawers. Nonmodal mode and snap-point control are intentionally absent because they failed compatibility checks with the installed Bits version. Do not expose those upstream options through rest props. Compose Portal, Overlay, Content, Handle, and the region parts explicitly.

Toolbar's existing callable export remains. New compositions import the module namespace and use Root, Button, Link, Group, Item and Separator. Group's single/multiple mode determines its value type. Separator is also available as an independent component.

### Floating layers and nested drawers

Bits floating wrappers copy the computed z-index of their inner content node. Set the surface's z-index as well as the wrapper's; a wrapper class alone is overridden by Bits' inline style and can leave dismissal layers intercepting the whole menu. Mielui floating surfaces use 130. Menu surfaces consume the shared `--bits-floating-*` geometry variables because root menus and submenus expose different component-specific prefixes. Each Drawer Portal owns a stacking context for its content and backdrop. Nested portals paint above their parents while floating menus remain above every drawer level; do not increase modal z-index with nesting depth. Drawer nesting uses Vaul Root's nested mode without the upstream NestedRoot parent-scale mutation; focus and dismissal remain owned by Bits. Constrain Drawer regions for readable content rather than narrowing the top or bottom surface in standard examples.


### Data Table state and filters

DataTable.Filters accepts an optional children snippet. Place DataTable.Filter inside it to join the search input and filter picker with Group. Active facets and Reset render outside the joined control. Omit children when no joined input is needed. The picker stays visible but disabled when every available filter is shown. Filter, facet, reset, and sort controls use the normal control height.

Create the TanStack Table v9 instance in application code with explicit features and row models, then pass it to DataTable.Root and its parts. Use the same instance for Sort, ColumnHeader, Filter, Filters, Facet, View, Summary, and Pagination. Sorting menus set explicit field/direction choices rather than cycling on a header click. Filter is a plain string column search; Filters and Facet store discriminated clauses. Assign dataTableFilter as the filterFn for columns using the supplied facet editors, or provide a custom editor and matching application filterFn. Date facets use ISO calendar-date strings, not JavaScript Date objects. Manual server filtering and sorting remain application-owned; validate any persisted or remote filter input server-side. Supply stable getRowId values for selection across pages. The header selection control selects only the current page. Public snippets allow changing cell content, summaries, and empty states without replacing table state or writing a second rendering path.

## Composer submit buttons

Composer.Submit now renders a round icon button by default. Send, queue, stop, and loading states keep their accessible action labels. Use the existing children snippet for custom content. The Root, Input, Toolbar, and Actions composition and Toolbar's chrome/inset variants are unchanged.

## Form validation summaries

Pass remote validation issues directly to Form.ErrorSummary. An issue path resolves to native field names, including dot-separated object paths and bracketed array indices. controlId remains available for explicit DOM links. Form-level issues have no target. Keep Root pending connected to the request state: ErrorSummary focuses after a submission settles with errors, once per submission, but does not steal focus for initial errors. Use focusOnError={false} to retain application-owned focus. Standalone summaries outside Form.Root do not automatically focus.

## Toast dismiss placement

Toast.Close defaults to absolute placement at the top-right of Toast.Root. The root reserves message space when Close is present, including custom compositions. Do not allocate a trailing footer column for Close; place it directly inside Root unless you intentionally override its position.

## File uploads

FileUpload.Root owns selection validation and per-file upload state. Supply an onUpload promise callback and pass its AbortSignal to the transport. Resolve only after the server accepts the file. Report actual progress through onProgress; omitting it leaves progress indeterminate. Remove aborts an active request and removes the local item, but does not delete server files. List exposes each entry; Item supplies context for Preview, Details, Progress, Status, Retry, and Remove. Rejected selections stay visible and cannot retry. Humanspeak Svelte Motion is a required dependency.

## Studio presets and inherited surfaces

Studio JSON now uses the public Theme format for all overrides. Run init --preset ./mielui-theme.json for a new setup and import the generated styles.css, which loads ui.css before theme.css. Existing setups use add theme with the same file and retain their stylesheet imports. The CLI validates local JSON before generating CSS; it does not execute the file's contents.

Omitting surface now inherits --mielui-surface through CSS style queries. Set the variable to glass on :root for global glass, including portals. Explicit surface="solid" opts out; explicit surface="glass" opts in. Browsers without style-query support retain solid defaults. Export the variable in Theme.tokens.shared.

Title-only toasts render Icon and Title inside Content. Description toasts keep Content above Footer. Use the same parts in custom compositions. Toast uses Humanspeak Svelte Motion for layout changes. Content and status icons update directly without Morph.

## Checkbox sizes

Checkbox now accepts size="sm" | "md" | "lg" for 14, 18, and 22px boxes. The default is md (18px); use sm explicitly for dense layouts. Size controls the visible box and indicator, while the label remains part of the click target. Native input size is no longer forwarded.

## Overlay state and nesting

Dialog, Sheet, and Popover context reads the bound open value directly. Internal interaction setters update the binding and call onOpenChange once. Do not mirror these props into a second state object with effects in both directions.

Bits UI owns focus trapping and dismissal. Dialog and Sheet use the internal overlay presentation helper for nesting order, parent recession, and one Escape dismissal per event. Background scroll locks are shared and reference counted with Popover. Keep Bits preventScroll disabled when using that shared lock, and restore trigger focus after the inert-background cleanup has finished. Do not attach a second focus trap or click-outside listener to these components.


## Charts and edge activities

Chart and PieChart are composable namespaces backed by LayerChart. Import them from the public `components/chart` and `components/pie-chart` paths. Place marks inside Plot and compose the Legend and Tooltip separately. A Cartesian mark's key identifies a configured data series; pie data uses category keys and numeric values. Use animation="live" for ongoing highlights on the actual geometry, "reveal" for entry and value updates, or "none" to disable animation. Live highlights do not change values.

Notch.Root owns controlled open state, side, and surface. It starts closed and is nonmodal. Place arbitrary content inside Notch.Content; Header, Title, Description, Actions, and Close remain optional. An omitted surface inherits the global surface setting. For notifications, replace the existing Toaster with `<Toaster variant="notch" side="top" />`; do not add a second host, since the first mounted host owns the shared notification store. Existing toast calls, promise updates, actions, and dismissal timers still apply.


Notch's triggered mode auto-dismisses after 5000ms by default, pausing while hovered or focused. Set duration={0} for indefinite activities. In mode="peek", a collapsed edge handle stays visible and expands on hover, focus, or tap; optional Notch.Peek supplies its noninteractive content as a sibling of Content. Notch toasts disable the Notch timer and retain the existing toast timer policy, so loading promises remain persistent. Swipe toward the attached edge or use Escape to dismiss; Close is an optional part, not required structure. Compose narrow vertical content for side placements and horizontal content for top or bottom.

## Control and surface edges

Filled controls use `--elevation-control-edge` for a top highlight and lower inset shade. This token does not draw a perimeter border: keep the semantic border on outlined fields and controls, and keep primary buttons’ optional stroke tied to `--color-primary-stroke`. Compose the edge with `--focus-ring` during keyboard focus rather than replacing the edge or recoloring it. Ghost and quiet buttons remain flat. Do not use `--elevation-control` as a replacement for this edge on grouped controls: its full inset border would draw extra seams.

The shared surface elevations include `--elevation-surface-edge`, so popovers, menus, cards, and dialogs inherit the same subtle top light in both solid and glass modes. Continue using their existing elevation tokens instead of adding local white rings or pseudo-elements. The existing master, control, surface, and dialog shadow settings disable the relevant decoration.


## Gauge sizing

Gauge defaults to 120px rather than 28px. Set size explicitly for inline indicators and compact activity panels. When strokeWidth is omitted, the arc scales with size; explicit strokeWidth retains caller control. Existing value, max, tone, label, and children compositions remain available.

Disabled elevation tokens use a transparent zero-size shadow rather than `none`, so composed focus-ring shadows remain valid. Apply the control edge to the outer field wrapper only; nested inputs must use `shadow-none`. Flat ghost controls and unselected text tabs stay flat.

## Edge highlight strength

Theme JSON accepts `chrome.edgeHighlight`, a finite number from 0 to 1. Missing
values use 0.5, so existing themes get half-strength light-catching inset edges.
The generated CSS writes `--mielui-edge-highlight` and resolves the existing
control and surface elevation tokens in both modes. Keep composing those elevation
tokens rather than hardcoding white inset shadows. Kbd uses the same control edge.
This setting leaves border, focus, dark inset shading, and cast-shadow opacity
unchanged. The existing shadow switches take precedence over edge strength.


## Notch side actions and notification navigation

Compose `Notch.SideAction` beside `Notch.Content` under the same Root. `side="start"`
and `side="end"` place normal Button content left/right of a horizontal notch or
above/below a lateral notch. Icon-only actions need an accessible label. Actions
retract until the notch is hovered, focused, or tapped; keyboard focus can reach
and reveal them. Keep Content mounted so the measured geometry can position them.

The notch Toaster renders only the selected notification. New arrivals become
selected, and detached previous/next controls cycle existing active notifications.
Navigation does not recreate notifications or restart their timers. Hidden
notifications retain their original lifetime; persistent loading remains active.
Escape and swipe dismiss the selected item, then reveal another active notification.
Do not mount a separate Toast or live region for every hidden carousel item.

## Live chart motion

Live cartesian effects run inside unchanged data geometry: areas sweep their fill,
bars sweep within their clipped bounds, and lines carry a single highlight.
Visibility observers must target the stationary SVG viewport, not the moving
mark: observing a highlight outside its clip can pause it permanently before entry.
Pie segments brighten sequentially without rotation or angle changes. Pause the
effect when a segment is active so pointer and keyboard inspection remain stable. All loops honor reduced motion and the theme duration.

### Morphing wrapped notification content

Apply Morph separately to each title, description, and icon region. Do not apply it to a container containing interactive controls. Text morphs inherit the region’s whitespace rules so long descriptions wrap at the available width. Toast notification content and icons update directly. Do not apply Morph to stacked Notch notification content; the outer panel retains its size transition.

### Chart state surfaces

Cartesian and pie loading and empty messages use the shared inset Card, with the placeholder visualization behind the message. Compact Gauge states retain the meter footprint without a card wrapper. Keep live status announcements. Heatmap tooltips now use the same opaque inset frame as other chart tooltips. Gauge’s track and colored arc share a width of 9.75% of its diameter by default, with a 3px minimum. An explicit strokeWidth sets both widths.

### Gauge and Heatmap live motion

Use Gauge animation="live" or Heatmap.Root animation="live" for continuous highlights. Do not add DOM queries, animation attachments, observers, or timers in consuming examples. Gauge accepts reveal (default), live, and none; Heatmap retains rows (default), columns, and none and adds live. Both preserve data values and honor reduced motion, disabled theme motion, hidden documents, and viewport visibility. Gauge and Heatmap now handle loading and empty presentation internally.

### Gauge and Heatmap data states

Pass loading=true while data is pending. Heatmap treats days=[] as unavailable data and renders neutral calendar cells; an explicitly supplied day with count=0 is still real data. Gauge accepts value=null for a missing measurement, while value=0 remains a valid meter reading. Both retain their layout, announce unavailable states, and suspend live effects. Consumers should not branch into separate Skeleton or Card trees for these states. Custom Heatmap compositions inherit state handling through Summary, Cell/Grid, Detail, and Tooltip.

## Multiple selection

Select.Root and Combobox.Root accept `type="multiple"` with `bind:value` bound to a `string[]`. Their `onValueChange` callback receives the full array. Omitting `type`, or using `type="single"`, preserves the existing string value and single-selection behavior. Keep the usual Trigger, Content, and Item composition. Multiple selection toggles an item's membership and keeps the menu open so users can make another selection. Use an empty array to clear a multiple selection.

## Number shuffle

Import `numberShuffle` from `@mielui/svelte/actions/number-shuffle` and pass `{ value, format?, duration? }`. Attach it to a text-only element that renders the final formatted value as ordinary text. Put icons and markup outside that element. The action owns an aria-hidden visual copy; the source remains available to assistive technology. Gauge uses it for its default numeric center. When supplying custom Gauge children, attach the action to the numeric text if it should roll too. Reduced motion and zero theme duration bypass rolling.

## Control edge placement

Apply the shared control edge to the part that is raised or editable. For Switch and Slider this is the thumb; tracks and progress fills stay flat. Passive metadata and grouping wrappers do not receive control elevation. Composite fields use one edge around their editable boundary. Compose focus shadows with the edge token rather than replacing it.

## Svelte compiler baseline and private implementation modules

Mielui now requires Svelte 5.56 or newer. Template declarations use `{const value = $derived(expression)}` to preserve reactive behavior; do not replace legacy `{@const}` with a plain nonreactive declaration. Upgrade the consuming compiler before installing this release.

Public component exports and composition remain unchanged. FileUpload, Tabs, Notch, tooltip visuals, chart domains, theme parsing, and overlay lifecycle responsibilities now live in private helpers. CLI manifests include those files; retain them when copying sources. Motion loops must respect the theme's zero duration, live reduced-motion changes, hidden documents, and offscreen visibility. Use the private motion-loop attachment for CSS loops; imperative animations retain their own play/pause lifecycle.

## Source-copy attribution

The CLI keeps Mielui's LICENSE, LICENSE-COSS, and UPSTREAM.md under `notices/mielui/` inside the configured source directory. Keep these notices with copied component source when redistributing it. This directory is separate from the consuming application's root license. Mielui is independently maintained and derived from Sivir UI; use Mielui's versioned component guidance rather than assuming current Sivir APIs are interchangeable.


---

Source: http://sveltekit-prerender/changelog/0.1.0/llm.md

# @mielui/svelte 0.1.0 LLM changelog

Context for coding agents upgrading or composing against this release. The human changelog is the short bullet list; this page covers only changes that need migration or composition detail.

Mielui starts at version 0.1.0. The imported Sivir UI package was version 0.3.3; the two projects now have independent release numbers.

Use `@mielui/svelte` for imports and `mielui` for CLI commands. Sivir release notes are retained in `docs/upstream-changelog/` as historical reference, outside Mielui's active changelog. The imported component APIs are unchanged by this version reset.

The default brand is `#ba7ca5`. Primary button labels use `--color-on-primary` with dark ink; do not hardcode white text on the new default accent.


---

Source: http://sveltekit-prerender/docs/components/accordion.md

# Accordion

Vertically stacked disclosure panels. Single or multiple expanded items.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add accordion
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| disabled | boolean \| undefined | false | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| collapsible | boolean \| undefined | true | No | No |
| type | "single" \| undefined \| "multiple" | — | No | No |
| value | string \| undefined \| string[] \| undefined | — | No | Yes |
| onValueChange | ((value: string \| undefined) => void) \| undefined \| ((value: string[]) => void) \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import Root from './accordion.svelte';
import Content from './accordion-content.svelte';
import Item from './accordion-item.svelte';
import Trigger from './accordion-trigger.svelte';

export type AccordionProps = DefaultProps & {
    collapsible?: boolean;
} & (
        | {
              type?: 'single';
              value?: string;
              onValueChange?: (value: string | undefined) => void;
          }
        | {
              type: 'multiple';
              value?: string[];
              onValueChange?: (value: string[]) => void;
          }
    );

export type AccordionItemProps = {
    value: string;
    disabled?: boolean;
    children?: Snippet;
} & DefaultProps;

export type AccordionTriggerProps = {
    children?: Snippet;
} & DefaultProps;

export type AccordionContentProps = {
    children?: Snippet;
} & DefaultProps;

export type AccordionContext = {
    isOpen: (value: string) => boolean;
    toggle: (value: string) => void;
};

export { Content, Item, Root, Trigger };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Accordion from '@mielui/svelte/components/accordion';
</script>

<div class="w-full max-w-md">
    <Accordion.Root type="single" value="item-1">
        <Accordion.Item value="item-1">
            <Accordion.Trigger>Who can access this workspace?</Accordion.Trigger>
            <Accordion.Content>
                Only invited members can open projects. Owners can invite people and change their
                roles.
            </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="item-2">
            <Accordion.Trigger>Can I change my plan?</Accordion.Trigger>
            <Accordion.Content>
                Change your plan from Billing. New limits apply immediately, and your existing
                projects stay available.
            </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="item-3">
            <Accordion.Trigger>How do I export my data?</Accordion.Trigger>
            <Accordion.Content>
                Open Settings and choose Export. The archive includes your projects, files, and
                member list.
            </Accordion.Content>
        </Accordion.Item>
    </Accordion.Root>
</div>
~~~~

### Multiple Mode

~~~~svelte
<script lang="ts">
    import * as Accordion from '@mielui/svelte/components/accordion';
</script>

<div class="w-full max-w-md">
    <Accordion.Root type="multiple">
        <Accordion.Item value="a">
            <Accordion.Trigger>Item A</Accordion.Trigger>
            <Accordion.Content>Content A. Any panels can be open together.</Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="b">
            <Accordion.Trigger>Item B</Accordion.Trigger>
            <Accordion.Content>Content B. Opening this keeps Item A open too.</Accordion.Content>
        </Accordion.Item>
    </Accordion.Root>
</div>
~~~~

### Single Mode

~~~~svelte
<script lang="ts">
    import * as Accordion from '@mielui/svelte/components/accordion';
</script>

<div class="w-full max-w-md">
    <Accordion.Root type="single">
        <Accordion.Item value="a">
            <Accordion.Trigger>Item A</Accordion.Trigger>
            <Accordion.Content>Content A. Only one panel is open at a time.</Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="b">
            <Accordion.Trigger>Item B</Accordion.Trigger>
            <Accordion.Content>Content B. Opening this closes Item A.</Accordion.Content>
        </Accordion.Item>
    </Accordion.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/accordion](/docs/components/accordion).


---

Source: http://sveltekit-prerender/docs/components/alert.md

# Alert

Inset callout with separate visual variant and optional polite or assertive announcements.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add alert
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | AlertVariant \| undefined | 'info' | No | No |
| icon | false \| Snippet<[]> \| undefined | — | No | No |
| announcement | "off" \| "assertive" \| "polite" \| undefined | 'off' | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Root from './alert.svelte';
import Description from './alert-description.svelte';
import Title from './alert-title.svelte';

export type AlertVariant = 'info' | 'error' | 'success' | 'warning';

export type AlertProps = {
    variant?: AlertVariant;
    icon?: Snippet | false;
    /** Announcement urgency, independent of appearance. Defaults to off. */
    announcement?: 'off' | 'polite' | 'assertive';
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-live' | 'aria-atomic'>;

export type AlertTitleProps = DefaultProps;
export type AlertDescriptionProps = DefaultProps;

export { Description, Root, Title };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
</script>

<div class="w-full max-w-md">
    <Alert.Root variant="info">
        <Alert.Title>Heads up</Alert.Title>
        <Alert.Description>
            You can add components to your app using the command line.
        </Alert.Description>
    </Alert.Root>
</div>
~~~~

### Variant Error

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
</script>

<div class="w-full max-w-md">
    <Alert.Root variant="error">
        <Alert.Title>Error</Alert.Title>
        <Alert.Description>This is a error alert with a title and description.</Alert.Description>
    </Alert.Root>
</div>
~~~~

### Variant Info

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
</script>

<div class="w-full max-w-md">
    <Alert.Root variant="info">
        <Alert.Title>Info</Alert.Title>
        <Alert.Description>This is a info alert with a title and description.</Alert.Description>
    </Alert.Root>
</div>
~~~~

### Variant Success

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
</script>

<div class="w-full max-w-md">
    <Alert.Root variant="success">
        <Alert.Title>Success</Alert.Title>
        <Alert.Description>This is a success alert with a title and description.</Alert.Description>
    </Alert.Root>
</div>
~~~~

### Variant Warning

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';
</script>

<div class="w-full max-w-md">
    <Alert.Root variant="warning">
        <Alert.Title>Warning</Alert.Title>
        <Alert.Description>This is a warning alert with a title and description.</Alert.Description>
    </Alert.Root>
</div>
~~~~

### Variants

~~~~svelte
<script lang="ts">
    import * as Alert from '@mielui/svelte/components/alert';

    const messages = [
        {
            tone: 'info',
            title: 'Maintenance scheduled',
            description: 'Reports will be unavailable Sunday from 02:00 to 03:00 UTC.'
        },
        {
            tone: 'success',
            title: 'Import complete',
            description: 'All 128 contacts are ready to use.'
        },
        {
            tone: 'warning',
            title: 'Storage almost full',
            description: 'You have used 9.2 GB of your 10 GB allowance.'
        },
        {
            tone: 'error',
            title: 'Connection lost',
            description: 'Your draft is saved locally. Reconnect before publishing.'
        }
    ] as const;
</script>

<div class="grid w-full max-w-xl gap-3">
    {#each messages as message (message.tone)}
        <Alert.Root variant={message.tone}>
            <Alert.Title>{message.title}</Alert.Title>
            <Alert.Description>{message.description}</Alert.Description>
        </Alert.Root>
    {/each}
</div>
~~~~

For the rendered reference, visit [/docs/components/alert](/docs/components/alert).


---

Source: http://sveltekit-prerender/docs/components/alert-dialog.md

# Alert Dialog

Confirmation dialog with role="alertdialog", default allowClickOutside=false, and Exit/Confirm buttons (no Close).

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils, dialog, button
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add alert-dialog
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Confirm

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| closeOnClick | boolean \| undefined | true | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| ariaBusy | boolean \| undefined | — | No | No |
| allowEscape | boolean \| undefined | true | No | No |
| size | DialogSize \| undefined | 'sm' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Exit

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| closeOnClick | boolean \| undefined | true | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| error | boolean \| undefined | false | No | No |
| orientation | DialogOrientation \| undefined | 'vertical' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { ButtonProps } from '@mielui/svelte/components/button';
import type { DialogOrientation, DialogSize } from '@mielui/svelte/components/dialog';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import Root from './alert-dialog.svelte';
import Confirm from './alert-dialog-confirm.svelte';
import Content from './alert-dialog-content.svelte';
import Description from './alert-dialog-description.svelte';
import Exit from './alert-dialog-exit.svelte';
import Footer from './alert-dialog-footer.svelte';
import Header from './alert-dialog-header.svelte';
import Title from './alert-dialog-title.svelte';
import Trigger from './alert-dialog-trigger.svelte';

export type AlertDialogState = {
    open: boolean;
    triggerRef?: HTMLElement | null;
};

export type AlertDialogProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    /** Sets supported browser chrome to red while the alert dialog is open. */
    error?: boolean;
    /** Controls the default width and action layout. Defaults to `vertical`. */
    orientation?: DialogOrientation;
    children?: Snippet;
};

export type AlertDialogContentProps = {
    surface?: 'solid' | 'glass';
    ariaBusy?: boolean;
    allowEscape?: boolean;
    /** Width preset. Vertical layouts remain compact; horizontal layouts are one step wider. */
    size?: DialogSize;
} & DefaultProps;

export type AlertDialogActionProps = {
    closeOnClick?: boolean;
} & ButtonProps;

export { Confirm, Content, Description, Exit, Footer, Header, Root, Title, Trigger };
~~~~

## Examples

### Destructive

~~~~svelte
<script lang="ts">
    import * as AlertDialog from '@mielui/svelte/components/alert-dialog';
    import Kbd from '@mielui/svelte/components/kbd';
</script>

<div class="grid place-items-center">
    <AlertDialog.Root error>
        <AlertDialog.Trigger variant="destructive">Delete project</AlertDialog.Trigger>
        <AlertDialog.Content size="lg">
            <AlertDialog.Header>
                <AlertDialog.Title>Delete this project?</AlertDialog.Title>
                <AlertDialog.Description>
                    All branches, issues, and deploy history will be permanently removed.
                </AlertDialog.Description>
            </AlertDialog.Header>
            <AlertDialog.Footer>
                <AlertDialog.Exit>
                    Cancel
                    <Kbd shortcut="esc" />
                </AlertDialog.Exit>
                <AlertDialog.Confirm>
                    Delete project
                    <Kbd shortcut="enter" />
                </AlertDialog.Confirm>
            </AlertDialog.Footer>
        </AlertDialog.Content>
    </AlertDialog.Root>
</div>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import { Delete02Icon as Trash } from '@hugeicons/core-free-icons';
    import * as AlertDialog from '@mielui/svelte/components/alert-dialog';
    import Kbd from '@mielui/svelte/components/kbd';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="grid place-items-center">
    <AlertDialog.Root error orientation="vertical">
        <AlertDialog.Trigger variant="destructive">
            <HugeiconsIcon icon={Trash} size={14} />
            Delete workspace
        </AlertDialog.Trigger>
        <AlertDialog.Content surface="glass" size="lg">
            <AlertDialog.Header>
                <div class="flex items-center gap-2.5">
                    <HugeiconsIcon icon={Trash} size={18} class="text-[var(--color-error)]" />
                    <AlertDialog.Title>Delete this workspace?</AlertDialog.Title>
                </div>
                <AlertDialog.Description>
                    All projects, comments, and exports will be removed. This action cannot be
                    undone.
                </AlertDialog.Description>
            </AlertDialog.Header>
            <AlertDialog.Footer>
                <AlertDialog.Exit>
                    Cancel
                    <Kbd shortcut="esc" />
                </AlertDialog.Exit>
                <AlertDialog.Confirm>
                    Delete
                    <Kbd shortcut="enter" />
                </AlertDialog.Confirm>
            </AlertDialog.Footer>
        </AlertDialog.Content>
    </AlertDialog.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Delete02Icon as Trash } from '@hugeicons/core-free-icons';
    import * as AlertDialog from '@mielui/svelte/components/alert-dialog';
    import Kbd from '@mielui/svelte/components/kbd';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let deleted = $state(false);
    function confirmDeletion() {
        deleted = true;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <div class="grid place-items-center">
        <AlertDialog.Root error orientation="vertical">
            <AlertDialog.Trigger variant="destructive">
                <HugeiconsIcon icon={Trash} size={14} />
                Delete workspace
            </AlertDialog.Trigger>
            <AlertDialog.Content size="lg">
                <AlertDialog.Header>
                    <div class="flex items-center gap-2.5">
                        <HugeiconsIcon icon={Trash} size={18} class="text-[var(--color-error)]" />
                        <AlertDialog.Title>Delete this workspace?</AlertDialog.Title>
                    </div>
                    <AlertDialog.Description>
                        This preview will mark the sample workspace as deleted. Your actual
                        workspaces are unaffected.
                    </AlertDialog.Description>
                </AlertDialog.Header>
                <AlertDialog.Footer>
                    <AlertDialog.Exit>
                        Cancel
                        <Kbd shortcut="esc" />
                    </AlertDialog.Exit>
                    <AlertDialog.Confirm onclick={confirmDeletion}>
                        Delete
                        <Kbd shortcut="enter" />
                    </AlertDialog.Confirm>
                </AlertDialog.Footer>
            </AlertDialog.Content>
        </AlertDialog.Root>
    </div>

    <p role="status" class="text-sm text-foreground-muted">
        {deleted ? 'Sample workspace deleted.' : 'Sample workspace is active.'}
    </p>
</div>
~~~~

### Sign Out

~~~~svelte
<script lang="ts">
    import * as AlertDialog from '@mielui/svelte/components/alert-dialog';
    import Kbd from '@mielui/svelte/components/kbd';

    let signedOut = $state(false);

    function signOut() {
        signedOut = true;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <div class="grid place-items-center">
        <AlertDialog.Root>
            <AlertDialog.Trigger variant="outline">Sign out</AlertDialog.Trigger>
            <AlertDialog.Content size="lg">
                <AlertDialog.Header>
                    <AlertDialog.Title>Sign out?</AlertDialog.Title>
                    <AlertDialog.Description>
                        This preview will show a signed-out state. Your actual session is unchanged.
                    </AlertDialog.Description>
                </AlertDialog.Header>
                <AlertDialog.Footer>
                    <AlertDialog.Exit>
                        Stay
                        <Kbd shortcut="esc" />
                    </AlertDialog.Exit>
                    <AlertDialog.Confirm onclick={signOut}>
                        Sign out
                        <Kbd shortcut="enter" />
                    </AlertDialog.Confirm>
                </AlertDialog.Footer>
            </AlertDialog.Content>
        </AlertDialog.Root>
    </div>

    {#if signedOut}
        <p role="status" class="text-sm text-foreground-muted">Signed out of the preview.</p>
    {/if}
</div>
~~~~

For the rendered reference, visit [/docs/components/alert-dialog](/docs/components/alert-dialog).


---

Source: http://sveltekit-prerender/docs/components/avatar.md

# Avatar

Image avatar with fallback. 4 sizes (sm/md/lg/xl), circle or square shape.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.createContext, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add avatar
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Fallback

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Image

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| src | string \| undefined | — | No | No |
| alt | string \| undefined | '' | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| size | "sm" \| "md" \| "lg" \| "xl" \| undefined | 'md' | No | No |
| shape | "circle" \| "square" \| undefined | 'circle' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLImgAttributes } from 'svelte/elements';
import Root from './avatar.svelte';
import Fallback from './avatar-fallback.svelte';
import Image from './avatar-image.svelte';

export type AvatarProps = {
    size?: 'sm' | 'md' | 'lg' | 'xl';
    shape?: 'circle' | 'square';
    children?: Snippet;
} & DefaultProps;

export type AvatarImageProps = {
    src?: string;
    alt?: string;
} & DefaultProps &
    HTMLImgAttributes;

export type AvatarFallbackProps = {
    children?: Snippet;
} & DefaultProps;

export { Fallback, Image, Root };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Avatar from '@mielui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center">
    <Avatar.Root>
        <Avatar.Image src="https://github.com/mielsense.png" alt="Mielsense" />
        <Avatar.Fallback>MI</Avatar.Fallback>
    </Avatar.Root>
</div>
~~~~

### Shapes

~~~~svelte
<script lang="ts">
    import * as Avatar from '@mielui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center gap-4">
    <Avatar.Root shape="circle"><Avatar.Fallback>CR</Avatar.Fallback></Avatar.Root>
    <Avatar.Root shape="square"><Avatar.Fallback>SQ</Avatar.Fallback></Avatar.Root>
</div>
~~~~

### Sizes

~~~~svelte
<script lang="ts">
    import * as Avatar from '@mielui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center gap-4">
    <Avatar.Root size="sm"><Avatar.Fallback>SM</Avatar.Fallback></Avatar.Root>
    <Avatar.Root size="md"><Avatar.Fallback>MD</Avatar.Fallback></Avatar.Root>
    <Avatar.Root size="lg"><Avatar.Fallback>LG</Avatar.Fallback></Avatar.Root>
    <Avatar.Root size="xl"><Avatar.Fallback>XL</Avatar.Fallback></Avatar.Root>
</div>
~~~~

### With Image

~~~~svelte
<script lang="ts">
    import * as Avatar from '@mielui/svelte/components/avatar';
</script>

<div class="flex items-center justify-center">
    <Avatar.Root>
        <Avatar.Image src="data:image/png;base64," alt="Alex Morgan" />
        <Avatar.Fallback>AM</Avatar.Fallback>
    </Avatar.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/avatar](/docs/components/avatar).


---

Source: http://sveltekit-prerender/docs/components/badge.md

# Badge

Inline status pill with optional dot marker. 9 variants (5 intents + 4 statuses). Optionally renders as anchor when href is provided.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add badge
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Badge

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | BadgeVariant \| undefined | 'secondary' | No | No |
| icon | Component<{ size?: string \| number \| undefined; class?: string \| undefined; }, {}, string> \| undefined | — | No | No |
| iconSize | string \| number \| undefined | 13 | No | No |
| dot | boolean \| undefined | false | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Component, Snippet } from 'svelte';
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
import Badge from './badge.svelte';

export type BadgeVariant =
    | 'primary'
    | 'secondary'
    | 'ghost'
    | 'outline'
    | 'destructive'
    | 'info'
    | 'success'
    | 'warning'
    | 'error';

type BadgeSharedProps = {
    variant?: BadgeVariant;
    icon?: Component<{ size?: number | string; class?: string }>;
    iconSize?: number | string;
    dot?: boolean;
    children?: Snippet;
} & DefaultProps;

type BadgeLinkProps = BadgeSharedProps & {
    href: string;
} & Omit<HTMLAnchorAttributes, keyof BadgeSharedProps | 'href'>;

type BadgeStaticProps = BadgeSharedProps & {
    href?: undefined;
} & Omit<HTMLAttributes<HTMLDivElement>, keyof BadgeSharedProps> & {
        [Attribute in Exclude<
            keyof HTMLAnchorAttributes,
            keyof HTMLAttributes<HTMLDivElement>
        >]?: never;
    };

export type BadgeProps = BadgeLinkProps | BadgeStaticProps;

export { Badge };
export default Badge;
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="outline">Label</Badge>
~~~~

### Shapes

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<div class="flex flex-wrap items-center gap-2">
    <Badge class="rounded-full px-2.5">Beta</Badge>
    <Badge class="size-8 rounded-full px-0 py-0">8</Badge>
    <Badge class="rounded-sm">Draft</Badge>
    <Badge variant="outline" class="rounded-[var(--radius-lg)]">Live</Badge>
</div>
~~~~

### Variant Destructive

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="destructive">Destructive</Badge>
~~~~

### Variant Error

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="error">Error</Badge>
~~~~

### Variant Ghost

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="ghost">Ghost</Badge>
~~~~

### Variant Info

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="info">Info</Badge>
~~~~

### Variant Outline

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="outline">Outline</Badge>
~~~~

### Variant Primary

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="primary">Primary</Badge>
~~~~

### Variant Secondary

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="secondary">Secondary</Badge>
~~~~

### Variant Success

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="success">Success</Badge>
~~~~

### Variant Warning

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<Badge variant="warning">Warning</Badge>
~~~~

### Variants

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
</script>

<div class="flex max-w-lg flex-wrap items-center justify-center gap-3">
    <Badge variant="primary">Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="ghost">Ghost</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="error">Error</Badge>
</div>
~~~~

For the rendered reference, visit [/docs/components/badge](/docs/components/badge).


---

Source: http://sveltekit-prerender/docs/components/breadcrumb.md

# Breadcrumb

Router-independent navigation trail with explicit current-page items and decorative separators.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add breadcrumb
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| href | string \| undefined | — | No | No |
| current | boolean \| undefined | false | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
import Root from './breadcrumb.svelte';
import Item from './breadcrumb-item.svelte';
import Separator from './breadcrumb-separator.svelte';

export type BreadcrumbProps = DefaultProps & HTMLAttributes<HTMLElement>;
export type BreadcrumbItemProps = {
    href?: string;
    /** Whether this item represents the current page. Router independent. */
    current?: boolean;
} & DefaultProps &
    Omit<HTMLAnchorAttributes, 'aria-current'>;
export type BreadcrumbSeparatorProps = DefaultProps;

export { Item, Root, Separator };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { ArrowRight01Icon as ChevronRight } from '@hugeicons/core-free-icons';
    import * as Breadcrumb from '@mielui/svelte/components/breadcrumb';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="flex items-center justify-center">
    <Breadcrumb.Root>
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Separator><HugeiconsIcon icon={ChevronRight} size={14} /></Breadcrumb.Separator>
        <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
        <Breadcrumb.Separator><HugeiconsIcon icon={ChevronRight} size={14} /></Breadcrumb.Separator>
        <Breadcrumb.Item current>Current</Breadcrumb.Item>
    </Breadcrumb.Root>
</div>
~~~~

### Separators

~~~~svelte
<script lang="ts">
    import { ArrowRight01Icon as ChevronRight } from '@hugeicons/core-free-icons';
    import * as Breadcrumb from '@mielui/svelte/components/breadcrumb';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="flex flex-col gap-6">
    <div class="flex items-center justify-center">
        <Breadcrumb.Root>
            <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
            <Breadcrumb.Separator>
                <HugeiconsIcon icon={ChevronRight} size={12} />
            </Breadcrumb.Separator>
            <Breadcrumb.Item current>Page</Breadcrumb.Item>
        </Breadcrumb.Root>
    </div>
    <div class="flex items-center justify-center">
        <Breadcrumb.Root>
            <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
            <Breadcrumb.Separator>/</Breadcrumb.Separator>
            <Breadcrumb.Item current>Page</Breadcrumb.Item>
        </Breadcrumb.Root>
    </div>
</div>
~~~~

### With Icon

~~~~svelte
<script lang="ts">
    import {
        ArrowRight01Icon as ChevronRight,
        Home01Icon as Home
    } from '@hugeicons/core-free-icons';
    import * as Breadcrumb from '@mielui/svelte/components/breadcrumb';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="flex items-center justify-center">
    <Breadcrumb.Root>
        <Breadcrumb.Item href="/">
            <HugeiconsIcon icon={Home} size={13} />
        </Breadcrumb.Item>
        <Breadcrumb.Separator><HugeiconsIcon icon={ChevronRight} size={12} /></Breadcrumb.Separator>
        <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
        <Breadcrumb.Separator><HugeiconsIcon icon={ChevronRight} size={12} /></Breadcrumb.Separator>
        <Breadcrumb.Item current>Components</Breadcrumb.Item>
    </Breadcrumb.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/breadcrumb](/docs/components/breadcrumb).


---

Source: http://sveltekit-prerender/docs/components/button.md

# Button

Click target with seven variants: primary, secondary, ghost, quiet, outline, destructive, and panel. Quiet matches ghost text color without a hover fill. Supports four sizes and stable loading, success, and error states. Renders as <button> by default or <a> when `href` is provided.

- Package: `@mielui/svelte`
- Component version: `3.5.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn, utils.Intent

## Install

~~~~sh
pnpm dlx @mielui/svelte add button
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Button

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | false | No | No |
| variant | ButtonVariant \| undefined | 'primary' | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | 'md' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | false | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Intent } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
import Button from './button.svelte';

export type ButtonVariant = Intent | 'panel' | 'quiet';
export type ButtonStatus = 'idle' | 'loading' | 'success' | 'error';

type ButtonSharedProps = {
    disabled?: boolean;
    variant?: ButtonVariant;
    size?: 'sm' | 'md' | 'lg' | 'icon';
    children?: Snippet;
    /**
     * Bindable reference to the rendered DOM element. Type is the union of
     * the two possible element types -- narrow at the use site:
     *
     * ```ts
     * let buttonEl: HTMLButtonElement | HTMLAnchorElement | undefined =
     *   $state();
     * // ...
     * <Button bind:element={buttonEl} href={undefined} />
     * if (buttonEl instanceof HTMLButtonElement) {
     *   buttonEl.focus();
     * }
     * ```
     *
     * Pass `href={undefined}` to guarantee a `<button>` element and narrow
     * to `HTMLButtonElement`; pass `href` to render an `<a>` element. The
     * union exists because both element types share the public API surface;
     * the type system can't distinguish without flow-sensitive analysis at
     * the call site.
     */
    element?: HTMLButtonElement | HTMLAnchorElement | undefined;
    /**
     * Skip the variant/size base classes and render with `class` alone.
     *
     * Menu rows use this to opt out of the button's sizing utilities so the
     * `mielui-menu-item` stylesheet contract governs the surface instead --
     * utilities outrank the `components` layer, so the two cannot coexist.
     */
    unstyled?: boolean;
    /** Controlled visual state. Loading remains focusable and refuses activation. */
    status?: ButtonStatus;
    /** Convenience alias for `status="loading"`. */
    loading?: boolean;
    loadingLabel?: string;
    successLabel?: string;
    errorLabel?: string;
    onclick?: (event: MouseEvent) => void;
    onkeydown?: (event: KeyboardEvent) => void;
};

export type ButtonProps = ButtonSharedProps &
    (
        | ({ href: string } & Omit<HTMLAnchorAttributes, keyof ButtonSharedProps | 'href'>)
        | ({ href?: undefined } & Omit<HTMLButtonAttributes, keyof ButtonSharedProps>)
    );

export { Button };
export default Button;
~~~~

## Examples

### As Link

~~~~svelte
<script lang="ts">
    import { LinkSquare02Icon as External } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Button href="/docs" variant="outline">
    <HugeiconsIcon icon={External} size={13} />
    Open docs
</Button>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button disabled>Disabled</Button>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button href="/docs/installation">Get started</Button>
~~~~

### Icon Group

~~~~svelte
<script lang="ts">
    import { Copy01Icon, Delete02Icon, Download01Icon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let removed = $state(false);
    let message = $state('');

    function download() {
        const link = document.createElement('a');
        const url = URL.createObjectURL(
            new Blob(['Release notes\nAll checks passed.'], { type: 'text/plain' })
        );
        link.href = url;
        link.download = 'release-notes.txt';
        link.click();
        URL.revokeObjectURL(url);
        message = 'Sample download started.';
    }

    async function copy() {
        try {
            await navigator.clipboard.writeText('Release notes: all checks passed.');
            message = 'Release notes copied.';
        } catch {
            message = 'Clipboard access is unavailable.';
        }
    }

    function remove() {
        removed = !removed;
        message = removed ? 'Attachment removed from this preview.' : 'Attachment restored.';
    }
</script>

<div class="flex flex-col items-center gap-3">
    <div class="flex items-center gap-2">
        <Tooltip.Root>
            <Tooltip.Trigger>
                <Button variant="ghost" size="icon" aria-label="Download sample" onclick={download}>
                    <HugeiconsIcon icon={Download01Icon} size={16} />
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>Download sample</Tooltip.Content>
        </Tooltip.Root>
        <Tooltip.Root>
            <Tooltip.Trigger>
                <Button variant="ghost" size="icon" aria-label="Copy release notes" onclick={copy}>
                    <HugeiconsIcon icon={Copy01Icon} size={16} />
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>Copy release notes</Tooltip.Content>
        </Tooltip.Root>
        <Tooltip.Root>
            <Tooltip.Trigger>
                <Button
                    variant="ghost"
                    size="icon"
                    aria-label={removed ? 'Restore attachment' : 'Remove attachment'}
                    aria-pressed={removed}
                    onclick={remove}
                >
                    <HugeiconsIcon icon={Delete02Icon} size={16} />
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                {removed ? 'Restore attachment' : 'Remove attachment'}
            </Tooltip.Content>
        </Tooltip.Root>
    </div>
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Leading Icon

~~~~svelte
<script lang="ts">
    import { Add01Icon as Plus } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Button>
    <HugeiconsIcon icon={Plus} size={14} />
    New project
</Button>
~~~~

### Loading

~~~~svelte
<script lang="ts">
    import type { ButtonStatus } from '@mielui/svelte/components/button';
    import { Button } from '@mielui/svelte/components/button';
    import { Switch } from '@mielui/svelte/components/switch';
    import { onDestroy } from 'svelte';

    let status = $state<ButtonStatus>('idle');
    let failNext = $state(false);
    let timer: ReturnType<typeof setTimeout> | undefined;

    function publish() {
        if (status === 'loading') {
            return;
        }
        clearTimeout(timer);
        const shouldFail = failNext;
        failNext = false;
        status = 'loading';
        timer = setTimeout(() => {
            if (shouldFail) {
                status = 'error';
                return;
            }
            status = 'success';
            timer = setTimeout(() => {
                status = 'idle';
            }, 1200);
        }, 1100);
    }
    onDestroy(() => {
        clearTimeout(timer);
    });
</script>

<div class="flex flex-col items-start gap-4">
    <Switch bind:checked={failNext} disabled={status === 'loading'} label="Fail the next attempt" />
    <Button
        {status}
        loadingLabel="Publishing…"
        successLabel="Published"
        errorLabel="Retry"
        onclick={publish}
    >
        Publish
    </Button>
    <p class="text-sm text-foreground-muted">
        This preview simulates a request. It publishes nothing.
    </p>
</div>
~~~~

### Sizes

~~~~svelte
<script lang="ts">
    import { FavouriteIcon as Heart } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="flex flex-wrap items-center justify-center gap-4">
    <Button size="sm">Small</Button>
    <Button>Medium</Button>
    <Button size="lg">Large</Button>
    <Tooltip.Root>
        <Tooltip.Trigger>
            <Button size="icon" aria-label="Favorite">
                <HugeiconsIcon icon={Heart} size={14} />
            </Button>
        </Tooltip.Trigger>
        <Tooltip.Content>Favorite</Tooltip.Content>
    </Tooltip.Root>
</div>
~~~~

### Trailing Icon

~~~~svelte
<script lang="ts">
    import { ArrowRight02Icon as ArrowRight } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Button variant="secondary">
    Continue
    <HugeiconsIcon icon={ArrowRight} size={14} />
</Button>
~~~~

### Variant Destructive

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button variant="destructive">Destructive</Button>
~~~~

### Variant Ghost

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button variant="ghost">Ghost</Button>
~~~~

### Variant Outline

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button variant="outline">Outline</Button>
~~~~

### Variant Panel

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button variant="panel">Panel</Button>
~~~~

### Variant Primary

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button>Primary</Button>
~~~~

### Variant Quiet

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button variant="quiet">Quiet</Button>
~~~~

### Variant Secondary

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<Button variant="secondary">Secondary</Button>
~~~~

### Variants

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
</script>

<div class="flex max-w-lg flex-wrap items-center justify-center gap-3">
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="quiet">Quiet</Button>
    <Button variant="destructive">Destructive</Button>
    <Button variant="panel">Panel</Button>
</div>
~~~~

For the rendered reference, visit [/docs/components/button](/docs/components/button).


---

Source: http://sveltekit-prerender/docs/components/calendar.md

# Calendar

Composable single-date calendar with localized keyboard navigation and month/year controls.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button
- Shared utilities: utils.cn, hugeicons-icon

## Install

~~~~sh
pnpm dlx @mielui/svelte add calendar
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### NextButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### PrevButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[CalendarRootSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| placeholder | DateValue \| undefined | — | No | Yes |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| value | DateValue \| undefined | — | No | Yes |
| readonly | boolean \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| onValueChange | OnChangeFn<DateValue \| undefined> \| undefined | — | No | No |
| onPlaceholderChange | OnChangeFn<DateValue> \| undefined | — | No | No |
| preventDeselect | boolean \| undefined | — | No | No |
| minValue | DateValue \| undefined | — | No | No |
| maxValue | DateValue \| undefined | — | No | No |
| pagedNavigation | boolean \| undefined | — | No | No |
| weekStartsOn | WeekStartsOn \| undefined | — | No | No |
| weekdayFormat | "long" \| "short" \| "narrow" \| undefined | 'short' | No | No |
| isDateDisabled | DateMatcher \| undefined | — | No | No |
| isDateUnavailable | DateMatcher \| undefined | — | No | No |
| fixedWeeks | boolean \| undefined | true | No | No |
| numberOfMonths | number \| undefined | — | No | No |
| calendarLabel | string \| undefined | — | No | No |
| locale | string \| undefined | 'en-US' | No | No |
| initialFocus | boolean \| undefined | — | No | No |
| disableDaysOutsideMonth | boolean \| undefined | — | No | No |
| maxDays | number \| undefined | — | No | No |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| date | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| month | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| child | Snippet<[CalendarCellSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarCellSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Day

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarDaySnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarDaySnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Grid

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridBody

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridHead

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridRow

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### HeadCell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Heading

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarHeadingSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarHeadingSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Month

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| month | { value: DateValue; weeks: DateValue[][]; dates: DateValue[]; } | — | Yes | No |
| weekdays | string[] | — | Yes | No |
| locale | string \| undefined | 'en-US' | No | No |
| showHeading | boolean \| undefined | false | No | No |
| day | Snippet<[date: DateValue]> \| undefined | — | No | No |



### MonthSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| months | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarMonthSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarMonthSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### YearSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| years | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarYearSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarYearSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DateValue } from '@internationalized/date';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Calendar as CalendarPrimitive, CalendarRootSnippetProps } from 'bits-ui';
import type { Snippet } from 'svelte';

export type CalendarProps = Omit<
    Extract<CalendarPrimitive.RootProps, { type: 'single' }>,
    'type' | 'child'
>;
export type CalendarMonthProps = Omit<DefaultProps, 'children'> & {
    month: CalendarRootSnippetProps['months'][number];
    weekdays: string[];
    locale?: string;
    showHeading?: boolean;
    day?: Snippet<[date: DateValue]>;
};

export { default as NextButton } from '../calendar/calendar-next-button.svelte';
export { default as PrevButton } from '../calendar/calendar-prev-button.svelte';
export { default as Root } from './calendar.svelte';
export { default as Cell } from './calendar-cell.svelte';
export { default as Day } from './calendar-day.svelte';
export { default as Grid } from './calendar-grid.svelte';
export { default as GridBody } from './calendar-grid-body.svelte';
export { default as GridHead } from './calendar-grid-head.svelte';
export { default as GridRow } from './calendar-grid-row.svelte';
export { default as HeadCell } from './calendar-head-cell.svelte';
export { default as Header } from './calendar-header.svelte';
export { default as Heading } from './calendar-heading.svelte';
export { default as Month } from './calendar-month.svelte';
export { default as MonthSelect } from './calendar-month-select.svelte';
export { default as YearSelect } from './calendar-year-select.svelte';
~~~~

## Examples

### Constraints

~~~~svelte
<script lang="ts">
    import { CalendarDate, isWeekend } from '@internationalized/date';
    import * as Calendar from '@mielui/svelte/components/calendar';
</script>

<Calendar.Root
    calendarLabel="Appointment date"
    placeholder={new CalendarDate(2026, 9, 17)}
    minValue={new CalendarDate(2026, 9, 17)}
    maxValue={new CalendarDate(2026, 9, 30)}
    isDateDisabled={(date) => isWeekend(date, 'en-US')}
/>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import * as Calendar from '@mielui/svelte/components/calendar';

    let value = $state<DateValue | undefined>(new CalendarDate(2026, 9, 17));
</script>

<div class="flex flex-col items-center gap-4">
    <div
        class="max-w-full rounded-[var(--radius-xl)] border-[length:var(--border-size)] border-border bg-card"
    >
        <Calendar.Root bind:value calendarLabel="Meeting date" />
    </div>
    <p class="text-sm text-foreground-muted">
        Meeting date<span class="ms-2 font-mono text-foreground">
            {value?.toString() ?? 'Not selected'}
        </span>
    </p>
</div>
~~~~

### Navigation

~~~~svelte
<script lang="ts">
    import { CalendarDate } from '@internationalized/date';
    import * as Calendar from '@mielui/svelte/components/calendar';

    const years = Array.from({ length: 101 }, (_, index) => 1930 + index);
</script>

<Calendar.Root placeholder={new CalendarDate(1995, 6, 15)} calendarLabel="Date of birth">
    {#snippet children({ months, weekdays })}
        <Calendar.Header>
            <Calendar.MonthSelect />
            <Calendar.YearSelect {years} />
        </Calendar.Header>
        {#each months as month (month.value.toString())}
            <Calendar.Month {month} {weekdays} />
        {/each}
    {/snippet}
</Calendar.Root>
~~~~

For the rendered reference, visit [/docs/components/calendar](/docs/components/calendar).


---

Source: http://sveltekit-prerender/docs/components/card.md

# Card

Surface container with Header, Title, Description, Content, and Footer subparts.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils, typography
- Shared utilities: components/_internal/inset-layout, utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add card
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "panel" \| "inset" \| "default" \| undefined | 'default' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| level | HeadingLevel \| undefined | 2 | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLAttributes } from 'svelte/elements';
import type { HeadingLevel } from '../typography';
import Root from './card.svelte';
import Content from './card-content.svelte';
import Description from './card-description.svelte';
import Footer from './card-footer.svelte';
import Header from './card-header.svelte';
import Title from './card-title.svelte';

export type CardProps = {
    variant?: 'default' | 'panel' | 'inset';
} & DefaultProps;

export type CardHeaderProps = DefaultProps;
export type CardTitleProps = DefaultProps &
    HTMLAttributes<HTMLHeadingElement> & {
        /** Heading level in the surrounding document. Defaults to 2. */
        level?: HeadingLevel;
    };
export type CardDescriptionProps = DefaultProps;
export type CardContentProps = DefaultProps;
export type CardFooterProps = DefaultProps;

export { Content, Description, Footer, Header, Root, Title };
~~~~

## Examples

### Content Only

~~~~svelte
<script lang="ts">
    import * as Card from '@mielui/svelte/components/card';
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Content>
        <p class="m-0 text-sm text-foreground-muted">
            Your next invoice is due October 1. Billing details stay available to workspace owners.
        </p>
    </Card.Content>
</Card.Root>
~~~~

### Full

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Card from '@mielui/svelte/components/card';
    import { Switch } from '@mielui/svelte/components/switch';

    let message = $state('');
    let notifications = $state(true);
    let saved = $state(true);
    function save() {
        saved = notifications;
        message = 'Workspace preferences saved for this preview.';
    }
    function cancel() {
        notifications = saved;
        message = 'Changes discarded.';
    }
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Header>
        <Card.Title>Account settings</Card.Title>
        <Card.Description>Manage your workspace settings.</Card.Description>
    </Card.Header>
    <Card.Content>
        <p class="m-0 text-sm leading-relaxed text-foreground-muted">
            Currently on the Team plan. 12 of 25 seats used.
        </p>
        <Switch bind:checked={notifications} label="Weekly workspace summary" />
    </Card.Content>
    <Card.Footer>
        <Button variant="outline" size="md" onclick={cancel}>Cancel</Button>
        <Button size="md" onclick={save}>Save changes</Button>
    </Card.Footer>
    <p role="status" class="px-5 pb-4 text-sm text-foreground-muted">{message}</p>
</Card.Root>
~~~~

### Header Footer

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Card from '@mielui/svelte/components/card';

    let message = $state('');
    function save() {
        message = 'Workspace preferences saved for this preview.';
    }
    function cancel() {
        message = 'No changes applied.';
    }
</script>

<Card.Root class="w-full max-w-[28rem]">
    <Card.Header>
        <Card.Title>Settings</Card.Title>
    </Card.Header>
    <Card.Footer>
        <Button variant="outline" size="md" onclick={cancel}>Cancel</Button>
        <Button size="md" onclick={save}>Apply</Button>
    </Card.Footer>
    <p role="status" class="px-5 pb-4 text-sm text-foreground-muted">{message}</p>
</Card.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
    import { Button } from '@mielui/svelte/components/button';
    import * as Card from '@mielui/svelte/components/card';
</script>

<Card.Root class="w-full max-w-md">
    <Card.Header>
        <div class="flex items-center justify-between gap-3">
            <Card.Title>Team handbook</Card.Title>
            <Badge variant="success">Published</Badge>
        </div>
        <Card.Description>The policies and guides your team uses every day.</Card.Description>
    </Card.Header>
    <Card.Content>
        <dl class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <dt class="text-foreground-muted">Framework</dt>
                <dd class="mt-1">SvelteKit</dd>
            </div>
            <div>
                <dt class="text-foreground-muted">Last update</dt>
                <dd class="mt-1">Today</dd>
            </div>
        </dl>
    </Card.Content>
    <Card.Footer>
        <Button variant="secondary" href="/docs/components/typography">Read the guide</Button>
        <Button href="/studio">Customize theme</Button>
    </Card.Footer>
</Card.Root>
~~~~

### Inset

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
    import { Button } from '@mielui/svelte/components/button';
    import * as Card from '@mielui/svelte/components/card';
</script>

<Card.Root variant="inset" class="w-full max-w-md">
    <Card.Header>
        <div class="flex items-center justify-between gap-3">
            <Card.Title>Team handbook</Card.Title>
            <Badge variant="success">Published</Badge>
        </div>
        <Card.Description>The policies and guides your team uses every day.</Card.Description>
    </Card.Header>
    <Card.Content>
        <dl class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <dt class="text-foreground-muted">Framework</dt>
                <dd class="mt-1">SvelteKit</dd>
            </div>
            <div>
                <dt class="text-foreground-muted">Last update</dt>
                <dd class="mt-1">Today</dd>
            </div>
        </dl>
    </Card.Content>
    <Card.Footer>
        <Button variant="secondary" href="/docs/components/typography">Read the guide</Button>
        <Button href="/studio">Customize theme</Button>
    </Card.Footer>
</Card.Root>
~~~~

### Panel

~~~~svelte
<script lang="ts">
    import * as Card from '@mielui/svelte/components/card';
</script>

<Card.Root variant="panel" class="w-full max-w-[22rem]">
    <Card.Header>
        <Card.Title>Inset surface</Card.Title>
        <Card.Description>Concentric double-line frame for denser UI chrome.</Card.Description>
    </Card.Header>
    <Card.Content>
        <p class="m-0 text-sm text-foreground-muted">
            Use<code class="font-mono text-foreground">variant="panel"</code> when a card should sit
            inside a framed surface instead of a flat border.
        </p>
    </Card.Content>
</Card.Root>
~~~~

For the rendered reference, visit [/docs/components/card](/docs/components/card).


---

Source: http://sveltekit-prerender/docs/components/checkbox.md

# Checkbox

Custom-styled checkbox with bindable checked. Default and primary variants.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/field-metadata, hugeicons-icon, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add checkbox
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Checkbox

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| checked | boolean \| undefined | false | No | Yes |
| label | string \| undefined | — | No | No |
| description | string \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | "primary" \| "default" \| undefined | 'default' | No | No |
| size | "sm" \| "md" \| "lg" \| undefined | 'md' | No | No |
| onCheckedChange | ((checked: boolean) => void) \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLInputAttributes } from 'svelte/elements';
import Checkbox from './checkbox.svelte';

export type CheckboxProps = {
    checked?: boolean;
    label?: string;
    description?: string;
    disabled?: boolean;
    variant?: 'default' | 'primary';
    size?: 'sm' | 'md' | 'lg';
    onCheckedChange?: (checked: boolean) => void;
} & DefaultProps &
    Omit<HTMLInputAttributes, 'children' | 'type' | 'checked' | 'size'>;

export { Checkbox };
export default Checkbox;
~~~~

## Examples

### Checked

~~~~svelte
<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';
</script>

<div class="flex items-center justify-center">
    <Checkbox label="Checked by default" checked />
</div>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';
</script>

<div class="flex items-center justify-center">
    <Checkbox label="Disabled option" disabled checked={false} />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Checkbox } from '@mielui/svelte/components/checkbox';

    let finalizePricing = $state(true);
    let writeChangelog = $state(true);
    let qaNavigation = $state(false);
    let scheduleAnnouncement = $state(false);
    let updateDocs = $state(false);

    const completedCount = $derived(
        [finalizePricing, writeChangelog, qaNavigation, scheduleAnnouncement, updateDocs].filter(
            Boolean
        ).length
    );
    const totalCount = 5;
</script>

<div class="w-full max-w-80">
    <!-- Header -->
    <div class="mb-4 flex items-center justify-between gap-4">
        <h3 class="text-foreground [font-weight:var(--font-weight-label,500)]">Launch checklist</h3>
        <span class="text-sm text-foreground-muted [font-weight:var(--font-weight-label,500)]">
            <span use:numberShuffle={{ value: completedCount }}>{completedCount}</span>
            /{totalCount}
        </span>
    </div>

    <!-- Checklist items -->
    <div class="space-y-3">
        <Checkbox bind:checked={finalizePricing} label="Finalize pricing page" />
        <Checkbox bind:checked={writeChangelog} label="Write the changelog" />
        <Checkbox bind:checked={qaNavigation} label="QA mobile navigation" />
        <Checkbox bind:checked={scheduleAnnouncement} label="Schedule the announcement tweet" />
        <Checkbox bind:checked={updateDocs} label="Update docs screenshots" />
    </div>
</div>
~~~~

### Label Only

~~~~svelte
<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';
</script>

<div class="flex items-center justify-center">
    <Checkbox label="Receive updates" checked={false} />
</div>
~~~~

### Sizes

~~~~svelte
<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';
</script>

<div class="flex flex-wrap items-center gap-6">
    <Checkbox size="sm" label="Small · 14px" />
    <Checkbox size="md" label="Medium · 18px" checked />
    <Checkbox size="lg" label="Large · 22px" checked />
</div>
~~~~

### With Description

~~~~svelte
<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';
</script>

<div class="flex items-center justify-center">
    <Checkbox
        label="Receive product updates"
        description="Roughly one email per month"
        checked={false}
    />
</div>
~~~~

For the rendered reference, visit [/docs/components/checkbox](/docs/components/checkbox).


---

Source: http://sveltekit-prerender/docs/components/collapsible.md

# Collapsible

Single-item disclosure panel with bindable open state.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add collapsible
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| disabled | boolean \| undefined | false | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import Root from './collapsible.svelte';
import Content from './collapsible-content.svelte';
import Trigger from './collapsible-trigger.svelte';

export type CollapsibleProps = {
    open?: boolean;
    disabled?: boolean;
    children?: Snippet;
};

export type CollapsibleTriggerProps = {
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'onclick' | 'children'>;

export type CollapsibleContentProps = {
    children?: Snippet;
} & DefaultProps;

export type CollapsibleState = {
    open: boolean;
    disabled: boolean;
};

export { Content, Root, Trigger };
~~~~

## Examples

### Default

~~~~svelte
<script lang="ts">
    import * as Collapsible from '@mielui/svelte/components/collapsible';

    let open = $state(false);
</script>

<div class="w-full max-w-md">
    <Collapsible.Root bind:open>
        <Collapsible.Trigger>
            {open ? 'Hide delivery details' : 'Show delivery details'}
        </Collapsible.Trigger>
        <Collapsible.Content>
            Delivery takes 3 to 5 business days. A tracking link appears here after the order ships.
        </Collapsible.Content>
    </Collapsible.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { ArrowDown01Icon as ChevronDown } from '@hugeicons/core-free-icons';
    import * as Collapsible from '@mielui/svelte/components/collapsible';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(true);
</script>

<div class="w-full max-w-96">
    <div class="space-y-4">
        <Collapsible.Root bind:open>
            <Collapsible.Trigger
                class="-mx-2 flex w-[calc(100%+1rem)] items-center justify-between rounded-[var(--radius-md)] px-2 py-2 text-left text-foreground transition-colors hover:bg-secondary"
            >
                <span class="[font-weight:var(--font-weight-label,500)]">Weekly sync, June 18</span>
                <HugeiconsIcon
                    icon={ChevronDown}
                    size={18}
                    class="transition-transform [transition-duration:var(--motion-duration-panel)] motion-reduce:transition-none {open ? '' : '-rotate-90'}"
                />
            </Collapsible.Trigger>
            <Collapsible.Content class="mt-2 space-y-3 pl-3">
                <p class="text-sm text-foreground-muted leading-relaxed">
                    The export flow is ready for testing. Maya owns the migration guide, and Sam
                    will review keyboard navigation before Friday.
                </p>
                <ul class="space-y-2 text-sm text-foreground-muted">
                    <li class="flex gap-2">
                        <span class="text-foreground-muted">•</span>
                        <span>Ship the studio redesign by end of quarter</span>
                    </li>
                    <li class="flex gap-2">
                        <span class="text-foreground-muted">•</span>
                        <span>Draft v2 migration guide for customers</span>
                    </li>
                    <li class="flex gap-2">
                        <span class="text-foreground-muted">•</span>
                        <span>Review pricing experiment results with finance</span>
                    </li>
                </ul>
            </Collapsible.Content>
        </Collapsible.Root>
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/collapsible](/docs/components/collapsible).


---

Source: http://sveltekit-prerender/docs/components/combobox.md

# Combobox

Searchable popover-based picker with fuzzy results via fuse.js.

- Package: `@mielui/svelte`
- Component version: `2.4.0`
- Depends on Mielui components: _internal/utils, popover, button, input, scroll-area
- Shared utilities: components/_internal/button-attributes, components/_internal/surface, hugeicons-icon, utils.cn, utils.createContext, utils.inertOutside, utils.travelingHighlight

## Install

~~~~sh
pnpm dlx @mielui/svelte add combobox
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| children | Snippet<[]> | — | Yes | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| surfaceClass | string \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | true | No | No |
| dismissLayer | boolean \| undefined | true | No | No |
| portal | boolean \| undefined | true | No | No |
| refElement | VirtualElement \| undefined | — | No | No |
| role | "none" \| "alertdialog" \| "dialog" \| "listbox" \| "menu" \| undefined | 'none' | No | No |
| tabindex | number \| undefined | -1 | No | No |
| focusTrap | boolean \| undefined | — | No | No |
| lockScroll | boolean \| undefined | true | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| string \| (string & string[]) | — | Yes | No |
| label | string | — | Yes | No |
| callback | (() => void) \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |



### Results

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| placement | Placement \| undefined | 'bottom' | No | No |
| state_key | string \| undefined | — | No | No |
| stateKey | string \| undefined | — | No | No |
| hoverable | boolean \| undefined | false | No | No |
| delay | number \| undefined | 0 | No | No |
| closeDelay | number \| undefined | 150 | No | No |
| inert | boolean \| undefined | true | No | No |
| type | "single" \| undefined \| "multiple" | — | No | No |
| value | string \| undefined \| string[] \| undefined | undefined | No | Yes |
| onValueChange | ((value: string) => void) \| undefined \| ((value: string[]) => void) \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| style | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | 'outline' | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | 'md' | No | No |
| unstyled | boolean \| undefined | — | No | No |
| icon | boolean \| undefined | — | No | No |
| onopen | (() => void) \| undefined | — | No | No |
| trailing | Snippet<[]> \| undefined | — | No | No |
| placeholder | string \| undefined | 'Select…' | No | No |
| searchPlacement | "menu" \| "trigger" \| undefined | 'trigger' | No | No |
| threshold | number \| undefined | 0.28 | No | No |
| appearance | "button" \| "input" \| undefined | 'button' | No | No |
| element | HTMLButtonElement \| HTMLInputElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { PopoverProps, PopoverTriggerProps } from '@mielui/svelte/components/popover';
import type { Snippet } from 'svelte';
import Root from './combobox.svelte';
import Content from './combobox-content.svelte';
import Item from './combobox-item.svelte';
import Label from './combobox-label.svelte';
import Results from './combobox-results.svelte';
import Trigger from './combobox-trigger.svelte';

export type ComboboxItem = {
    id: string;
    value: string;
    label: string;
    callback?: () => void;
    ref: HTMLButtonElement | HTMLAnchorElement | undefined;
};

export type ComboboxState = {
    open: boolean;
    items: Set<ComboboxItem>;
    results: Set<ComboboxItem>;
    searchContent: string;
    searchPlacement: 'trigger' | 'menu';
    threshold: number;
    appearance: 'button' | 'input';
    activeValue?: string;
    selected?: ComboboxItem;
};

export type ComboboxRootProps = PopoverProps &
    (
        | {
              type?: 'single';
              value?: string;
              onValueChange?: (value: string) => void;
          }
        | {
              type: 'multiple';
              value?: string[];
              onValueChange?: (value: string[]) => void;
          }
    );

export type ComboboxTriggerProps = Omit<
    PopoverTriggerProps,
    'children' | 'element' | 'value' | 'type'
> & {
    trailing?: Snippet;
    placeholder?: string;
    searchPlacement?: 'trigger' | 'menu';
    threshold?: number;
    appearance?: 'button' | 'input';
    element?: HTMLInputElement | HTMLButtonElement;
};

export { Content, Item, Label, Results, Root, Trigger };
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';

    const languages = [
        { value: 'en', label: 'English' },
        { value: 'es', label: 'Spanish' },
        { value: 'fr', label: 'French' },
        { value: 'de', label: 'German' },
        { value: 'ja', label: 'Japanese' },
        { value: 'pt', label: 'Portuguese' }
    ];
</script>

<div class="flex justify-center">
    <div class="w-[240px]">
        <Combobox.Root>
            <Combobox.Trigger placeholder="Select a language" class="w-full" />
            <Combobox.Content>
                <Combobox.Results>
                    {#each languages as item (item.value)}
                        <Combobox.Item value={item.value} label={item.label} />
                    {/each}
                </Combobox.Results>
            </Combobox.Content>
        </Combobox.Root>
    </div>
</div>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';

    const frameworks = [
        { value: 'nextjs', label: 'Next.js' },
        { value: 'sveltekit', label: 'SvelteKit' },
        { value: 'nuxtjs', label: 'Nuxt.js' },
        { value: 'remix', label: 'Remix' },
        { value: 'astro', label: 'Astro' }
    ];
</script>

<div class="flex items-center justify-center">
    <div class="w-[280px]">
        <Combobox.Root>
            <Combobox.Trigger placeholder="Select a framework" class="w-full" />
            <Combobox.Content surface="glass">
                <Combobox.Results>
                    {#each frameworks as item (item.value)}
                        <Combobox.Item value={item.value} label={item.label} />
                    {/each}
                </Combobox.Results>
            </Combobox.Content>
        </Combobox.Root>
    </div>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';

    const frameworks = [
        { value: 'nextjs', label: 'Next.js' },
        { value: 'sveltekit', label: 'SvelteKit' },
        { value: 'nuxtjs', label: 'Nuxt.js' },
        { value: 'remix', label: 'Remix' },
        { value: 'astro', label: 'Astro' }
    ];
</script>

<div class="flex items-center justify-center">
    <div class="w-[280px]">
        <Combobox.Root>
            <Combobox.Trigger placeholder="Select a framework" class="w-full" />
            <Combobox.Content>
                <Combobox.Results>
                    {#each frameworks as item (item.value)}
                        <Combobox.Item value={item.value} label={item.label} />
                    {/each}
                </Combobox.Results>
            </Combobox.Content>
        </Combobox.Root>
    </div>
</div>
~~~~

### Input Search

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';
    import { Switch } from '@mielui/svelte/components/switch';

    let disabled = $state(false);
    let value = $state('northwind');

    const customers = [
        { value: 'northwind', label: 'Northwind Trading' },
        { value: 'halcyon', label: 'Halcyon Studio' },
        { value: 'kestrel', label: 'Kestrel Logistics' },
        { value: 'mercury', label: 'Mercury Goods' },
        { value: 'assembly', label: 'Assembly Works' }
    ];
</script>

<div class="flex justify-center">
    <div class="flex w-full max-w-[280px] flex-col gap-4">
        <Switch bind:checked={disabled} label="Disable customer selection" />
        <Combobox.Root bind:value>
            <Combobox.Trigger
                {disabled}
                appearance="input"
                placeholder="Search customers"
                class="w-full"
            />
            <Combobox.Content>
                <Combobox.Results>
                    {#each customers as item (item.value)}
                        <Combobox.Item value={item.value} label={item.label} />
                    {/each}
                </Combobox.Results>
            </Combobox.Content>
        </Combobox.Root>
    </div>
</div>
~~~~

### Menu Search

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';

    const repositories = [
        { value: 'mielui', label: 'mielui/svelte' },
        { value: 'svelte', label: 'sveltejs/svelte' },
        { value: 'vite', label: 'vitejs/vite' },
        { value: 'tailwind', label: 'tailwindlabs/tailwindcss' },
        { value: 'lucide', label: 'lucide-icons/lucide' }
    ];
</script>

<div class="flex justify-center">
    <div class="w-[300px]">
        <Combobox.Root>
            <Combobox.Trigger
                searchPlacement="menu"
                placeholder="Choose a repository"
                class="w-full"
            />
            <Combobox.Content>
                <Combobox.Results>
                    {#each repositories as repository (repository.value)}
                        <Combobox.Item value={repository.value} label={repository.label} />
                    {/each}
                </Combobox.Results>
            </Combobox.Content>
        </Combobox.Root>
    </div>
</div>
~~~~

### Multiple

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';

    let selected = $state(['design']);
    const teams = [
        { value: 'design', label: 'Design' },
        { value: 'engineering', label: 'Engineering' },
        { value: 'support', label: 'Support' },
        { value: 'operations', label: 'Operations' }
    ];
</script>

<div class="w-full max-w-xs space-y-3">
    <Combobox.Root type="multiple" bind:value={selected}>
        <Combobox.Trigger
            name="teams"
            placeholder="Choose teams"
            searchPlacement="menu"
            class="w-full"
        />
        <Combobox.Content>
            <Combobox.Results>
                {#each teams as team (team.value)}
                    <Combobox.Item value={team.value} label={team.label} />
                {/each}
                <Combobox.Item value="archived" label="Archived team" disabled />
            </Combobox.Results>
        </Combobox.Content>
    </Combobox.Root>
    <p class="text-sm text-foreground-muted" aria-live="polite">
        {selected.length}
        {selected.length === 1 ? 'team' : 'teams'} selected
    </p>
</div>
~~~~

### Scrollable

~~~~svelte
<script lang="ts">
    import * as Combobox from '@mielui/svelte/components/combobox';

    const countries = [
        { value: 'ar', label: 'Argentina' },
        { value: 'au', label: 'Australia' },
        { value: 'at', label: 'Austria' },
        { value: 'be', label: 'Belgium' },
        { value: 'br', label: 'Brazil' },
        { value: 'ca', label: 'Canada' },
        { value: 'cl', label: 'Chile' },
        { value: 'cn', label: 'China' },
        { value: 'co', label: 'Colombia' },
        { value: 'cz', label: 'Czechia' },
        { value: 'dk', label: 'Denmark' },
        { value: 'eg', label: 'Egypt' },
        { value: 'fi', label: 'Finland' },
        { value: 'fr', label: 'France' },
        { value: 'de', label: 'Germany' },
        { value: 'gr', label: 'Greece' },
        { value: 'in', label: 'India' },
        { value: 'id', label: 'Indonesia' },
        { value: 'ie', label: 'Ireland' },
        { value: 'il', label: 'Israel' },
        { value: 'it', label: 'Italy' },
        { value: 'jp', label: 'Japan' },
        { value: 'ke', label: 'Kenya' },
        { value: 'kr', label: 'South Korea' },
        { value: 'mx', label: 'Mexico' },
        { value: 'nl', label: 'Netherlands' },
        { value: 'nz', label: 'New Zealand' },
        { value: 'ng', label: 'Nigeria' },
        { value: 'no', label: 'Norway' },
        { value: 'pl', label: 'Poland' },
        { value: 'pt', label: 'Portugal' },
        { value: 'sa', label: 'Saudi Arabia' },
        { value: 'sg', label: 'Singapore' },
        { value: 'za', label: 'South Africa' },
        { value: 'es', label: 'Spain' },
        { value: 'se', label: 'Sweden' },
        { value: 'ch', label: 'Switzerland' },
        { value: 'th', label: 'Thailand' },
        { value: 'tr', label: 'Turkey' },
        { value: 'ae', label: 'United Arab Emirates' },
        { value: 'gb', label: 'United Kingdom' },
        { value: 'us', label: 'United States' }
    ];
</script>

<div class="flex justify-center">
    <div class="w-[260px]">
        <Combobox.Root>
            <Combobox.Trigger placeholder="Select a country" class="w-full" />
            <Combobox.Content class="max-h-56">
                <Combobox.Results>
                    {#each countries as country (country.value)}
                        <Combobox.Item value={country.value} label={country.label} />
                    {/each}
                </Combobox.Results>
            </Combobox.Content>
        </Combobox.Root>
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/combobox](/docs/components/combobox).


---

Source: http://sveltekit-prerender/docs/components/context-menu.md

# Context Menu

Right-click contextual menu with sub-menus and checkbox items. Positioned via @floating-ui virtual element.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils, popover, button
- Shared utilities: components/_internal/button-attributes, transition, components/_internal/surface, hugeicons-icon, utils.closeMenuLayers, utils.cn, utils.createContext, utils.travelingHighlight

## Install

~~~~sh
pnpm dlx @mielui/svelte add context-menu
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### CheckboxItem

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| callback | (() => void) \| undefined | — | No | No |
| value | string \| string \| (string & string[]) | — | Yes | No |
| inset | boolean \| undefined | false | No | No |
| checked | boolean \| undefined | false | No | Yes |
| disabled | boolean \| undefined | false | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |



### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| callback | (() => void) \| undefined | — | No | No |
| inset | boolean \| undefined | false | No | No |
| disabled | boolean \| undefined | false | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |



### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Sub

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |



### SubContent

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |



### SubTrigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| inset | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { VirtualElement } from '@floating-ui/dom';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { ButtonProps } from '../button';
import Root from './context-menu.svelte';
import CheckboxItem from './context-menu-checkbox-item.svelte';
import Content from './context-menu-content.svelte';
import Item from './context-menu-item.svelte';
import Separator from './context-menu-separator.svelte';
import Sub from './context-menu-sub.svelte';
import SubContent from './context-menu-sub-content.svelte';
import SubTrigger from './context-menu-sub-trigger.svelte';
import Trigger from './context-menu-trigger.svelte';

export type ContextMenuProps = {
    children?: Snippet;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
};
export type ContextMenuContentProps = DefaultProps & { surface?: 'solid' | 'glass' };

export type ContextMenuItemProps = {
    callback?: () => void;
    inset?: boolean;
} & ButtonProps;

export type ContextMenuCheckboxItemProps = {
    callback?: () => void;
    value: string;
    inset?: boolean;
    checked?: boolean;
} & ButtonProps;

export type ContextMenuSeparatorProps = DefaultProps;
export type ContextMenuSubContentProps = DefaultProps & { surface?: 'solid' | 'glass' };

export type ContextMenuSubTriggerProps = {
    inset?: boolean;
} & DefaultProps;

export type ContextMenuSubProps = { children?: Snippet };
export type ContextMenuTriggerProps = DefaultProps;

export type ContextMenuCheckboxItemState = {
    checked?: boolean;
    value: string;
};

export type ContextMenuState = {
    open: boolean;
    virtualElement?: VirtualElement;
    checkboxItems: Map<string, boolean>;
};

export { CheckboxItem, Content, Item, Root, Separator, Sub, SubContent, SubTrigger, Trigger };
~~~~

## Examples

### File Row

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as ContextMenu from '@mielui/svelte/components/context-menu';
    import { Input } from '@mielui/svelte/components/input';

    const initialName = 'Release notes.md';
    let name = $state(initialName);
    let draft = $state(initialName);
    let editing = $state(false);
    let message = $state('');

    function rename() {
        draft = name;
        editing = true;
    }
    function save(event: SubmitEvent) {
        event.preventDefault();
        name = draft.trim();
        editing = false;
        message = `Renamed to ${name}.`;
    }
</script>

<div class="flex w-full max-w-sm flex-col gap-3">
    <ContextMenu.Root>
        <ContextMenu.Trigger>
            <div class="rounded-[var(--radius-md)] border border-border bg-card p-4 text-sm">
                {name}
            </div>
        </ContextMenu.Trigger>
        <ContextMenu.Content>
            <ContextMenu.Item callback={rename}>Rename file</ContextMenu.Item>
        </ContextMenu.Content>
    </ContextMenu.Root>
    {#if editing}
        <form onsubmit={save} class="flex flex-col gap-3">
            <Input label="File name" bind:value={draft} required />
            <Button type="submit" disabled={!draft.trim()}>Save name</Button>
        </form>
    {/if}
    <p class="text-xs text-foreground-muted">Open the file menu to rename it.</p>
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as ContextMenu from '@mielui/svelte/components/context-menu';

    const initialName = 'Release notes.md';
    const actions = ['Open', 'Duplicate', 'Delete'] as const;
    let fileName = $state(initialName);
    let copies = $state(1);
    let deleted = $state(false);
    let message = $state('');

    function apply(action: string) {
        if (action === 'Open') {
            message = `Opened ${fileName} in this preview.`;
        } else if (action === 'Rename') {
            fileName = `Updated ${initialName.toLowerCase()}`;
            message = 'Name updated.';
        } else if (action === 'Duplicate') {
            copies += 1;
            message = `Created copy ${copies}.`;
        } else {
            deleted = true;
            message = 'Removed from this preview. Restore it to try again.';
        }
    }

    function restore() {
        deleted = false;
        copies = 1;
        fileName = initialName;
        message = '';
    }
</script>

<div class="flex w-full max-w-sm flex-col gap-3">
    {#if deleted}
        <Button variant="secondary" onclick={restore}>Restore item</Button>
    {:else}
        <ContextMenu.Root>
            <ContextMenu.Trigger>
                <div
                    class="flex min-h-28 flex-col items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-dashed border-border p-5 text-center"
                >
                    <span class="text-sm">{fileName}</span>
                    <span class="text-xs text-foreground-muted">
                        {`${copies} ${copies === 1 ? 'item' : 'items'}`}
                    </span>
                    <span class="text-xs text-foreground-muted">Right-click or press and hold</span>
                </div>
            </ContextMenu.Trigger>
            <ContextMenu.Content surface="glass">
                {#each actions as action (action)}
                    <ContextMenu.Item callback={() => apply(action)}>
                        {action}
                    </ContextMenu.Item>
                {/each}
                <ContextMenu.Separator />
                <ContextMenu.Sub>
                    <ContextMenu.SubTrigger>Organize</ContextMenu.SubTrigger>
                    <ContextMenu.SubContent>
                        <ContextMenu.Item callback={() => apply('Rename')}>
                            Rename to updated draft
                        </ContextMenu.Item>
                        <ContextMenu.Item callback={restore}>Restore original</ContextMenu.Item>
                    </ContextMenu.SubContent>
                </ContextMenu.Sub>
            </ContextMenu.Content>
        </ContextMenu.Root>
    {/if}
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as ContextMenu from '@mielui/svelte/components/context-menu';

    const initialName = 'Release notes.md';
    const actions = ['Open', 'Duplicate', 'Delete'] as const;
    let fileName = $state(initialName);
    let copies = $state(1);
    let deleted = $state(false);
    let message = $state('');

    function apply(action: string) {
        if (action === 'Open') {
            message = `Opened ${fileName} in this preview.`;
        } else if (action === 'Rename') {
            fileName = `Updated ${initialName.toLowerCase()}`;
            message = 'Name updated.';
        } else if (action === 'Duplicate') {
            copies += 1;
            message = `Created copy ${copies}.`;
        } else {
            deleted = true;
            message = 'Removed from this preview. Restore it to try again.';
        }
    }

    function restore() {
        deleted = false;
        copies = 1;
        fileName = initialName;
        message = '';
    }
</script>

<div class="flex w-full max-w-sm flex-col gap-3">
    {#if deleted}
        <Button variant="secondary" onclick={restore}>Restore item</Button>
    {:else}
        <ContextMenu.Root>
            <ContextMenu.Trigger>
                <div
                    class="flex min-h-28 flex-col items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-dashed border-border p-5 text-center"
                >
                    <span class="text-sm">{fileName}</span>
                    <span class="text-xs text-foreground-muted">
                        {`${copies} ${copies === 1 ? 'item' : 'items'}`}
                    </span>
                    <span class="text-xs text-foreground-muted">Right-click or press and hold</span>
                </div>
            </ContextMenu.Trigger>
            <ContextMenu.Content>
                {#each actions as action (action)}
                    <ContextMenu.Item callback={() => apply(action)}>
                        {action}
                    </ContextMenu.Item>
                {/each}
                <ContextMenu.Separator />
                <ContextMenu.Sub>
                    <ContextMenu.SubTrigger>Organize</ContextMenu.SubTrigger>
                    <ContextMenu.SubContent>
                        <ContextMenu.Item callback={() => apply('Rename')}>
                            Rename to updated draft
                        </ContextMenu.Item>
                        <ContextMenu.Item callback={restore}>Restore original</ContextMenu.Item>
                    </ContextMenu.SubContent>
                </ContextMenu.Sub>
            </ContextMenu.Content>
        </ContextMenu.Root>
    {/if}
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Image

~~~~svelte
<script lang="ts">
    import * as ContextMenu from '@mielui/svelte/components/context-menu';

    let rotation = $state(0);
    let message = $state('');

    function rotate() {
        rotation = (rotation + 90) % 360;
        message = `Rotated ${rotation} degrees.`;
    }

    function reset() {
        rotation = 0;
        message = 'Original orientation restored.';
    }

    async function copyLink() {
        try {
            await navigator.clipboard.writeText(
                `${window.location.origin}/docs/components/context-menu#image`
            );
            message = 'Preview link copied.';
        } catch {
            message = 'Clipboard access is unavailable.';
        }
    }
</script>

<div class="flex flex-col items-center gap-3">
    <ContextMenu.Root>
        <ContextMenu.Trigger>
            <svg
                role="img"
                aria-label="Geometric illustration"
                viewBox="0 0 160 120"
                class="h-32 w-44 rounded-[var(--radius-lg)] border border-border bg-secondary p-4"
            >
                <g transform={`rotate(${rotation} 80 60)`}>
                    <circle cx="100" cy="35" r="16" fill="var(--color-primary)" />
                    <path d="M10 100L60 35L110 100Z" fill="var(--color-foreground)" opacity="0.6" />
                    <path d="M65 100L110 60L150 100Z" fill="var(--color-primary)" />
                </g>
            </svg>
        </ContextMenu.Trigger>
        <ContextMenu.Content>
            <ContextMenu.Item callback={rotate}>Rotate clockwise</ContextMenu.Item>
            <ContextMenu.Item callback={reset}>Reset orientation</ContextMenu.Item>
            <ContextMenu.Separator />
            <ContextMenu.Item callback={copyLink}>Copy preview link</ContextMenu.Item>
        </ContextMenu.Content>
    </ContextMenu.Root>
    <p class="text-xs text-foreground-muted">Right-click or press and hold the illustration.</p>
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Task Card

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as ContextMenu from '@mielui/svelte/components/context-menu';

    const initialName = 'Release checklist';
    const actions = ['Open', 'Mark complete', 'Duplicate', 'Delete'] as const;
    let fileName = $state(initialName);
    let copies = $state(1);
    let deleted = $state(false);
    let complete = $state(false);
    let message = $state('');

    function apply(action: string) {
        if (action === 'Open') {
            message = `Opened ${fileName} in this preview.`;
        } else if (action === 'Rename') {
            fileName = `Updated ${initialName.toLowerCase()}`;
            message = 'Name updated.';
        } else if (action === 'Duplicate') {
            copies += 1;
            message = `Created copy ${copies}.`;
        } else if (action === 'Mark complete') {
            complete = !complete;
            message = complete ? 'Task completed.' : 'Task reopened.';
        } else {
            deleted = true;
            message = 'Removed from this preview. Restore it to try again.';
        }
    }

    function restore() {
        deleted = false;
        copies = 1;
        fileName = initialName;
        complete = false;
        message = '';
    }
</script>

<div class="flex w-full max-w-sm flex-col gap-3">
    {#if deleted}
        <Button variant="secondary" onclick={restore}>Restore item</Button>
    {:else}
        <ContextMenu.Root>
            <ContextMenu.Trigger>
                <div
                    class="flex min-h-28 flex-col items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-dashed border-border p-5 text-center"
                >
                    <span class="text-sm">{fileName}</span>
                    <span class="text-xs text-foreground-muted">
                        {complete ? 'Completed' : `${copies} ${copies === 1 ? 'item' : 'items'}`}
                    </span>
                    <span class="text-xs text-foreground-muted">Right-click or press and hold</span>
                </div>
            </ContextMenu.Trigger>
            <ContextMenu.Content>
                {#each actions as action (action)}
                    <ContextMenu.Item callback={() => apply(action)}>
                        {action === 'Mark complete' && complete ? 'Reopen task' : action}
                    </ContextMenu.Item>
                {/each}
            </ContextMenu.Content>
        </ContextMenu.Root>
    {/if}
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

For the rendered reference, visit [/docs/components/context-menu](/docs/components/context-menu).


---

Source: http://sveltekit-prerender/docs/components/date-picker.md

# Date Picker

Segmented date field and calendar popup with locale, validation, and form support.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, calendar, button, input
- Shared utilities: utils.cn, utils.createContext, hugeicons-icon, components/_internal/surface, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add date-picker
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| date | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| month | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| child | Snippet<[CalendarCellSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarCellSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Day

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarDaySnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarDaySnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Grid

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridBody

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridHead

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridRow

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### HeadCell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Heading

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarHeadingSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarHeadingSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Month

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| month | { value: DateValue; weeks: DateValue[][]; dates: DateValue[]; } | — | Yes | No |
| weekdays | string[] | — | Yes | No |
| locale | string \| undefined | 'en-US' | No | No |
| showHeading | boolean \| undefined | false | No | No |
| day | Snippet<[date: DateValue]> \| undefined | — | No | No |



### MonthSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| months | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarMonthSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarMonthSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### NextButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### PrevButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### YearSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| years | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarYearSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarYearSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| dir | Direction \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| align | "center" \| "start" \| "end" \| undefined | 'start' | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| onInteractOutside | InteractOutsideEventHandler \| undefined | — | No | No |
| interactOutsideBehavior | InteractOutsideBehaviorType \| undefined | — | No | No |
| onFocusOutside | ((event: FocusEvent) => void) \| undefined | — | No | No |
| preventScroll | boolean \| undefined | — | No | No |
| onEscapeKeydown | ((e: KeyboardEvent) => void) \| undefined | — | No | No |
| escapeKeydownBehavior | EscapeBehaviorType \| undefined | — | No | No |
| side | "left" \| "right" \| "top" \| "bottom" \| undefined | — | No | No |
| sideOffset | number \| undefined | 6 | No | No |
| alignOffset | number \| undefined | — | No | No |
| arrowPadding | number \| undefined | — | No | No |
| avoidCollisions | boolean \| undefined | — | No | No |
| collisionBoundary | Arrayable<Boundary> \| undefined | — | No | No |
| collisionPadding | number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>> \| undefined | 8 | No | No |
| sticky | "partial" \| "always" \| undefined | — | No | No |
| hideWhenDetached | boolean \| undefined | — | No | No |
| updatePositionStrategy | "always" \| "optimized" \| undefined | — | No | No |
| strategy | "absolute" \| "fixed" \| undefined | — | No | No |
| customAnchor | string \| HTMLElement \| Measurable \| null \| undefined | — | No | No |
| preventOverflowTextSelection | boolean \| undefined | — | No | No |
| onOpenAutoFocus | EventCallback \| undefined | — | No | No |
| onCloseAutoFocus | EventCallback \| undefined | — | No | No |
| trapFocus | boolean \| undefined | — | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| portal | boolean \| undefined | true | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Segment

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| part | "month" \| "year" \| "day" \| "hour" \| "minute" \| "second" \| "dayPeriod" \| "timeZoneName" \| "literal" | — | Yes | No |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| placeholder | DateValue \| undefined | — | No | Yes |
| disabled | boolean \| undefined | false | No | No |
| value | DateValue \| undefined | — | No | Yes |
| readonly | boolean \| undefined | false | No | No |
| required | boolean \| undefined | false | No | No |
| onValueChange | OnChangeFn<DateValue \| undefined> \| undefined | — | No | No |
| onPlaceholderChange | OnChangeFn<DateValue> \| undefined | — | No | No |
| preventDeselect | boolean \| undefined | — | No | No |
| minValue | DateValue \| undefined | — | No | No |
| maxValue | DateValue \| undefined | — | No | No |
| pagedNavigation | boolean \| undefined | — | No | No |
| weekStartsOn | WeekStartsOn \| undefined | — | No | No |
| weekdayFormat | "long" \| "short" \| "narrow" \| undefined | 'short' | No | No |
| isDateDisabled | DateMatcher \| undefined | — | No | No |
| isDateUnavailable | DateMatcher \| undefined | — | No | No |
| fixedWeeks | boolean \| undefined | true | No | No |
| numberOfMonths | number \| undefined | — | No | No |
| calendarLabel | string \| undefined | — | No | No |
| locale | string \| undefined | 'en-US' | No | No |
| initialFocus | boolean \| undefined | — | No | No |
| disableDaysOutsideMonth | boolean \| undefined | — | No | No |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | OnChangeFn<boolean> \| undefined | — | No | No |
| onOpenChangeComplete | OnChangeFn<boolean> \| undefined | — | No | No |
| validate | DateValidator \| undefined | — | No | No |
| onInvalid | DateOnInvalid \| undefined | — | No | No |
| readonlySegments | ("month" \| "year" \| "day" \| "hour" \| "minute" \| "second" \| "dayPeriod")[] \| undefined | — | No | No |
| hourCycle | 12 \| 24 \| undefined | — | No | No |
| granularity | Granularity \| undefined | — | No | No |
| hideTimeZone | boolean \| undefined | — | No | No |
| closeOnDateSelect | boolean \| undefined | — | No | No |
| errorMessageId | string \| undefined | — | No | No |



### Calendar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[CalendarRootSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[DateFieldInputSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| name | string \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| form | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| openOnHover | boolean \| undefined | — | No | No |
| openDelay | number \| undefined | — | No | No |
| closeDelay | number \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DatePicker as DatePickerPrimitive } from 'bits-ui';

export type DatePickerProps = Omit<DatePickerPrimitive.RootProps, 'child'>;

export type DatePickerContentProps = Omit<
    DatePickerPrimitive.ContentProps,
    'child' | 'forceMount'
> & {
    surface?: 'solid' | 'glass';
    portal?: boolean;
};

export {
    Cell,
    Day,
    Grid,
    GridBody,
    GridHead,
    GridRow,
    HeadCell,
    Header,
    Heading,
    Month,
    MonthSelect,
    NextButton,
    PrevButton,
    YearSelect
} from '../calendar';
export { default as Content } from '../date-picker/date-picker-content.svelte';
export { default as Label } from '../date-picker/date-picker-label.svelte';
export { default as Segment } from '../date-picker/date-picker-segment.svelte';
export { default as Root } from './date-picker.svelte';
export { default as Calendar } from './date-picker-calendar.svelte';
export { default as Input } from './date-picker-input.svelte';
export { default as Trigger } from './date-picker-trigger.svelte';
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { CalendarDate } from '@internationalized/date';
    import * as DatePicker from '@mielui/svelte/components/date-picker';
</script>

<DatePicker.Root disabled placeholder={new CalendarDate(2026, 9, 17)}>
    <div class="grid w-full max-w-lg gap-2">
        <DatePicker.Label>Dates are locked</DatePicker.Label>
        <div class="flex flex-wrap items-center gap-2">
            <DatePicker.Input name="lockedDate" />
            <DatePicker.Trigger />
        </div>
    </div>
    <DatePicker.Content align="end"><DatePicker.Calendar /></DatePicker.Content>
</DatePicker.Root>
~~~~

### Form

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import { Button } from '@mielui/svelte/components/button';
    import * as DatePicker from '@mielui/svelte/components/date-picker';

    let value = $state<DateValue | undefined>();
    let submitted = $state('');
    let readonly = $state(false);
</script>

<form
    class="grid w-full max-w-lg gap-3"
    onsubmit={(event) => {
        event.preventDefault();
        submitted = Array.from(new FormData(event.currentTarget).entries()).map(([name, entry]) => `${name}=${entry}`).join(', ');
        readonly = true;
    }}
    onreset={() => {
        submitted = '';
        readonly = false;
    }}
>
    <DatePicker.Root
        bind:value
        required
        {readonly}
        placeholder={new CalendarDate(2026, 9, 17)}
        minValue={new CalendarDate(2026, 9, 1)}
        maxValue={new CalendarDate(2026, 12, 31)}
    >
        <div class="grid gap-2">
            <DatePicker.Label>Appointment date</DatePicker.Label>
            <div class="flex flex-wrap items-center gap-2">
                <DatePicker.Input name="appointment" />
                <DatePicker.Trigger />
            </div>
        </div>
        <DatePicker.Content align="end"><DatePicker.Calendar /></DatePicker.Content>
    </DatePicker.Root>
    <p class="text-sm text-foreground-muted">
        Choose a date between September and December 2026. Saving makes the field read-only.
    </p>
    <div class="flex gap-2">
        <Button type="submit" size="sm">Save date</Button>
        <Button type="reset" variant="outline" size="sm">Reset</Button>
    </div>
    <p role="status" class="min-h-5 text-sm text-foreground-muted">
        {submitted || 'No date submitted.'}
    </p>
</form>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import * as DatePicker from '@mielui/svelte/components/date-picker';
    import * as Group from '@mielui/svelte/components/group';

    let value = $state<DateValue | undefined>(new CalendarDate(2026, 9, 17));
</script>

<div class="w-full max-w-sm">
    <DatePicker.Root bind:value calendarLabel="Publish date">
        <div class="grid gap-2">
            <DatePicker.Label>Publish date</DatePicker.Label>
            <Group.Root aria-label="Publish date controls" class="w-full">
                <DatePicker.Input name="publishDate" />
                <Group.Separator />
                <DatePicker.Trigger />
            </Group.Root>
            <p class="text-sm text-foreground-muted">
                Type a date or choose one from the calendar.
            </p>
        </div>
        <DatePicker.Content align="end">
            <DatePicker.Calendar />
        </DatePicker.Content>
    </DatePicker.Root>
</div>
~~~~

### Localized

~~~~svelte
<script lang="ts">
    import { CalendarDate } from '@internationalized/date';
    import * as DatePicker from '@mielui/svelte/components/date-picker';
</script>

<DatePicker.Root locale="fr-FR" placeholder={new CalendarDate(2026, 9, 17)} weekStartsOn={1}>
    <div class="grid w-full max-w-sm gap-2">
        <DatePicker.Label>Date du rendez-vous</DatePicker.Label>
        <div class="flex items-center gap-2">
            <DatePicker.Input name="appointment" />
            <DatePicker.Trigger aria-label="Choisir une date" />
        </div>
    </div>
    <DatePicker.Content align="end" aria-label="Choisir une date">
        <DatePicker.Calendar />
    </DatePicker.Content>
</DatePicker.Root>
~~~~

For the rendered reference, visit [/docs/components/date-picker](/docs/components/date-picker).


---

Source: http://sveltekit-prerender/docs/components/date-range-picker.md

# Date Range Picker

Segmented start/end date fields and a range calendar popup.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, date-picker, range-calendar
- Shared utilities: utils.cn, hugeicons-icon

## Install

~~~~sh
pnpm dlx @mielui/svelte add date-range-picker
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| dir | Direction \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| align | "center" \| "start" \| "end" \| undefined | 'start' | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| onInteractOutside | InteractOutsideEventHandler \| undefined | — | No | No |
| interactOutsideBehavior | InteractOutsideBehaviorType \| undefined | — | No | No |
| onFocusOutside | ((event: FocusEvent) => void) \| undefined | — | No | No |
| preventScroll | boolean \| undefined | — | No | No |
| onEscapeKeydown | ((e: KeyboardEvent) => void) \| undefined | — | No | No |
| escapeKeydownBehavior | EscapeBehaviorType \| undefined | — | No | No |
| side | "left" \| "right" \| "top" \| "bottom" \| undefined | — | No | No |
| sideOffset | number \| undefined | 6 | No | No |
| alignOffset | number \| undefined | — | No | No |
| arrowPadding | number \| undefined | — | No | No |
| avoidCollisions | boolean \| undefined | — | No | No |
| collisionBoundary | Arrayable<Boundary> \| undefined | — | No | No |
| collisionPadding | number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>> \| undefined | 8 | No | No |
| sticky | "partial" \| "always" \| undefined | — | No | No |
| hideWhenDetached | boolean \| undefined | — | No | No |
| updatePositionStrategy | "always" \| "optimized" \| undefined | — | No | No |
| strategy | "absolute" \| "fixed" \| undefined | — | No | No |
| customAnchor | string \| HTMLElement \| Measurable \| null \| undefined | — | No | No |
| preventOverflowTextSelection | boolean \| undefined | — | No | No |
| onOpenAutoFocus | EventCallback \| undefined | — | No | No |
| onCloseAutoFocus | EventCallback \| undefined | — | No | No |
| trapFocus | boolean \| undefined | — | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| portal | boolean \| undefined | true | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Segment

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| part | "month" \| "year" \| "day" \| "hour" \| "minute" \| "second" \| "dayPeriod" \| "timeZoneName" \| "literal" | — | Yes | No |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| date | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| month | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| child | Snippet<[CalendarCellSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarCellSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Day

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarDaySnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarDaySnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Grid

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridBody

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridHead

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridRow

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### HeadCell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Heading

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarHeadingSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarHeadingSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Month

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| month | { value: DateValue; weeks: DateValue[][]; dates: DateValue[]; } | — | Yes | No |
| weekdays | string[] | — | Yes | No |
| locale | string \| undefined | 'en-US' | No | No |
| showHeading | boolean \| undefined | false | No | No |
| day | Snippet<[date: DateValue]> \| undefined | — | No | No |



### MonthSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| months | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarMonthSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarMonthSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### NextButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### PrevButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### YearSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| years | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarYearSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarYearSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| placeholder | DateValue \| undefined | — | No | Yes |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| value | DateRange \| undefined | — | No | Yes |
| readonly | boolean \| undefined | false | No | No |
| required | boolean \| undefined | false | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| onValueChange | OnChangeFn<DateRange> \| undefined | — | No | No |
| onPlaceholderChange | OnChangeFn<DateValue> \| undefined | — | No | No |
| preventDeselect | boolean \| undefined | — | No | No |
| minValue | DateValue \| undefined | — | No | No |
| maxValue | DateValue \| undefined | — | No | No |
| pagedNavigation | boolean \| undefined | — | No | No |
| weekStartsOn | WeekStartsOn \| undefined | — | No | No |
| weekdayFormat | "long" \| "short" \| "narrow" \| undefined | 'short' | No | No |
| isDateDisabled | DateMatcher \| undefined | — | No | No |
| isDateUnavailable | DateMatcher \| undefined | — | No | No |
| fixedWeeks | boolean \| undefined | true | No | No |
| numberOfMonths | number \| undefined | — | No | No |
| calendarLabel | string \| undefined | — | No | No |
| locale | string \| undefined | 'en-US' | No | No |
| disableDaysOutsideMonth | boolean \| undefined | — | No | No |
| maxDays | number \| undefined | — | No | No |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | OnChangeFn<boolean> \| undefined | — | No | No |
| onOpenChangeComplete | OnChangeFn<boolean> \| undefined | — | No | No |
| validate | DateRangeValidator \| undefined | — | No | No |
| onInvalid | DateOnInvalid \| undefined | — | No | No |
| readonlySegments | ("month" \| "year" \| "day" \| "hour" \| "minute" \| "second" \| "dayPeriod")[] \| undefined | — | No | No |
| hourCycle | 12 \| 24 \| undefined | — | No | No |
| granularity | Granularity \| undefined | — | No | No |
| hideTimeZone | boolean \| undefined | — | No | No |
| errorMessageId | string \| undefined | — | No | No |
| closeOnRangeSelect | boolean \| undefined | — | No | No |
| onStartValueChange | OnChangeFn<DateValue \| undefined> \| undefined | — | No | No |
| onEndValueChange | OnChangeFn<DateValue \| undefined> \| undefined | — | No | No |
| minDays | number \| undefined | — | No | No |
| excludeDisabled | boolean \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Calendar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[CalendarRootSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[DateRangeFieldInputSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| type | "start" \| "end" | — | Yes | No |
| name | string \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| form | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| openOnHover | boolean \| undefined | — | No | No |
| openDelay | number \| undefined | — | No | No |
| closeDelay | number \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DateRangePicker as DatePickerPrimitive } from 'bits-ui';

export type DateRangePickerProps = Omit<DatePickerPrimitive.RootProps, 'child'>;

export { default as Content } from '../date-picker/date-picker-content.svelte';
export { default as Segment } from '../date-picker/date-picker-segment.svelte';
export {
    Cell,
    Day,
    Grid,
    GridBody,
    GridHead,
    GridRow,
    HeadCell,
    Header,
    Heading,
    Month,
    MonthSelect,
    NextButton,
    PrevButton,
    YearSelect
} from '../range-calendar';
export { default as Root } from './date-range-picker.svelte';
export { default as Calendar } from './date-range-picker-calendar.svelte';
export { default as Input } from './date-range-picker-input.svelte';
export { default as Label } from './date-range-picker-label.svelte';
export { default as Trigger } from './date-range-picker-trigger.svelte';
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { CalendarDate } from '@internationalized/date';
    import * as DateRangePicker from '@mielui/svelte/components/date-range-picker';
</script>

<DateRangePicker.Root disabled placeholder={new CalendarDate(2026, 9, 17)}>
    <div class="grid w-full max-w-lg gap-2">
        <DateRangePicker.Label>Dates are locked</DateRangePicker.Label>
        <div class="flex flex-wrap items-center gap-2">
            <DateRangePicker.Input name="lockedStart" type="start" aria-label="Start date" />
            <DateRangePicker.Input name="lockedEnd" type="end" aria-label="End date" />
            <DateRangePicker.Trigger />
        </div>
    </div>
    <DateRangePicker.Content align="end"><DateRangePicker.Calendar /></DateRangePicker.Content>
</DateRangePicker.Root>
~~~~

### Form

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import { Button } from '@mielui/svelte/components/button';
    import * as DateRangePicker from '@mielui/svelte/components/date-range-picker';

    let value = $state<{ start: DateValue | undefined; end: DateValue | undefined }>({
        start: undefined,
        end: undefined
    });
    let submitted = $state('');
    let readonly = $state(false);
</script>

<form
    class="grid w-full max-w-lg gap-3"
    onsubmit={(event) => {
        event.preventDefault();
        submitted = Array.from(new FormData(event.currentTarget).entries()).map(([name, entry]) => `${name}=${entry}`).join(', ');
        readonly = true;
    }}
    onreset={() => {
        submitted = '';
        readonly = false;
    }}
>
    <DateRangePicker.Root
        bind:value
        required
        {readonly}
        placeholder={new CalendarDate(2026, 9, 17)}
        minValue={new CalendarDate(2026, 9, 1)}
        maxValue={new CalendarDate(2026, 12, 31)}
    >
        <div class="grid gap-2">
            <DateRangePicker.Label>Travel dates</DateRangePicker.Label>
            <div class="flex flex-wrap items-center gap-2">
                <DateRangePicker.Input type="start" name="arrival" aria-label="Arrival" />
                <DateRangePicker.Input type="end" name="departure" aria-label="Departure" />
                <DateRangePicker.Trigger />
            </div>
        </div>
        <DateRangePicker.Content align="end"><DateRangePicker.Calendar /></DateRangePicker.Content>
    </DateRangePicker.Root>
    <p class="text-sm text-foreground-muted">
        Choose both dates between September and December 2026. Saving makes the field read-only.
    </p>
    <div class="flex gap-2">
        <Button type="submit" size="sm">Save dates</Button>
        <Button type="reset" variant="outline" size="sm">Reset</Button>
    </div>
    <p role="status" class="min-h-5 text-sm text-foreground-muted">
        {submitted || 'No date submitted.'}
    </p>
</form>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import * as DateRangePicker from '@mielui/svelte/components/date-range-picker';
    import * as Group from '@mielui/svelte/components/group';

    let value = $state<{
        start: DateValue | undefined;
        end: DateValue | undefined;
    }>({
        start: new CalendarDate(2026, 9, 17),
        end: new CalendarDate(2026, 9, 23)
    });
</script>

<div class="w-full max-w-lg">
    <DateRangePicker.Root bind:value calendarLabel="Travel dates">
        <div class="grid gap-2">
            <DateRangePicker.Label>Travel dates</DateRangePicker.Label>
            <Group.Root aria-label="Travel date controls" class="w-full">
                <DateRangePicker.Input type="start" name="startDate" aria-label="Start date" />
                <Group.Separator />
                <DateRangePicker.Input type="end" name="endDate" aria-label="End date" />
                <Group.Separator />
                <DateRangePicker.Trigger />
            </Group.Root>
            <p class="text-sm text-foreground-muted">
                Choose a start and end date, or edit each field.
            </p>
        </div>
        <DateRangePicker.Content align="end">
            <DateRangePicker.Calendar />
        </DateRangePicker.Content>
    </DateRangePicker.Root>
</div>
~~~~

### Two Months

~~~~svelte
<script lang="ts">
    import { CalendarDate } from '@internationalized/date';
    import * as DateRangePicker from '@mielui/svelte/components/date-range-picker';
</script>

<DateRangePicker.Root
    numberOfMonths={2}
    pagedNavigation
    minDays={3}
    maxDays={14}
    placeholder={new CalendarDate(2026, 9, 17)}
>
    <div class="grid w-full max-w-lg gap-2">
        <DateRangePicker.Label>Booking dates</DateRangePicker.Label>
        <div class="flex flex-wrap items-center gap-2">
            <DateRangePicker.Input type="start" name="arrival" aria-label="Arrival" />
            <DateRangePicker.Input type="end" name="departure" aria-label="Departure" />
            <DateRangePicker.Trigger />
        </div>
    </div>
    <DateRangePicker.Content align="end"><DateRangePicker.Calendar /></DateRangePicker.Content>
</DateRangePicker.Root>
~~~~

For the rendered reference, visit [/docs/components/date-range-picker](/docs/components/date-range-picker).


---

Source: http://sveltekit-prerender/docs/components/dialog.md

# Dialog

Centered dialog overlay with portal, inert background, focus trap, click-outside, nested stacking, and Svelte transitions. Composes _internal/overlay for shared mechanics.

- Package: `@mielui/svelte`
- Component version: `1.3.1`
- Depends on Mielui components: _internal/utils, button, _internal/overlay, typography
- Shared utilities: components/_internal/inset-layout, components/_internal/surface, hugeicons-icon, utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add dialog
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Body

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Close

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Confirm

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | true | No | No |
| allowEscape | boolean \| undefined | true | No | No |
| role | "alertdialog" \| "dialog" \| undefined | 'dialog' | No | No |
| contentClass | string \| undefined | '' | No | No |
| overlayClass | string \| undefined | '' | No | No |
| surfaceClass | string \| undefined | '' | No | No |
| panelIdPrefix | string \| undefined | 'dialog' | No | No |
| showClose | boolean \| undefined | true | No | No |
| size | DialogSize \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| error | boolean \| undefined | false | No | No |
| orientation | DialogOrientation \| undefined | 'horizontal' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { ButtonProps } from '../button';
import Root from './dialog.svelte';
import Body from './dialog-body.svelte';
import Close from './dialog-close.svelte';
import Confirm from './dialog-confirm.svelte';
import Content from './dialog-content.svelte';
import Description from './dialog-description.svelte';
import Footer from './dialog-footer.svelte';
import Header from './dialog-header.svelte';
import Title from './dialog-title.svelte';
import Trigger from './dialog-trigger.svelte';

export type DialogState = {
    open: boolean;
    error: boolean;
    orientation: DialogOrientation;
};

export type DialogOrientation = 'horizontal' | 'vertical';
export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';

export type DialogTriggerProps = ButtonProps;
export type DialogTitleProps = DefaultProps;
export type DialogHeaderProps = DefaultProps;
export type DialogFooterProps = DefaultProps;
export type DialogBodyProps = DefaultProps;
export type DialogConfirmProps = ButtonProps;
export type DialogCloseProps = ButtonProps;
export type DialogDescriptionProps = DefaultProps;

export type DialogContentProps = {
    surface?: 'solid' | 'glass';
    allowClickOutside?: boolean;
    allowEscape?: boolean;
    role?: 'dialog' | 'alertdialog';
    contentClass?: string;
    overlayClass?: string;
    surfaceClass?: string;
    panelIdPrefix?: string;
    showClose?: boolean;
    /** Width preset. Vertical layouts remain compact; horizontal layouts are one step wider. */
    size?: DialogSize;
} & DefaultProps &
    Partial<Record<`aria-${string}`, string | boolean | null | undefined>>;

export type DialogProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    /** Sets supported browser chrome to red while the dialog is open. */
    error?: boolean;
    /** Controls the default width and action layout. Defaults to `horizontal`. */
    orientation?: DialogOrientation;
    children?: Snippet;
};

export { Body, Close, Confirm, Content, Description, Footer, Header, Root, Title, Trigger };
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import * as Dialog from '@mielui/svelte/components/dialog';
    import Kbd from '@mielui/svelte/components/kbd';

    let open = $state(false);
</script>

<Dialog.Root bind:open>
    <Dialog.Trigger>Open dialog</Dialog.Trigger>
    <Dialog.Content>
        <Dialog.Header>
            <Dialog.Title>Dialog title</Dialog.Title>
            <Dialog.Description>Describe what happens here.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
            <Dialog.Close>
                Cancel
                <Kbd shortcut="esc" />
            </Dialog.Close>
            <Dialog.Confirm>
                Confirm
                <Kbd shortcut="enter" />
            </Dialog.Confirm>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import { Globe02Icon as Globe } from '@hugeicons/core-free-icons';
    import * as Dialog from '@mielui/svelte/components/dialog';
    import { Input } from '@mielui/svelte/components/input';
    import Kbd from '@mielui/svelte/components/kbd';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(false);
    let domain = $state('');
    let addedDomain = $state('');

    function addDomain() {
        addedDomain = domain.trim();
        domain = '';
    }
</script>

<div class="flex flex-col items-center gap-3">
    <Dialog.Root bind:open orientation="vertical">
        <Dialog.Trigger>Add Domain</Dialog.Trigger>
        <Dialog.Content surface="glass">
            <Dialog.Header>
                <div class="flex items-center gap-2.5">
                    <HugeiconsIcon icon={Globe} size={18} class="text-foreground-muted" />
                    <Dialog.Title>Add a domain</Dialog.Title>
                </div>
                <Dialog.Description>
                    Add a domain to this local preview. No DNS settings are changed.
                </Dialog.Description>
            </Dialog.Header>
            <Dialog.Body class="gap-4">
                <Input
                    bind:value={domain}
                    label="Domain"
                    placeholder="example.com"
                    description="Enter a domain name, such as example.com."
                />
            </Dialog.Body>
            <Dialog.Footer>
                <Dialog.Close>
                    Cancel
                    <Kbd shortcut="esc" />
                </Dialog.Close>
                <Dialog.Confirm disabled={!domain.trim()} onclick={addDomain}>
                    Add
                    <Kbd shortcut="enter" />
                </Dialog.Confirm>
            </Dialog.Footer>
        </Dialog.Content>
    </Dialog.Root>

    {#if addedDomain}
        <p role="status" class="text-sm text-foreground-muted">
            {`${addedDomain} added to the preview.`}
        </p>
    {/if}
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Globe02Icon as Globe } from '@hugeicons/core-free-icons';
    import * as Dialog from '@mielui/svelte/components/dialog';
    import { Input } from '@mielui/svelte/components/input';
    import Kbd from '@mielui/svelte/components/kbd';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(false);
    let domain = $state('');
    let addedDomain = $state('');

    function addDomain() {
        addedDomain = domain.trim();
        domain = '';
    }
</script>

<div class="flex flex-col items-center gap-3">
    <Dialog.Root bind:open orientation="vertical">
        <Dialog.Trigger>Add Domain</Dialog.Trigger>
        <Dialog.Content>
            <Dialog.Header>
                <div class="flex items-center gap-2.5">
                    <HugeiconsIcon icon={Globe} size={18} class="text-foreground-muted" />
                    <Dialog.Title>Add a domain</Dialog.Title>
                </div>
                <Dialog.Description>
                    Add a domain to this local preview. No DNS settings are changed.
                </Dialog.Description>
            </Dialog.Header>
            <Dialog.Body class="gap-4">
                <Input
                    bind:value={domain}
                    label="Domain"
                    placeholder="example.com"
                    description="Enter a domain name, such as example.com."
                />
            </Dialog.Body>
            <Dialog.Footer>
                <Dialog.Close>
                    Cancel
                    <Kbd shortcut="esc" />
                </Dialog.Close>
                <Dialog.Confirm disabled={!domain.trim()} onclick={addDomain}>
                    Add
                    <Kbd shortcut="enter" />
                </Dialog.Confirm>
            </Dialog.Footer>
        </Dialog.Content>
    </Dialog.Root>

    {#if addedDomain}
        <p role="status" class="text-sm text-foreground-muted">
            {`${addedDomain} added to the preview.`}
        </p>
    {/if}
</div>
~~~~

### Nested

~~~~svelte
<script lang="ts">
    import * as Dialog from '@mielui/svelte/components/dialog';
    import Kbd from '@mielui/svelte/components/kbd';

    let open = $state(false);
    let nestedOpen = $state(false);
</script>

<Dialog.Root bind:open orientation="vertical">
    <Dialog.Trigger>Edit project</Dialog.Trigger>
    <Dialog.Content>
        <Dialog.Header>
            <Dialog.Title>Edit project</Dialog.Title>
            <Dialog.Description>
                Change the name, or transfer this project to someone else.
            </Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
            <Dialog.Root bind:open={nestedOpen} orientation="vertical">
                <Dialog.Trigger variant="outline">Transfer ownership</Dialog.Trigger>
                <Dialog.Content>
                    <Dialog.Header>
                        <Dialog.Title>Transfer ownership</Dialog.Title>
                        <Dialog.Description>
                            The new owner gets full control. You will remain a member.
                        </Dialog.Description>
                    </Dialog.Header>
                    <Dialog.Footer>
                        <Dialog.Close>
                            Cancel
                            <Kbd shortcut="esc" />
                        </Dialog.Close>
                        <Dialog.Confirm>
                            Transfer
                            <Kbd shortcut="enter" />
                        </Dialog.Confirm>
                    </Dialog.Footer>
                </Dialog.Content>
            </Dialog.Root>
        </Dialog.Body>
        <Dialog.Footer>
            <Dialog.Close>
                Cancel
                <Kbd shortcut="esc" />
            </Dialog.Close>
            <Dialog.Confirm>
                Save
                <Kbd shortcut="enter" />
            </Dialog.Confirm>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
~~~~

### Size Compact

~~~~svelte
<script lang="ts">
    import * as Dialog from '@mielui/svelte/components/dialog';
    import Kbd from '@mielui/svelte/components/kbd';

    let open = $state(false);
</script>

<Dialog.Root bind:open orientation="vertical">
    <Dialog.Trigger variant="outline">Open compact dialog</Dialog.Trigger>
    <Dialog.Content size="sm">
        <Dialog.Header>
            <Dialog.Title>Quick action</Dialog.Title>
            <Dialog.Description>
                Keep short confirmations focused with the compact size.
            </Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
            <Dialog.Close>
                Cancel
                <Kbd shortcut="esc" />
            </Dialog.Close>
            <Dialog.Confirm>
                Continue
                <Kbd shortcut="enter" />
            </Dialog.Confirm>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
~~~~

### Size Large

~~~~svelte
<script lang="ts">
    import * as Dialog from '@mielui/svelte/components/dialog';
    import Kbd from '@mielui/svelte/components/kbd';

    let open = $state(false);
</script>

<Dialog.Root bind:open orientation="vertical">
    <Dialog.Trigger variant="outline">Open large dialog</Dialog.Trigger>
    <Dialog.Content size="lg">
        <Dialog.Header>
            <Dialog.Title>Review your workspace</Dialog.Title>
            <Dialog.Description>
                Use a larger surface when the dialog needs room for supporting details or multiple
                controls.
            </Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
            <p class="text-sm text-foreground-muted">
                Invite teammates, configure permissions, and review workspace settings in one place.
            </p>
        </Dialog.Body>
        <Dialog.Footer>
            <Dialog.Close>
                Cancel
                <Kbd shortcut="esc" />
            </Dialog.Close>
            <Dialog.Confirm>
                Save changes
                <Kbd shortcut="enter" />
            </Dialog.Confirm>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
~~~~

### Size Wide

~~~~svelte
<script lang="ts">
    import * as Dialog from '@mielui/svelte/components/dialog';
    import Kbd from '@mielui/svelte/components/kbd';

    let open = $state(false);
</script>

<Dialog.Root bind:open orientation="horizontal">
    <Dialog.Trigger variant="outline">Open wide dialog</Dialog.Trigger>
    <Dialog.Content size="xl">
        <Dialog.Header>
            <Dialog.Title>Import project data</Dialog.Title>
            <Dialog.Description>
                Wide modals work well for previews, tables, and other content that benefits from
                horizontal space.
            </Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
            <div class="grid gap-3 sm:grid-cols-2">
                <div class="rounded-[var(--radius-md)] border border-border bg-secondary p-4">
                    <p class="font-medium text-foreground">Repositories</p>
                    <p class="mt-1 text-sm text-foreground-muted">
                        Choose which repositories to import.
                    </p>
                </div>
                <div class="rounded-[var(--radius-md)] border border-border bg-secondary p-4">
                    <p class="font-medium text-foreground">Environment</p>
                    <p class="mt-1 text-sm text-foreground-muted">
                        Set the target deployment environment.
                    </p>
                </div>
            </div>
        </Dialog.Body>
        <Dialog.Footer>
            <Dialog.Close>
                Cancel
                <Kbd shortcut="esc" />
            </Dialog.Close>
            <Dialog.Confirm>
                Import
                <Kbd shortcut="enter" />
            </Dialog.Confirm>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
~~~~

### With Select

~~~~svelte
<script lang="ts">
    import * as Dialog from '@mielui/svelte/components/dialog';
    import Kbd from '@mielui/svelte/components/kbd';
    import * as Select from '@mielui/svelte/components/select';

    let open = $state(false);
    let role = $state('editor');

    const roles = [
        { value: 'viewer', label: 'Viewer' },
        { value: 'editor', label: 'Editor' },
        { value: 'admin', label: 'Admin' }
    ];

    const selected = $derived(roles.find((option) => option.value === role));
</script>

<Dialog.Root bind:open>
    <Dialog.Trigger>Invite member</Dialog.Trigger>
    <Dialog.Content>
        <Dialog.Header>
            <Dialog.Title>Invite member</Dialog.Title>
            <Dialog.Description>Choose a role for the new member.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
            <div class="flex flex-col gap-2">
                <span class="text-sm [font-weight:var(--font-weight-label,500)] text-foreground">
                    Role
                </span>
                <Select.Root bind:value={role}>
                    <Select.Trigger class="w-full" variant="outline" size="md">
                        {selected?.label ?? 'Select role'}
                    </Select.Trigger>
                    <Select.Content>
                        {#each roles as option (option.value)}
                            <Select.Item value={option.value}>
                                {option.label}
                            </Select.Item>
                        {/each}
                    </Select.Content>
                </Select.Root>
            </div>
        </Dialog.Body>
        <Dialog.Footer>
            <Dialog.Close>
                Cancel
                <Kbd shortcut="esc" />
            </Dialog.Close>
            <Dialog.Confirm>
                Invite
                <Kbd shortcut="enter" />
            </Dialog.Confirm>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
~~~~

For the rendered reference, visit [/docs/components/dialog](/docs/components/dialog).


---

Source: http://sveltekit-prerender/docs/components/drawer.md

# Drawer

Swipeable edge panel with accessible focus management and direct manipulation.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button
- Shared utilities: utils.cn, utils.pressable

## Install

~~~~sh
pnpm dlx @mielui/svelte add drawer
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Body

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Close

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| element | HTMLButtonElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| onInteractOutside | InteractOutsideEventHandler \| undefined | — | No | No |
| interactOutsideBehavior | InteractOutsideBehaviorType \| undefined | — | No | No |
| restoreScrollDelay | number \| null \| undefined | — | No | No |
| onEscapeKeydown | ((e: KeyboardEvent) => void) \| undefined | — | No | No |
| escapeKeydownBehavior | EscapeBehaviorType \| undefined | — | No | No |
| forceMount | boolean \| undefined | — | No | No |
| preventOverflowTextSelection | boolean \| undefined | — | No | No |
| onOpenAutoFocus | EventCallback \| undefined | — | No | No |
| onCloseAutoFocus | EventCallback \| undefined | — | No | No |
| trapFocus | boolean \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| element | HTMLParagraphElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Handle

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Overlay

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| forceMount | boolean \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Portal

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| to | PortalTarget \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| direction | "left" \| "right" \| "top" \| "bottom" \| undefined | — | No | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| closeThreshold | number \| undefined | — | No | No |
| handleOnly | boolean \| undefined | — | No | No |
| dismissible | boolean \| undefined | true | No | No |
| repositionInputs | boolean \| undefined | — | No | No |
| nested | boolean \| undefined | false | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| level | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined | — | No | No |
| element | HTMLHeadingElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| element | HTMLButtonElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type { Drawer as Primitive } from 'vaul-svelte';

export { default as Body } from './drawer-body.svelte';
export { default as Close } from './drawer-close.svelte';
export { default as Content } from './drawer-content.svelte';
export { default as Description } from './drawer-description.svelte';
export { default as Footer } from './drawer-footer.svelte';
export { default as Handle } from './drawer-handle.svelte';
export { default as Header } from './drawer-header.svelte';
export { default as Overlay } from './drawer-overlay.svelte';
export { default as Portal } from './drawer-portal.svelte';
export { default as Root } from './drawer-root.svelte';
export { default as Title } from './drawer-title.svelte';
export { default as Trigger } from './drawer-trigger.svelte';
export type DrawerRootProps = Pick<
    Primitive.RootProps,
    | 'children'
    | 'open'
    | 'onOpenChange'
    | 'direction'
    | 'dismissible'
    | 'handleOnly'
    | 'closeThreshold'
    | 'repositionInputs'
> & { nested?: boolean };
export type DrawerTriggerProps = Omit<Primitive.TriggerProps, 'child' | 'ref'> & {
    element?: HTMLButtonElement | null;
};
export type DrawerCloseProps = Omit<Primitive.CloseProps, 'child' | 'ref'> & {
    element?: HTMLButtonElement | null;
};
export type DrawerTitleProps = Omit<Primitive.TitleProps, 'child' | 'ref'> & {
    element?: HTMLHeadingElement | null;
};
export type DrawerDescriptionProps = Omit<Primitive.DescriptionProps, 'child' | 'ref'> & {
    element?: HTMLParagraphElement | null;
};
export type DrawerContentProps = Omit<
    Primitive.ContentProps,
    'child' | 'ref' | 'onFocusOutside'
> & {
    element?: HTMLDivElement | null;
};
export type DrawerOverlayProps = Omit<Primitive.OverlayProps, 'child' | 'ref'> & {
    element?: HTMLDivElement | null;
};
export type DrawerHandleProps = Omit<Primitive.HandleProps, 'child' | 'ref' | 'preventCycle'> & {
    element?: HTMLDivElement | null;
};
export type DrawerPortalProps = Primitive.PortalProps;
export type DrawerRegionProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    children?: Snippet;
    element?: HTMLDivElement | null;
};
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import * as Drawer from '@mielui/svelte/components/drawer';
    import { Slider } from '@mielui/svelte/components/slider';
    import { Switch } from '@mielui/svelte/components/switch';

    let textSize = $state(18);
    let comfortableSpacing = $state(true);
</script>

<Drawer.Root handleOnly>
    <Drawer.Trigger>Reading preferences</Drawer.Trigger>
    <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
            <Drawer.Handle />
            <Drawer.Header class="mx-auto w-full max-w-xl">
                <Drawer.Title>Make yourself comfortable</Drawer.Title>
                <Drawer.Description>Adjust the text to suit the way you read.</Drawer.Description>
            </Drawer.Header>
            <Drawer.Body class="mx-auto flex w-full max-w-xl flex-col gap-6 py-6">
                <div class="flex flex-col gap-3" data-vaul-no-drag>
                    <div class="flex items-center justify-between text-sm">
                        <span>Text size</span>
                        <span class="tabular-nums text-foreground-muted">
                            <span use:numberShuffle={{ value: textSize }}>{textSize}</span> px
                        </span>
                    </div>
                    <Slider bind:value={textSize} min={14} max={24} step={1} label="Text size" />
                </div>
                <Switch bind:switched={comfortableSpacing} label="Comfortable spacing" />
                <p
                    class="rounded-[var(--radius-lg)] bg-secondary p-4 text-foreground-muted"
                    style:font-size={`${textSize}px`}
                    style:line-height={comfortableSpacing ? 1.8 : 1.4}
                >
                    A quiet place to pause, find a new idea, and enjoy the next page.
                </p>
            </Drawer.Body>
            <Drawer.Footer class="mx-auto w-full max-w-xl">
                <Drawer.Close>Done</Drawer.Close>
            </Drawer.Footer>
        </Drawer.Content>
    </Drawer.Portal>
</Drawer.Root>
~~~~

### Nested

~~~~svelte
<script lang="ts">
    import * as Drawer from '@mielui/svelte/components/drawer';
</script>
<Drawer.Root>
    <Drawer.Trigger>Review changes</Drawer.Trigger>
    <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
            <Drawer.Handle />
            <Drawer.Header class="mx-auto w-full max-w-xl">
                <Drawer.Title>Review changes</Drawer.Title>
                <Drawer.Description>
                    Three updates are ready to apply to your reading list.
                </Drawer.Description>
            </Drawer.Header>
            <Drawer.Body class="mx-auto w-full max-w-xl">
                <dl class="mb-5 divide-y divide-border text-sm">
                    <div class="flex justify-between gap-4 py-3">
                        <dt class="text-foreground-muted">Collection</dt>
                        <dd>Weekend reading</dd>
                    </div>
                    <div class="flex justify-between gap-4 py-3">
                        <dt class="text-foreground-muted">Articles added</dt>
                        <dd class="tabular-nums">2</dd>
                    </div>
                    <div class="flex justify-between gap-4 py-3">
                        <dt class="text-foreground-muted">Articles archived</dt>
                        <dd class="tabular-nums">1</dd>
                    </div>
                </dl>
                <Drawer.Root nested>
                    <Drawer.Trigger>Review details</Drawer.Trigger>
                    <Drawer.Portal>
                        <Drawer.Overlay />
                        <Drawer.Content>
                            <Drawer.Handle />
                            <Drawer.Header class="mx-auto w-full max-w-xl">
                                <Drawer.Title>Change details</Drawer.Title>
                                <Drawer.Description>
                                    Review the articles included in this update.
                                </Drawer.Description>
                            </Drawer.Header>
                            <Drawer.Body class="mx-auto w-full max-w-xl">
                                <ul class="divide-y divide-border text-sm">
                                    <li class="flex justify-between gap-4 py-4">
                                        <span>The art of paying attention</span>
                                        <span class="text-foreground-muted">Added</span>
                                    </li>
                                    <li class="flex justify-between gap-4 py-4">
                                        <span>A slower kind of weekend</span>
                                        <span class="text-foreground-muted">Added</span>
                                    </li>
                                    <li class="flex justify-between gap-4 py-4">
                                        <span>Notes from the city</span>
                                        <span class="text-foreground-muted">Archived</span>
                                    </li>
                                </ul>
                            </Drawer.Body>
                            <Drawer.Footer class="mx-auto w-full max-w-xl">
                                <Drawer.Close>Back to review</Drawer.Close>
                            </Drawer.Footer>
                        </Drawer.Content>
                    </Drawer.Portal>
                </Drawer.Root>
            </Drawer.Body>
            <Drawer.Footer class="mx-auto w-full max-w-xl">
                <Drawer.Close>Finish review</Drawer.Close>
            </Drawer.Footer>
        </Drawer.Content>
    </Drawer.Portal>
</Drawer.Root>
~~~~

For the rendered reference, visit [/docs/components/drawer](/docs/components/drawer).


---

Source: http://sveltekit-prerender/docs/components/dropdown-menu.md

# Dropdown Menu

Click-triggered menu popover with items, labels, separators, and nested submenus.

- Package: `@mielui/svelte`
- Component version: `2.2.0`
- Depends on Mielui components: _internal/utils, popover, button, scroll-area
- Shared utilities: components/_internal/button-attributes, transition, components/_internal/surface, hugeicons-icon, utils.closeMenuLayers, utils.cn, utils.createContext, utils.dynamicWidth, utils.travelingHighlight

## Install

~~~~sh
pnpm dlx @mielui/svelte add dropdown-menu
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### CheckboxItem

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| checked | boolean \| undefined | false | No | Yes |
| onCheckedChange | ((checked: boolean) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |
| dynamic | boolean \| undefined | false | No | No |
| tabindex | number \| undefined | -1 | No | No |
| role | "none" \| "alertdialog" \| "dialog" \| "listbox" \| "menu" \| undefined | 'menu' | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | true | No | No |
| dismissLayer | boolean \| undefined | true | No | No |
| portal | boolean \| undefined | true | No | No |
| refElement | VirtualElement \| undefined | — | No | No |
| focusTrap | boolean \| undefined | false | No | No |
| lockScroll | boolean \| undefined | false | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| callback | (() => void) \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |



### RadioGroup

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| undefined | '' | No | Yes |
| onValueChange | ((value: string) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### RadioItem

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| (string & string[]) | — | Yes | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Sub

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |



### SubContent

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |
| dynamic | boolean \| undefined | false | No | No |



### SubTrigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| icon | boolean \| undefined | — | No | No |
| onopen | (() => void) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| style | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| icon | boolean \| undefined | — | No | No |
| onopen | (() => void) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { ButtonProps } from '@mielui/svelte/components/button';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import Root from './dropdown-menu.svelte';
import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
import Content from './dropdown-menu-content.svelte';
import Item from './dropdown-menu-item.svelte';
import Label from './dropdown-menu-label.svelte';
import RadioGroup from './dropdown-menu-radio-group.svelte';
import RadioItem from './dropdown-menu-radio-item.svelte';
import Separator from './dropdown-menu-separator.svelte';
import Sub from './dropdown-menu-sub.svelte';
import SubContent from './dropdown-menu-sub-content.svelte';
import SubTrigger from './dropdown-menu-sub-trigger.svelte';
import Trigger from './dropdown-menu-trigger.svelte';

export type DropdownMenuProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    children?: Snippet;
};

export type DropdownMenuItemProps = {
    callback?: () => void;
} & ButtonProps;

export type DropdownMenuRadioGroupProps = {
    value?: string;
    onValueChange?: (value: string) => void;
    children?: Snippet;
};

export type DropdownMenuRadioItemProps = {
    value: string;
    children?: Snippet;
    element?: HTMLButtonElement | HTMLAnchorElement;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'children' | 'role' | 'aria-checked'>;

export type DropdownMenuCheckboxItemProps = {
    checked?: boolean;
    onCheckedChange?: (checked: boolean) => void;
    children?: Snippet;
    element?: HTMLButtonElement | HTMLAnchorElement;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'children' | 'role' | 'aria-checked'>;

export {
    CheckboxItem,
    Content,
    Item,
    Label,
    RadioGroup,
    RadioItem,
    Root,
    Separator,
    Sub,
    SubContent,
    SubTrigger,
    Trigger
};
~~~~

## Examples

### Basic Menu

~~~~svelte
<script lang="ts">
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';

    let order = $state('Newest first');
    function sort(value: string) {
        order = value;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <DropdownMenu.Root>
        <DropdownMenu.Trigger>Sort files</DropdownMenu.Trigger>
        <DropdownMenu.Content>
            <DropdownMenu.Item callback={() => sort('Newest first')}>
                Newest first
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => sort('Name A to Z')}>Name A to Z</DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>
    <p role="status" class="text-sm text-foreground-muted">{order}</p>
</div>
~~~~

### Configuration

~~~~svelte
<script lang="ts">
    import {
        Tick02Icon as Check,
        ArrowDown01Icon as ChevronDown
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let model = $state('GPT-5.6 Sol');
    let effort = $state('High');
    let speed = $state('Standard');
</script>

<DropdownMenu.Root>
    <DropdownMenu.Trigger variant="outline" size="md" class="min-w-[11rem] justify-between">
        <span>Configuration</span>
        <HugeiconsIcon icon={ChevronDown} size={15} class="text-foreground-muted" />
    </DropdownMenu.Trigger>
    <DropdownMenu.Content class="min-w-[11rem]">
        <DropdownMenu.Label>Configuration</DropdownMenu.Label>
        <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>Model</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent class="min-w-[12rem]">
                <DropdownMenu.Item callback={() => (model = 'GPT-5.6 Sol')}>
                    <span>GPT-5.6 Sol</span>
                    {#if model === 'GPT-5.6 Sol'}
                        <HugeiconsIcon icon={Check} size={16} class="ml-auto" />
                    {/if}
                </DropdownMenu.Item>
                <DropdownMenu.Item callback={() => (model = 'Opus 4.6')}>
                    <span>Opus 4.6</span>
                    {#if model === 'Opus 4.6'}
                        <HugeiconsIcon icon={Check} size={16} class="ml-auto" />
                    {/if}
                </DropdownMenu.Item>
            </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>Effort</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent class="min-w-[10rem]">
                {#each ['Low', 'Medium', 'High'] as option (option)}
                    <DropdownMenu.Item callback={() => (effort = option)}>
                        <span>{option}</span>
                        {#if effort === option}
                            <HugeiconsIcon icon={Check} size={16} class="ml-auto" />
                        {/if}
                    </DropdownMenu.Item>
                {/each}
            </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>Speed</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent class="min-w-[10rem]">
                {#each ['Fast', 'Standard', 'Deliberate'] as option (option)}
                    <DropdownMenu.Item callback={() => (speed = option)}>
                        <span>{option}</span>
                        {#if speed === option}
                            <HugeiconsIcon icon={Check} size={16} class="ml-auto" />
                        {/if}
                    </DropdownMenu.Item>
                {/each}
            </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
    </DropdownMenu.Content>
</DropdownMenu.Root>
~~~~

### Dynamic Width

~~~~svelte
<script lang="ts">
    import { Tick02Icon as Check } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const densities = ['Compact', 'Comfortable', 'Spacious'];
    let density = $state(densities[1]);
</script>

<DropdownMenu.Root>
    <DropdownMenu.Trigger size="md">Open menu</DropdownMenu.Trigger>
    <DropdownMenu.Content dynamic>
        <DropdownMenu.Label>Appearance</DropdownMenu.Label>
        <DropdownMenu.Item>Edit dashboard settings</DropdownMenu.Item>
        <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger>Density</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent dynamic>
                {#each densities as option (option)}
                    <DropdownMenu.Item callback={() => (density = option)}>
                        <span class="flex-1">{option}</span>
                        {#if density === option}
                            <HugeiconsIcon icon={Check} size={13} aria-hidden="true" />
                        {/if}
                    </DropdownMenu.Item>
                {/each}
            </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Item>Reset everything to defaults</DropdownMenu.Item>
    </DropdownMenu.Content>
</DropdownMenu.Root>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import {
        ArrowDown01Icon as ChevronDown,
        CreditCardIcon as CreditCard,
        LifebuoyIcon as LifeBuoy,
        Logout01Icon as LogOut,
        Settings01Icon as Settings,
        UserIcon as User
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let section = $state('Profile');
    const descriptions: Record<string, string> = {
        Profile: 'Alex Morgan · alex@example.com',
        Billing: 'Team plan · Next invoice October 1',
        Settings: 'Email notifications enabled',
        'Help & feedback': 'Contact your workspace owner for help.',
        'Sign out': 'Signed out of this preview.'
    };
    function selectSection(value: string) {
        section = value;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <DropdownMenu.Root>
        <DropdownMenu.Trigger variant="outline" size="md">
            My account
            <HugeiconsIcon icon={ChevronDown} size={16} class="text-foreground-muted" />
        </DropdownMenu.Trigger>
        <DropdownMenu.Content surface="glass" class="min-w-[16rem]">
            <DropdownMenu.Label>
                <span class="text-xs text-foreground-muted">alex@example.com</span>
            </DropdownMenu.Label>
            <DropdownMenu.Item callback={() => selectSection('Profile')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={User} size={13} />
                    Profile
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => selectSection('Billing')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={CreditCard} size={13} />
                    Billing
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => selectSection('Settings')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={Settings} size={13} />
                    Settings
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item callback={() => selectSection('Help & feedback')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={LifeBuoy} size={13} />
                    Help & feedback
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => selectSection('Sign out')}>
                <span class="flex items-center gap-2 text-[var(--color-error)]">
                    <HugeiconsIcon icon={LogOut} size={13} />
                    Sign out
                </span>
            </DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>

    <p role="status" class="text-sm text-foreground-muted">{descriptions[section]}</p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        ArrowDown01Icon as ChevronDown,
        CreditCardIcon as CreditCard,
        LifebuoyIcon as LifeBuoy,
        Logout01Icon as LogOut,
        Settings01Icon as Settings,
        UserIcon as User
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let section = $state('Profile');
    const descriptions: Record<string, string> = {
        Profile: 'Alex Morgan · alex@example.com',
        Billing: 'Team plan · Next invoice October 1',
        Settings: 'Email notifications enabled',
        'Help & feedback': 'Contact your workspace owner for help.',
        'Sign out': 'Signed out of this preview.'
    };
    function selectSection(value: string) {
        section = value;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <DropdownMenu.Root>
        <DropdownMenu.Trigger variant="outline" size="md">
            My account
            <HugeiconsIcon icon={ChevronDown} size={16} class="text-foreground-muted" />
        </DropdownMenu.Trigger>
        <DropdownMenu.Content class="min-w-[16rem]">
            <DropdownMenu.Label>
                <span class="text-xs text-foreground-muted">alex@example.com</span>
            </DropdownMenu.Label>
            <DropdownMenu.Item callback={() => selectSection('Profile')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={User} size={13} />
                    Profile
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => selectSection('Billing')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={CreditCard} size={13} />
                    Billing
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => selectSection('Settings')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={Settings} size={13} />
                    Settings
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item callback={() => selectSection('Help & feedback')}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={LifeBuoy} size={13} />
                    Help & feedback
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => selectSection('Sign out')}>
                <span class="flex items-center gap-2 text-[var(--color-error)]">
                    <HugeiconsIcon icon={LogOut} size={13} />
                    Sign out
                </span>
            </DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>

    <p role="status" class="text-sm text-foreground-muted">{descriptions[section]}</p>
</div>
~~~~

### Overlay Borders

~~~~svelte
<script lang="ts">
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import * as ToggleGroup from '@mielui/svelte/components/toggle-group';

    let border = $state('double');
    let selection = $state('Choose an action');
</script>

<div class="flex min-h-72 flex-col items-center gap-5">
    <div role="group" aria-label="Overlay border style">
        <ToggleGroup.Root
            type="single"
            bind:value={
                () => border,
                (value) => {
                if (value) {
                    border = value;
                }
            }
            }
        >
            {#each ['single', 'double'] as value (value)}
                <ToggleGroup.Item
                    {value}
                    onclickcapture={(event) => {
                        if (border === value) {
                            event.preventDefault();
                        }
                    }}
                    class="min-w-20 border border-border bg-background shadow-[var(--elevation-control-edge)] data-[state=on]:border-border-strong data-[state=on]:bg-secondary"
                >
                    {value === 'single' ? 'Single' : 'Double'}
                </ToggleGroup.Item>
            {/each}
        </ToggleGroup.Root>
    </div>
    <DropdownMenu.Root>
        <DropdownMenu.Trigger>Preview menu</DropdownMenu.Trigger>
        <DropdownMenu.Content
            class={border === 'single'
                ? 'min-w-56 [--mielui-border-inset-scale:0]'
                : 'min-w-56 [--mielui-border-inset-scale:1]'}
        >
            <DropdownMenu.Label>My account</DropdownMenu.Label>
            <DropdownMenu.Item callback={() => { selection = 'Profile selected'; }}>
                Profile
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => { selection = 'Settings selected'; }}>
                Settings
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item callback={() => { selection = 'Help selected'; }}>
                Help and feedback
            </DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>
    <p role="status" class="text-sm text-foreground-muted">{selection}</p>
</div>
~~~~

### Row Actions

~~~~svelte
<script lang="ts">
    import {
        ArchiveIcon as Archive,
        Files01Icon as Copy2,
        MoreHorizontalIcon as MoreHorizontal,
        PencilEdit01Icon as Pencil,
        Delete02Icon as Trash
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let fileName = $state('Release notes.md');
    let copies = $state(1);
    let message = $state('');
    function rename() {
        fileName = 'Release notes, final.md';
    }
    function duplicate() {
        copies += 1;
        message = `Created copy ${copies}.`;
    }
    function archive() {
        message = 'File moved to the local archive.';
    }
    function remove() {
        message = 'File removed from this preview.';
    }
</script>

<div class="flex flex-col items-center gap-3">
    <p class="text-sm">{fileName}</p>
    <DropdownMenu.Root>
        <DropdownMenu.Trigger variant="ghost" size="icon" aria-label="Row actions">
            <HugeiconsIcon icon={MoreHorizontal} size={14} />
        </DropdownMenu.Trigger>
        <DropdownMenu.Content class="min-w-[12rem]">
            <DropdownMenu.Item callback={rename}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={Pencil} size={13} />
                    Rename
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={duplicate}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={Copy2} size={13} />
                    Duplicate
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={archive}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={Archive} size={13} />
                    Archive
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item callback={remove}>
                <span class="flex items-center gap-2 text-[var(--color-error)]">
                    <HugeiconsIcon icon={Trash} size={13} />
                    Delete
                </span>
            </DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>

    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Share Menu

~~~~svelte
<script lang="ts">
    import {
        ArrowDown01Icon as ChevronDown,
        Files01Icon as Copy2,
        ViewOffIcon as EyeOff,
        SentIcon as Send,
        UserIcon as User
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let privateProject = $state(false);
    let message = $state('');
    function invite() {
        message = 'Share the copied link with a collaborator.';
    }
    async function copyLink() {
        try {
            await navigator.clipboard.writeText(window.location.href);
            message = 'Documentation link copied.';
        } catch {
            message = 'Clipboard access is unavailable.';
        }
    }
    function toggleVisibility() {
        privateProject = !privateProject;
        message = privateProject ? 'Preview project is private.' : 'Preview project is public.';
    }
</script>

<div class="flex flex-col items-center gap-3">
    <DropdownMenu.Root>
        <DropdownMenu.Trigger variant="outline" size="md">
            <HugeiconsIcon icon={Send} size={13} />
            Share
            <HugeiconsIcon icon={ChevronDown} size={11} class="text-foreground-muted" />
        </DropdownMenu.Trigger>
        <DropdownMenu.Content class="min-w-[14rem]">
            <DropdownMenu.Label>Workspace</DropdownMenu.Label>
            <DropdownMenu.Item callback={invite}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={User} size={13} />
                    Invite collaborator
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={copyLink}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={Copy2} size={13} />
                    Copy link
                </span>
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Label>Public</DropdownMenu.Label>
            <DropdownMenu.Item callback={toggleVisibility}>
                <span class="flex items-center gap-2">
                    <HugeiconsIcon icon={EyeOff} size={13} />
                    {privateProject ? 'Make public' : 'Make private'}
                </span>
            </DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>

    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Sort Menu

~~~~svelte
<script lang="ts">
    import {
        Tick02Icon as Check,
        ArrowDown01Icon as ChevronDown,
        StarIcon as Star
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const options = ['Most starred', 'Recently updated', 'Alphabetical', 'Oldest first'];
    let selected = $state(options[0]);
</script>

<DropdownMenu.Root>
    <DropdownMenu.Trigger variant="ghost" size="md">
        <HugeiconsIcon icon={Star} size={13} />
        {selected}
        <HugeiconsIcon icon={ChevronDown} size={11} class="text-foreground-muted" />
    </DropdownMenu.Trigger>
    <DropdownMenu.Content class="min-w-[12rem]">
        {#each options as option (option)}
            <DropdownMenu.Item callback={() => (selected = option)}>
                <span>{option}</span>
                {#if selected === option}
                    <HugeiconsIcon icon={Check} size={12} class="ml-auto text-primary" />
                {/if}
            </DropdownMenu.Item>
        {/each}
    </DropdownMenu.Content>
</DropdownMenu.Root>
~~~~

### User Menu

~~~~svelte
<script lang="ts">
    import {
        ArrowDown01Icon as ChevronDown,
        CreditCardIcon as CreditCard,
        FolderGitTwoIcon as Folder,
        HelpCircleIcon as HelpCircle,
        Logout01Icon as LogOut,
        Settings01Icon as Settings,
        UserIcon as User
    } from '@hugeicons/core-free-icons';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<DropdownMenu.Root>
    <DropdownMenu.Trigger variant="outline" size="md">
        <HugeiconsIcon icon={User} size={13} />
        mielsense
        <HugeiconsIcon icon={ChevronDown} size={11} class="text-foreground-muted" />
    </DropdownMenu.Trigger>
    <DropdownMenu.Content class="min-w-[14rem]">
        <DropdownMenu.Label>Account</DropdownMenu.Label>
        <DropdownMenu.Item>
            <span class="flex items-center gap-2">
                <HugeiconsIcon icon={User} size={13} />
                Profile
            </span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
            <span class="flex items-center gap-2">
                <HugeiconsIcon icon={Folder} size={13} />
                Your projects
            </span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
            <span class="flex items-center gap-2">
                <HugeiconsIcon icon={CreditCard} size={13} />
                Billing
            </span>
        </DropdownMenu.Item>

        <DropdownMenu.Separator />

        <DropdownMenu.Label>Settings</DropdownMenu.Label>
        <DropdownMenu.Item>
            <span class="flex items-center gap-2">
                <HugeiconsIcon icon={Settings} size={13} />
                Preferences
            </span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
            <span class="flex items-center gap-2">
                <HugeiconsIcon icon={HelpCircle} size={13} />
                Help &amp; support
            </span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
            <span class="flex items-center gap-2">
                <HugeiconsIcon icon={LogOut} size={13} />
                Log out
            </span>
        </DropdownMenu.Item>
    </DropdownMenu.Content>
</DropdownMenu.Root>
~~~~

For the rendered reference, visit [/docs/components/dropdown-menu](/docs/components/dropdown-menu).


---

Source: http://sveltekit-prerender/docs/components/empty-state.md

# Empty State

Explain missing content and offer a next step with optional media, details, and actions.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, typography
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add empty-state
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Media

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| level | HeadingLevel \| undefined | 2 | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type { HeadingLevel } from '../typography';
import Root from './empty-state.svelte';
import Actions from './empty-state-actions.svelte';
import Content from './empty-state-content.svelte';
import Description from './empty-state-description.svelte';
import Header from './empty-state-header.svelte';
import Media from './empty-state-media.svelte';
import Title from './empty-state-title.svelte';

export type EmptyStateProps = HTMLAttributes<HTMLDivElement> & {
    children?: Snippet;
};

export type EmptyStateHeaderProps = HTMLAttributes<HTMLDivElement> & {
    children?: Snippet;
};

export type EmptyStateMediaProps = HTMLAttributes<HTMLDivElement> & {
    children?: Snippet;
};

export type EmptyStateTitleProps = HTMLAttributes<HTMLHeadingElement> & {
    level?: HeadingLevel;
    children?: Snippet;
};

export type EmptyStateDescriptionProps = HTMLAttributes<HTMLParagraphElement> & {
    children?: Snippet;
};

export type EmptyStateContentProps = HTMLAttributes<HTMLDivElement> & {
    children?: Snippet;
};

export type EmptyStateActionsProps = HTMLAttributes<HTMLDivElement> & {
    children?: Snippet;
};

export { Actions, Content, Description, Header, Media, Root, Title };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as EmptyState from '@mielui/svelte/components/empty-state';
</script>

<EmptyState.Root class="max-w-sm">
    <EmptyState.Header>
        <EmptyState.Title>No components yet</EmptyState.Title>
        <EmptyState.Description>
            Add your first component to start building your interface.
        </EmptyState.Description>
    </EmptyState.Header>
    <EmptyState.Actions>
        <Button href="/docs/installation">Add a component</Button>
    </EmptyState.Actions>
</EmptyState.Root>
~~~~

### Inbox

~~~~svelte
<script lang="ts">
    import { CheckmarkCircle02Icon } from '@hugeicons/core-free-icons';
    import * as EmptyState from '@mielui/svelte/components/empty-state';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<EmptyState.Root class="max-w-sm">
    <EmptyState.Media aria-hidden="true" class="text-success">
        <HugeiconsIcon icon={CheckmarkCircle02Icon} class="size-7" />
    </EmptyState.Media>
    <EmptyState.Header>
        <EmptyState.Title>You're all caught up</EmptyState.Title>
        <EmptyState.Description>
            No new messages. We'll let you know when someone replies.
        </EmptyState.Description>
    </EmptyState.Header>
</EmptyState.Root>
~~~~

### Search

~~~~svelte
<script lang="ts">
    import { Search01Icon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as EmptyState from '@mielui/svelte/components/empty-state';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let query = $state('invoice');

    function clearSearch() {
        query = '';
    }
</script>

<EmptyState.Root class="max-w-sm">
    <EmptyState.Media aria-hidden="true">
        <HugeiconsIcon icon={Search01Icon} class="size-6" />
    </EmptyState.Media>
    <EmptyState.Header>
        <EmptyState.Title>{query ? 'No matching files' : 'Search cleared'}</EmptyState.Title>
        <EmptyState.Description>
            {query ? `Nothing matches "${query}". Try another file name or clear your search.` : 'No search filter is active. Your files will appear here when available.'}
        </EmptyState.Description>
    </EmptyState.Header>
    {#if query}
        <EmptyState.Actions>
            <Button variant="secondary" onclick={clearSearch}>Clear search</Button>
        </EmptyState.Actions>
    {/if}
</EmptyState.Root>
~~~~

For the rendered reference, visit [/docs/components/empty-state](/docs/components/empty-state).


---

Source: http://sveltekit-prerender/docs/components/field.md

# Field

Composable labels, control metadata, descriptions, and validation issues.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add field
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Control

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| describedBy | string \| undefined | — | No | No |
| errorId | string \| undefined | — | No | No |
| children | Snippet<[FieldControlAttributes]> | — | Yes | No |



### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Error

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| issues | readonly Readonly<{ message: string; }>[] \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Group

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| controlId | string \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| required | boolean \| undefined | false | No | No |
| invalid | boolean \| undefined | — | No | No |
| issues | readonly Readonly<{ message: string; }>[] \| undefined | [] | No | No |
| orientation | "horizontal" \| "vertical" \| undefined | 'vertical' | No | No |
| element | HTMLDivElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { Attachment } from 'svelte/attachments';
import type { HTMLAttributes, HTMLLabelAttributes } from 'svelte/elements';
import Root from './field.svelte';
import Content from './field-content.svelte';
import Control from './field-control.svelte';
import Description from './field-description.svelte';
import FieldError from './field-error.svelte';
import Group from './field-group.svelte';
import Label from './field-label.svelte';

export type FieldIssue = Readonly<{ message: string }>;

export type FieldControlAttributes = {
    id: string;
    disabled: boolean | undefined;
    required: boolean | undefined;
    'aria-invalid': 'true' | undefined;
    'aria-describedby'?: string;
    [attachment: symbol]: Attachment<HTMLElement>;
};

export type FieldProps = {
    controlId?: string;
    disabled?: boolean;
    required?: boolean;
    invalid?: boolean;
    issues?: readonly FieldIssue[];
    orientation?: 'vertical' | 'horizontal';
    element?: HTMLDivElement;
} & HTMLAttributes<HTMLDivElement>;

export type FieldControlProps = {
    describedBy?: string;
    errorId?: string;
    children: Snippet<[FieldControlAttributes]>;
};

export type FieldLabelProps = HTMLLabelAttributes;
export type FieldDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
export type FieldErrorProps = {
    issues?: readonly FieldIssue[];
} & HTMLAttributes<HTMLDivElement>;
export type FieldContentProps = HTMLAttributes<HTMLDivElement>;
export type FieldGroupProps = HTMLAttributes<HTMLDivElement>;

export { Content, Control, Description, FieldError as Error, Group, Label, Root };
~~~~

## Examples

### Composite

~~~~svelte
<script lang="ts">
    import * as Field from '@mielui/svelte/components/field';
    import * as NumberField from '@mielui/svelte/components/number-field';
    import * as OTPField from '@mielui/svelte/components/otp-field';

    const uid = $props.id();
    let seats = $state<number | undefined>(2);
    let code = $state('');
    const disabled = false;
    const required = true;
</script>

<Field.Group class="w-full max-w-sm">
    <Field.Root {disabled} {required}>
        <Field.Label>Seats (required)</Field.Label>
        <NumberField.Root bind:value={seats} name="seats" min={1} max={12} {disabled} {required}>
            <NumberField.Group>
                <NumberField.Decrement />
                <Field.Control describedBy={`${uid}-seats-hint`}>
                    {#snippet children(control)}
                        <NumberField.Input {...control} />
                    {/snippet}
                </Field.Control>
                <NumberField.Increment />
            </NumberField.Group>
        </NumberField.Root>
        <Field.Description id={`${uid}-seats-hint`}>
            Choose between 1 and 12 seats.
        </Field.Description>
    </Field.Root>
    <Field.Root {required}>
        <Field.Label>Verification code (required)</Field.Label>
        <Field.Control describedBy={`${uid}-code-hint`}>
            {#snippet children(control)}
                <OTPField.Root {...control} bind:value={code} name="code" length={6} />
            {/snippet}
        </Field.Control>
        <Field.Description id={`${uid}-code-hint`}>
            Enter the six digits sent to your email.
        </Field.Description>
    </Field.Root>
</Field.Group>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Field from '@mielui/svelte/components/field';
    import { Input } from '@mielui/svelte/components/input';
</script>

<Field.Root class="w-full max-w-sm" required>
    <Field.Label>Work email<span class="text-foreground-muted">(required)</span></Field.Label>
    <Field.Control>
        {#snippet children(control)}
            <Input
                {...control}
                type="email"
                name="email"
                placeholder="you@company.com"
                autocomplete="email"
            />
        {/snippet}
    </Field.Control>
    <Field.Description>We’ll only use this address for account updates.</Field.Description>
</Field.Root>
~~~~

### Horizontal

~~~~svelte
<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';
    import * as Field from '@mielui/svelte/components/field';
</script>

<Field.Root orientation="horizontal" class="max-w-sm gap-3">
    <Field.Control>
        {#snippet children(control)}
            <Checkbox {...control} name="updates" class="mt-0.5" />
        {/snippet}
    </Field.Control>
    <Field.Content>
        <Field.Label>Product updates</Field.Label>
        <Field.Description>A short email when there’s something useful to share.</Field.Description>
    </Field.Content>
</Field.Root>
~~~~

### Validation

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Field from '@mielui/svelte/components/field';
    import { Input } from '@mielui/svelte/components/input';

    let showIssue = $state(true);
</script>

<div class="flex w-full max-w-sm flex-col gap-5">
    <Field.Root issues={showIssue ? [{ message: 'This username is already in use.' }] : []}>
        <Field.Label>Username</Field.Label>
        <Field.Description>
            Letters, numbers, and hyphens. You can change this later.
        </Field.Description>
        <Field.Control>
            {#snippet children(control)}
                <Input {...control} name="username" value="miel" autocomplete="username" />
            {/snippet}
        </Field.Control>
        <Field.Error />
    </Field.Root>
    <Button variant="outline" class="w-fit" onclick={() => { showIssue = !showIssue; }}>
        {showIssue ? 'Clear validation issue' : 'Show validation issue'}
    </Button>
</div>
~~~~

For the rendered reference, visit [/docs/components/field](/docs/components/field).


---

Source: http://sveltekit-prerender/docs/components/fieldset.md

# Fieldset

Native form grouping with legends, descriptions, and disabled semantics.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add fieldset
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Legend

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| element | HTMLFieldSetElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { HTMLAttributes, HTMLFieldsetAttributes } from 'svelte/elements';
import Root from './fieldset.svelte';
import Description from './fieldset-description.svelte';
import Legend from './fieldset-legend.svelte';

export type FieldsetProps = HTMLFieldsetAttributes & { element?: HTMLFieldSetElement };
export type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement>;
export type FieldsetDescriptionProps = HTMLAttributes<HTMLParagraphElement>;

export { Description, Legend, Root };
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Field from '@mielui/svelte/components/field';
    import * as Fieldset from '@mielui/svelte/components/fieldset';
    import { Input } from '@mielui/svelte/components/input';

    let locked = $state(true);
</script>

<div class="flex w-full max-w-sm flex-col gap-6">
    <Fieldset.Root disabled={locked} class="disabled:opacity-[var(--opacity-disabled)]">
        <Fieldset.Legend>Billing contact</Fieldset.Legend>
        <Field.Root>
            <Field.Label>Invoice email</Field.Label>
            <Field.Control>
                {#snippet children(control)}
                    <Input
                        {...control}
                        type="email"
                        name="invoiceEmail"
                        value="billing@company.com"
                    />
                {/snippet}
            </Field.Control>
        </Field.Root>
    </Fieldset.Root>
    <Button class="w-fit" variant="outline" onclick={() => { locked = !locked; }}>
        {locked ? 'Edit billing contact' : 'Lock billing contact'}
    </Button>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Field from '@mielui/svelte/components/field';
    import * as Fieldset from '@mielui/svelte/components/fieldset';
    import { Input } from '@mielui/svelte/components/input';

    const uid = $props.id();
</script>

<Fieldset.Root aria-describedby={`${uid}-details`} class="w-full max-w-sm">
    <Fieldset.Legend>Contact details</Fieldset.Legend>
    <Fieldset.Description id={`${uid}-details`}>
        How we can reach you about your workspace.
    </Fieldset.Description>
    <Field.Group>
        <Field.Root required>
            <Field.Label>Full name</Field.Label>
            <Field.Control>
                {#snippet children(control)}
                    <Input {...control} name="name" autocomplete="name" placeholder="Sam Rivera" />
                {/snippet}
            </Field.Control>
        </Field.Root>
        <Field.Root required>
            <Field.Label>Email address</Field.Label>
            <Field.Control>
                {#snippet children(control)}
                    <Input
                        {...control}
                        type="email"
                        name="email"
                        autocomplete="email"
                        placeholder="sam@company.com"
                    />
                {/snippet}
            </Field.Control>
        </Field.Root>
    </Field.Group>
</Fieldset.Root>
~~~~

For the rendered reference, visit [/docs/components/fieldset](/docs/components/fieldset).


---

Source: http://sveltekit-prerender/docs/components/file-upload.md

# File Upload

Upload cards with validation, progress, cancellation, retry, and animated completion.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: button, tooltip, spinner
- Shared utilities: hugeicons-icon, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add file-upload
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Details

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Dropzone

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| item | { readonly id: string; readonly file: File; readonly status: "uploading" \| "complete" \| "error"; readonly progress?: number \| undefined; readonly error?: string \| undefined; readonly retryable: boolean; } | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### List

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[FileUploadEntry]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Preview

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Progress

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Remove

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Retry

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| accept | string \| undefined | — | No | No |
| maxSize | number \| undefined | — | No | No |
| maxFiles | number \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| onUpload | (file: File, options: { signal: AbortSignal; onProgress: (percent: number) => void; }) => Promise<void> | — | Yes | No |
| children | Snippet<[FileUploadSummary]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Status

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { ButtonProps } from '@mielui/svelte/components/button';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Root from './file-upload.svelte';
import Details from './file-upload-details.svelte';
import Dropzone from './file-upload-dropzone.svelte';
import Item from './file-upload-item.svelte';
import List from './file-upload-list.svelte';
import Preview from './file-upload-preview.svelte';
import Progress from './file-upload-progress.svelte';
import Remove from './file-upload-remove.svelte';
import Retry from './file-upload-retry.svelte';
import Status from './file-upload-status.svelte';
import Trigger from './file-upload-trigger.svelte';

export type FileUploadEntry = {
    readonly id: string;
    readonly file: File;
    readonly status: 'uploading' | 'complete' | 'error';
    readonly progress?: number;
    readonly error?: string;
    readonly retryable: boolean;
};
export type FileUploadSummary = {
    items: readonly FileUploadEntry[];
    total: number;
    uploading: number;
    complete: number;
};
export type FileUploadProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    accept?: string;
    maxSize?: number;
    maxFiles?: number;
    disabled?: boolean;
    onUpload: (
        file: File,
        options: {
            signal: AbortSignal;
            onProgress: (percent: number) => void;
        }
    ) => Promise<void>;
    children?: Snippet<[FileUploadSummary]>;
};
export type FileUploadPartProps = HTMLAttributes<HTMLDivElement>;
export type FileUploadItemProps = FileUploadPartProps & { item: FileUploadEntry };
export type FileUploadListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
    children?: Snippet<[FileUploadEntry]>;
};
export type FileUploadButtonProps = Omit<
    Extract<ButtonProps, { href?: undefined }>,
    'href' | 'type'
>;
export { Details, Dropzone, Item, List, Preview, Progress, Remove, Retry, Root, Status, Trigger };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as FileUpload from '@mielui/svelte/components/file-upload';
    import { Switch } from '@mielui/svelte/components/switch';

    let failNext = $state(false);
    async function upload(
        _file: File,
        { signal, onProgress }: Parameters<NonNullable<FileUpload.FileUploadProps['onUpload']>>[1]
    ) {
        const shouldFail = failNext;
        failNext = false;
        await new Promise<void>((resolve, reject) => {
            let progress = 0;
            const timer = setInterval(() => {
                progress += 10;
                onProgress(progress);
                if (progress === 100) {
                    clearInterval(timer);
                    signal.removeEventListener('abort', cancel);
                    if (shouldFail) {
                        reject(new Error('Connection interrupted. Try uploading again.'));
                    } else {
                        resolve();
                    }
                }
            }, 180);
            function cancel() {
                clearInterval(timer);
                reject(new DOMException('Upload cancelled', 'AbortError'));
            }
            signal.addEventListener('abort', cancel, { once: true });
        });
    }
</script>
<div class="flex w-full max-w-md flex-col gap-4">
    <div class="flex flex-col gap-1">
        <p class="text-sm font-medium">Project files</p>
        <p class="text-sm text-foreground-muted">Images and PDFs. Up to 3 files, 10 MB each.</p>
    </div>
    <FileUpload.Root
        accept="image/*,.pdf"
        maxFiles={3}
        maxSize={10 * 1024 * 1024}
        onUpload={upload}
    />
    <Switch bind:checked={failNext} label="Fail the next upload" />
    <p class="text-xs text-foreground-muted">Demo only. Files stay on your device.</p>
</div>
~~~~

### Single

~~~~svelte
<script lang="ts">
    import * as FileUpload from '@mielui/svelte/components/file-upload';

    async function prepare(
        _file: File,
        { signal }: Parameters<FileUpload.FileUploadProps['onUpload']>[1]
    ) {
        signal.throwIfAborted();
        await Promise.resolve();
    }
</script>

<FileUpload.Root
    accept="image/png,image/jpeg,image/webp"
    maxFiles={1}
    maxSize={5 * 1024 * 1024}
    onUpload={prepare}
    class="w-full max-w-md"
>
    {#snippet children({ items })}
        {#if items.length === 0}
            <FileUpload.Dropzone>
                <p class="text-sm font-medium">Profile photo</p>
                <p class="text-sm text-foreground-muted">One PNG, JPEG, or WebP, up to 5 MB.</p>
                <FileUpload.Trigger variant="outline">Choose photo</FileUpload.Trigger>
            </FileUpload.Dropzone>
        {:else}
            <FileUpload.List>
                {#snippet children(item)}
                    <FileUpload.Item {item}>
                        <FileUpload.Preview />
                        <div class="min-w-0 flex-1 space-y-2">
                            <FileUpload.Details />
                            <FileUpload.Status>
                                {item.status === 'error' ? item.error : item.status === 'complete' ? 'Ready on this device' : 'Preparing photo…'}
                            </FileUpload.Status>
                        </div>
                        <FileUpload.Remove size="sm" variant="ghost">Remove</FileUpload.Remove>
                    </FileUpload.Item>
                {/snippet}
            </FileUpload.List>
            <p class="text-xs text-foreground-muted">Remove the photo to choose a replacement.</p>
        {/if}
        <p class="text-xs text-foreground-muted">
            Local preview only. This example does not upload your file.
        </p>
    {/snippet}
</FileUpload.Root>
~~~~

For the rendered reference, visit [/docs/components/file-upload](/docs/components/file-upload).


---

Source: http://sveltekit-prerender/docs/components/form.md

# Form

Native forms with transparent attachment forwarding and composable pending feedback.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button
- Shared utilities: utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add form
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### ErrorSummary

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| issues | readonly Readonly<{ message: string; controlId?: string \| undefined; path?: readonly (string \| number)[] \| undefined; }>[] \| undefined | [] | No | No |
| focusOnError | boolean \| undefined | true | No | No |
| heading | Snippet<[]> \| undefined | — | No | No |
| children | Snippet<[readonly Readonly<{ message: string; controlId?: string \| undefined; path?: readonly (string \| number)[] \| undefined; }>[]]> \| undefined | — | No | No |
| element | HTMLDivElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| element | HTMLFormElement \| null \| undefined | — | No | Yes |
| pending | number \| boolean \| undefined | false | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Status

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| tone | "error" \| "success" \| "neutral" \| undefined | 'neutral' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Submit

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLFormAttributes } from 'svelte/elements';
import type { ButtonProps } from '../button';
import Root from './form.svelte';
import Actions from './form-actions.svelte';
import ErrorSummary from './form-error-summary.svelte';
import Status from './form-status.svelte';
import Submit from './form-submit.svelte';

export type FormProps = HTMLFormAttributes & {
    element?: HTMLFormElement | null;
    pending?: boolean | number;
};
export type FormActionsProps = HTMLAttributes<HTMLDivElement>;
export type FormStatusProps = HTMLAttributes<HTMLDivElement> & {
    tone?: 'neutral' | 'success' | 'error';
};
export type FormSubmitProps = Omit<Extract<ButtonProps, { href?: undefined }>, 'type' | 'href'>;

export type FormIssue = Readonly<{
    message: string;
    controlId?: string;
    path?: readonly (string | number)[];
}>;
export type FormErrorSummaryProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    issues?: readonly FormIssue[];
    focusOnError?: boolean;
    heading?: Snippet;
    children?: Snippet<[readonly FormIssue[]]>;
    element?: HTMLDivElement;
};

export { Actions, ErrorSummary, Root, Status, Submit };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Field from '@mielui/svelte/components/field';
    import * as Fieldset from '@mielui/svelte/components/fieldset';
    import * as Form from '@mielui/svelte/components/form';
    import { Input } from '@mielui/svelte/components/input';
    import { onDestroy } from 'svelte';

    let pending = $state(false);
    let timer: ReturnType<typeof setTimeout> | undefined;
    let message = $state('');

    onDestroy(() => {
        clearTimeout(timer);
    });

    function submit(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }) {
        event.preventDefault();
        if (pending) {
            return;
        }
        const data = new FormData(event.currentTarget, event.submitter);
        const name = String(data.get('displayName')).trim();
        pending = true;
        message = 'Checking profile…';
        timer = setTimeout(() => {
            pending = false;
            message = `${name} is ready to save. This preview keeps your data in the browser.`;
        }, 800);
    }
</script>

<Form.Root class="w-full max-w-md" onsubmit={submit} {pending}>
    <Fieldset.Root>
        <Fieldset.Legend>Profile details</Fieldset.Legend>
        <Field.Group>
            <Field.Root required>
                <Field.Label>Display name</Field.Label>
                <Field.Control>
                    {#snippet children(control)}
                        <Input
                            {...control}
                            name="displayName"
                            autocomplete="name"
                            placeholder="Sam Rivera"
                        />
                    {/snippet}
                </Field.Control>
                <Field.Description>The name shown to your teammates.</Field.Description>
            </Field.Root>
            <Field.Root required>
                <Field.Label>Work email</Field.Label>
                <Field.Control>
                    {#snippet children(control)}
                        <Input
                            {...control}
                            type="email"
                            name="email"
                            autocomplete="email"
                            placeholder="sam@company.com"
                        />
                    {/snippet}
                </Field.Control>
            </Field.Root>
        </Field.Group>
    </Fieldset.Root>
    <Form.Actions>
        <Form.Submit>Save profile</Form.Submit>
        <Button type="reset" variant="ghost">Reset</Button>
    </Form.Actions>
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</Form.Root>
~~~~

### Remote Basic

~~~~svelte
<script lang="ts">
    import * as Field from '@mielui/svelte/components/field';
    import * as Fieldset from '@mielui/svelte/components/fieldset';
    import * as Form from '@mielui/svelte/components/form';
    import { Input } from '@mielui/svelte/components/input';
    import { toast } from '@mielui/svelte/components/toast';
    import { validateProfile } from './profile.remote';

    const uid = $props.id();
    const draft = validateProfile.for(uid);
</script>

<Form.Root
    class="w-full max-w-md"
    novalidate
    pending={draft.pending}
    {...draft.enhance(async (instance) => {
        const request = instance.submit().then((valid) => {
            if (!valid) {
                throw new Error('Review the highlighted fields.');
            }
            const result = instance.result;
            return result;
        });
        toast.promise(request, {
            loading: 'Checking your draft…',
            success: (result) => `${result?.username ?? 'Your username'} is available.`,
            error: 'Could not validate your draft',
            errorDescription: () => draft.fields.allIssues()?.length ? 'Review the highlighted fields.' : 'Your draft is still here. Try again.'
        });
        await request.catch(() => undefined);
    })}
>
    <Form.ErrorSummary issues={draft.fields.allIssues()} />
    <Fieldset.Root>
        <Fieldset.Legend>Profile draft</Fieldset.Legend>
        <Fieldset.Description>
            This demo validates on the server. Nothing is stored. Try “admin” to see a server-side
            issue, or “system” for a form-level issue.
        </Fieldset.Description>
        <Field.Group>
            <Field.Root required issues={draft.fields.username.issues()}>
                <Field.Label>Username</Field.Label>
                <Field.Control>
                    {#snippet children(control)}
                        <Input
                            {...control}
                            {...draft.fields.username.as('text')}
                            autocomplete="username"
                            placeholder="sam-rivera"
                        />
                    {/snippet}
                </Field.Control>
                <Field.Description>Between 3 and 40 characters.</Field.Description>
                <Field.Error aria-live="off" />
            </Field.Root>
            <Field.Root required issues={draft.fields.email.issues()}>
                <Field.Label>Email</Field.Label>
                <Field.Control>
                    {#snippet children(control)}
                        <Input
                            {...control}
                            {...draft.fields.email.as('email')}
                            autocomplete="email"
                            placeholder="sam@company.com"
                        />
                    {/snippet}
                </Field.Control>
                <Field.Error aria-live="off" />
            </Field.Root>
        </Field.Group>
    </Fieldset.Root>
    <Form.Actions>
        <Form.Submit {...draft.fields.intent.as('submit', 'validate')} loadingLabel="Checking">
            Validate draft
        </Form.Submit>
    </Form.Actions>
</Form.Root>
~~~~

### Remote

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Field from '@mielui/svelte/components/field';
    import * as Fieldset from '@mielui/svelte/components/fieldset';
    import * as Form from '@mielui/svelte/components/form';
    import { Input } from '@mielui/svelte/components/input';
    import { toast } from '@mielui/svelte/components/toast';
    import { validateProfile } from './profile.remote';

    const uid = $props.id();
    const draft = validateProfile.for(uid);
</script>

<Form.Root
    class="w-full max-w-md"
    novalidate
    pending={draft.pending}
    {...draft.enhance(async (instance) => {
        const request = instance.submit().then((valid) => {
            if (!valid) {
                throw new Error('Review the highlighted fields.');
            }
            const result = instance.result;
            if (result?.intent === 'validate-reset') {
                instance.element.reset();
            }
            return result;
        });
        toast.promise(request, {
            loading: 'Checking your draft…',
            success: (result) => `${result?.username ?? 'Your username'} is available.`,
            error: 'Could not validate your draft',
            errorDescription: () => draft.fields.allIssues()?.length ? 'Review the highlighted fields.' : 'Your draft is still here. Try again.'
        });
        await request.catch(() => undefined);
    })}
>
    <Form.ErrorSummary issues={draft.fields.allIssues()} />
    <Fieldset.Root>
        <Fieldset.Legend>Profile draft</Fieldset.Legend>
        <Fieldset.Description>
            This demo validates on the server. Nothing is stored. Try “admin” to see a server-side
            issue, or “system” for a form-level issue.
        </Fieldset.Description>
        <Field.Group>
            <Field.Root
                controlId={`${uid}-username`}
                required
                issues={draft.fields.username.issues()}
            >
                <Field.Label>Username</Field.Label>
                <Field.Control
                    describedBy={`${uid}-username-hint`}
                    errorId={`${uid}-username-error`}
                >
                    {#snippet children(control)}
                        <Input
                            {...control}
                            {...draft.fields.username.as('text')}
                            autocomplete="username"
                            placeholder="sam-rivera"
                        />
                    {/snippet}
                </Field.Control>
                <Field.Description id={`${uid}-username-hint`}>
                    Between 3 and 40 characters.
                </Field.Description>
                <Field.Error aria-live="off" id={`${uid}-username-error`} />
            </Field.Root>
            <Field.Root controlId={`${uid}-email`} required issues={draft.fields.email.issues()}>
                <Field.Label>Email</Field.Label>
                <Field.Control errorId={`${uid}-email-error`}>
                    {#snippet children(control)}
                        <Input
                            {...control}
                            {...draft.fields.email.as('email')}
                            autocomplete="email"
                            placeholder="sam@company.com"
                        />
                    {/snippet}
                </Field.Control>
                <Field.Error aria-live="off" id={`${uid}-email-error`} />
            </Field.Root>
        </Field.Group>
    </Fieldset.Root>
    <Form.Actions>
        <Form.Submit {...draft.fields.intent.as('submit', 'validate')} loadingLabel="Checking">
            Validate draft
        </Form.Submit>
        <Form.Submit
            {...draft.fields.intent.as('submit', 'validate-reset')}
            variant="outline"
            loadingLabel="Checking"
        >
            Validate and reset
        </Form.Submit>
        <Button type="reset" variant="ghost" disabled={draft.pending > 0}>Reset</Button>
    </Form.Actions>
</Form.Root>
~~~~

For the rendered reference, visit [/docs/components/form](/docs/components/form).


---

Source: http://sveltekit-prerender/docs/components/group.md

# Group

Connected controls with separators, text, and horizontal or vertical layouts.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add group
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| orientation | "horizontal" \| "vertical" \| undefined | 'horizontal' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| orientation | "horizontal" \| "vertical" \| undefined | 'vertical' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Text

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| as | keyof HTMLElementTagNameMap \| undefined | 'div' | No | No |
| for | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
export { default as Root } from './group.svelte';
export { default as Separator } from './group-separator.svelte';
export { default as Text } from './group-text.svelte';
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Group from '@mielui/svelte/components/group';

    const revisions = ['First draft', 'Edited draft', 'Final draft'];
    let revision = $state(1);
</script>

<div class="flex flex-col items-center gap-4">
    <p class="m-0 text-sm text-foreground-muted" role="status">{revisions[revision]}</p>
    <Group.Root aria-label="Revision history">
        <Button
            variant="outline"
            disabled={revision === 0}
            onclick={() => {
            revision -= 1;
        }}
        >
            Undo
        </Button>
        <Group.Separator />
        <Button
            variant="outline"
            disabled={revision === revisions.length - 1}
            onclick={() => {
            revision += 1;
        }}
        >
            Redo
        </Button>
    </Group.Root>
</div>
~~~~

### Input

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Group from '@mielui/svelte/components/group';
    import { Input } from '@mielui/svelte/components/input';

    let email = $state('');
</script>

<Group.Root aria-label="Email subscription" class="w-full max-w-sm">
    <Input type="email" aria-label="Email address" placeholder="Email address" bind:value={email} />
    <Group.Separator />
    <Button variant="outline" disabled={!email}>Subscribe</Button>
</Group.Root>
~~~~

### Menu

~~~~svelte
<script lang="ts">
    import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import * as Group from '@mielui/svelte/components/group';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let action = $state('Save draft');
    let message = $state('');
</script>

<div class="flex flex-col items-center gap-3">
    <DropdownMenu.Root>
        <Group.Root aria-label="Save options">
            <Button
                variant="outline"
                onclick={() => { message = action === 'Save draft' ? 'Draft saved.' : 'Changes published.'; }}
            >
                {action}
            </Button>
            <Group.Separator />
            <DropdownMenu.Trigger variant="outline" aria-label="Choose save action" class="px-2">
                <HugeiconsIcon icon={ArrowDown01Icon} size={16} />
            </DropdownMenu.Trigger>
        </Group.Root>
        <DropdownMenu.Content>
            <DropdownMenu.Item callback={() => { action = 'Save draft'; }}>
                Save draft
            </DropdownMenu.Item>
            <DropdownMenu.Item callback={() => { action = 'Publish'; }}>Publish</DropdownMenu.Item>
        </DropdownMenu.Content>
    </DropdownMenu.Root>
    <p role="status" class="min-h-5 text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Nested

~~~~svelte
<script lang="ts">
    import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Group from '@mielui/svelte/components/group';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let page = $state(1);
</script>

<Group.Root aria-label="Pagination">
    <Group.Root aria-label="Pages">
        {#each [1, 2, 3, 4, 5] as number (number)}
            {#if number > 1}
                <Group.Separator />
            {/if}
            <Button
                variant="outline"
                size="sm"
                class="w-8 px-0"
                aria-current={page === number ? 'page' : undefined}
                onclick={() => { page = number; }}
            >
                {number}
            </Button>
        {/each}
    </Group.Root>
    <Group.Root aria-label="Navigation">
        <Button
            variant="outline"
            size="sm"
            class="w-8 px-0"
            aria-label="Previous page"
            disabled={page === 1}
            onclick={() => { page -= 1; }}
        >
            <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
        </Button>
        <Group.Separator />
        <Button
            variant="outline"
            size="sm"
            class="w-8 px-0"
            aria-label="Next page"
            disabled={page === 5}
            onclick={() => { page += 1; }}
        >
            <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
        </Button>
    </Group.Root>
</Group.Root>
~~~~

### Popup

~~~~svelte
<script lang="ts">
    import { Settings01Icon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Group from '@mielui/svelte/components/group';
    import { Input } from '@mielui/svelte/components/input';
    import * as Popover from '@mielui/svelte/components/popover';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let width = $state<string | number | undefined>('1200');
    let open = $state(false);
    let message = $state('');
</script>

<div class="flex flex-col items-center gap-3">
    <Popover.Root bind:open placement="bottom-end">
        <Group.Root aria-label="Export image">
            <Button variant="outline" onclick={() => { message = `Export ready at ${width}px.`; }}>
                Export
            </Button>
            <Group.Separator />
            <Popover.Trigger variant="outline" aria-label="Export settings" class="px-2">
                <HugeiconsIcon icon={Settings01Icon} size={16} />
            </Popover.Trigger>
        </Group.Root>
        <Popover.Content class="w-64" aria-label="Export settings">
            <div class="flex flex-col gap-3 p-3">
                <Input label="Width in pixels" type="number" min={1} bind:value={width} />
                <Button variant="outline" onclick={() => { open = false; }}>Done</Button>
            </div>
        </Popover.Content>
    </Popover.Root>
    <p role="status" class="min-h-5 text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Text

~~~~svelte
<script lang="ts">
    import * as Group from '@mielui/svelte/components/group';
    import { Input } from '@mielui/svelte/components/input';

    const id = $props.id();
</script>

<Group.Root aria-label="Website" class="w-full max-w-xs">
    <Group.Text as="label" for={id} aria-label="Domain">https://</Group.Text>
    <Group.Separator />
    <Input {id} placeholder="example.com" />
</Group.Root>
~~~~

### Vertical

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import * as Group from '@mielui/svelte/components/group';

    let zoom = $state(100);
</script>

<div class="flex items-center gap-6">
    <Group.Root orientation="vertical" aria-label="Zoom">
        <Button
            variant="outline"
            disabled={zoom === 200}
            onclick={() => {
            zoom += 25;
        }}
        >
            Zoom in
        </Button>
        <Group.Separator orientation="horizontal" />
        <Button
            variant="outline"
            disabled={zoom === 50}
            onclick={() => {
            zoom -= 25;
        }}
        >
            Zoom out
        </Button>
    </Group.Root>
    <output class="min-w-14 text-sm text-foreground-muted tabular-nums" aria-label="Zoom level">
        <span use:numberShuffle={{ value: zoom }}>{zoom}</span>
        %
    </output>
</div>
~~~~

For the rendered reference, visit [/docs/components/group](/docs/components/group).


---

Source: http://sveltekit-prerender/docs/components/hover-card.md

# Hover Card

Hover-revealed rich content card with delay + close-delay. Thin popover wrapper with role="dialog" aria-modal="false". Composes popover; ships its own Content + Title + Description for rich-content layout.

- Package: `@mielui/svelte`
- Component version: `2.0.0`
- Depends on Mielui components: _internal/utils, popover
- Shared utilities: transition, components/_internal/surface, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add hover-card
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| side | "left" \| "right" \| "top" \| "bottom" \| undefined | 'bottom' | No | No |
| align | "center" \| "start" \| "end" \| undefined | 'center' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| openDelay | number \| undefined | 200 | No | No |
| closeDelay | number \| undefined | 150 | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| href | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import Root from './hover-card.svelte';
import Content from './hover-card-content.svelte';
import Description from './hover-card-description.svelte';
import Title from './hover-card-title.svelte';
import Trigger from './hover-card-trigger.svelte';

export type HoverCardProps = {
    open?: boolean;
    openDelay?: number;
    closeDelay?: number;
    children?: Snippet;
};

export type HoverCardTriggerProps = {
    href?: string;
    children?: Snippet;
} & DefaultProps;

export type HoverCardContentProps = {
    surface?: 'solid' | 'glass';
    side?: 'top' | 'bottom' | 'left' | 'right';
    align?: 'start' | 'center' | 'end';
    children?: Snippet;
} & DefaultProps;

export { Content, Description, Root, Title, Trigger };
~~~~

## Examples

### Definition

~~~~svelte
<script lang="ts">
    import * as HoverCard from '@mielui/svelte/components/hover-card';
</script>

<HoverCard.Root>
    <HoverCard.Trigger>polymorphic</HoverCard.Trigger>
    <HoverCard.Content>
        <HoverCard.Description>
            Able to render as different HTML elements while maintaining the same component API.
        </HoverCard.Description>
    </HoverCard.Content>
</HoverCard.Root>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import * as HoverCard from '@mielui/svelte/components/hover-card';
</script>

<HoverCard.Root>
    <HoverCard.Trigger>polymorphic</HoverCard.Trigger>
    <HoverCard.Content surface="glass">
        <HoverCard.Description>
            Able to render as different HTML elements while maintaining the same component API.
        </HoverCard.Description>
    </HoverCard.Content>
</HoverCard.Root>
~~~~

### Link Preview

~~~~svelte
<script lang="ts">
    import * as HoverCard from '@mielui/svelte/components/hover-card';
</script>

<HoverCard.Root>
    <HoverCard.Trigger href="https://ui.miel.my">mielui</HoverCard.Trigger>
    <HoverCard.Content>
        <HoverCard.Title>mielui</HoverCard.Title>
        <HoverCard.Description>
            An unstyled, accessible Svelte component library.
        </HoverCard.Description>
    </HoverCard.Content>
</HoverCard.Root>
~~~~

### User Preview

~~~~svelte
<script lang="ts">
    import {
        Building03Icon as Building,
        Location01Icon as MapPin,
        UserGroupIcon as Users
    } from '@hugeicons/core-free-icons';
    import * as Avatar from '@mielui/svelte/components/avatar';
    import { Button } from '@mielui/svelte/components/button';
    import * as HoverCard from '@mielui/svelte/components/hover-card';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let following = $state(false);
    function toggleFollow() {
        following = !following;
    }
</script>

<div class="flex items-center justify-center">
    <div class="text-sm text-foreground-muted">
        Reviewed by
        <HoverCard.Root>
            <HoverCard.Trigger href="https://github.com/mielsense">@mielsense</HoverCard.Trigger>
            <HoverCard.Content class="w-60">
                <div class="flex flex-col gap-3">
                    <!-- Header: Avatar + Name -->
                    <div class="flex items-center gap-3">
                        <Avatar.Root size="md">
                            <Avatar.Fallback>AN</Avatar.Fallback>
                        </Avatar.Root>
                        <div class="flex flex-col">
                            <HoverCard.Title class="text-base">mielsense</HoverCard.Title>
                            <p class="text-sm text-foreground-muted">@mielsense</p>
                        </div>
                    </div>

                    <!-- Bio -->
                    <HoverCard.Description class="text-sm leading-relaxed text-pretty">
                        Maintains the shared components and reviews accessibility fixes.
                    </HoverCard.Description>

                    <!-- Meta: Location & Company -->
                    <div class="flex flex-col gap-1 text-xs text-foreground-muted">
                        <div class="flex items-center gap-1.5">
                            <HugeiconsIcon icon={MapPin} size={14} />
                            <span>Seattle, WA</span>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <HugeiconsIcon icon={Building} size={14} />
                            <span>Mielui Labs</span>
                        </div>
                    </div>

                    <!-- Stats -->
                    <div class="flex items-center gap-1 text-xs text-foreground-muted py-1">
                        <HugeiconsIcon icon={Users} size={14} />
                        <span>1.2k followers · 89 following</span>
                    </div>

                    <!-- Follow Button -->
                    <Button
                        variant="secondary"
                        size="md"
                        class="w-full"
                        aria-pressed={following}
                        onclick={toggleFollow}
                    >
                        {following ? 'Following' : 'Follow'}
                    </Button>
                </div>
            </HoverCard.Content>
        </HoverCard.Root>
        3 days ago.
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/hover-card](/docs/components/hover-card).


---

Source: http://sveltekit-prerender/docs/components/input.md

# Input

Text input wrapping a native <input>. Supports labels, descriptions, adornments, 2 variants, and native input types.

- Package: `@mielui/svelte`
- Component version: `5.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/field-metadata, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add input
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| placeholder | string \| undefined | — | No | No |
| label | string \| undefined | — | No | No |
| description | string \| undefined | — | No | No |
| variant | "secondary" \| "outline" \| undefined | 'outline' | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| leading | Snippet<[]> \| undefined | — | No | No |
| trailing | Snippet<[]> \| undefined | — | No | No |
| element | HTMLInputElement \| undefined | — | No | Yes |
| type | "file" \| "checkbox" \| "radio" \| "number" \| "hidden" \| "color" \| "search" \| "button" \| "text" \| "tel" \| "url" \| "email" \| "date" \| "time" \| "submit" \| "reset" \| "image" \| "datetime-local" \| "month" \| "password" \| "range" \| "week" \| undefined | 'text' | No | No |
| files | FileList \| undefined \| undefined | — | No | Yes |
| value | undefined \| string \| number \| undefined | — | No | Yes |
| checked | undefined \| boolean \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
import Input from './input.svelte';

type KnownInputType<Type> = Type extends string ? (string extends Type ? never : Type) : never;

export type InputProps = {
    placeholder?: string;
    label?: string;
    description?: string;
    variant?: 'outline' | 'secondary';
    class?: string;
    leading?: Snippet;
    trailing?: Snippet;
    element?: HTMLInputElement | undefined;
} & Omit<HTMLInputAttributes, 'type' | 'value' | 'checked' | 'files'> &
    (
        | { type: 'file'; files?: FileList; value?: never; checked?: never }
        | { type: 'checkbox' | 'radio'; value?: string | number; checked?: boolean; files?: never }
        | {
              type?: Exclude<KnownInputType<HTMLInputTypeAttribute>, 'file' | 'checkbox' | 'radio'>;
              value?: string | number;
              checked?: never;
              files?: never;
          }
    );

export { Input };
export default Input;
~~~~

## Examples

### Adornments

~~~~svelte
<script lang="ts">
    import { GitBranchIcon as GitBranch } from '@hugeicons/core-free-icons';
    import { Input } from '@mielui/svelte/components/input';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="w-full max-w-xs">
    <Input label="Repository" placeholder="mielui">
        {#snippet leading()}
            <HugeiconsIcon icon={GitBranch} />
        {/snippet}
        {#snippet trailing()}
            <span>.git</span>
        {/snippet}
    </Input>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Input } from '@mielui/svelte/components/input';

    let projectName = $state('mielui');
    let rootDirectory = $state('./');
    let message = $state('');
    function save() {
        message =
            projectName.trim() && rootDirectory.trim()
                ? `Saved ${projectName.trim()} in ${rootDirectory.trim()}.`
                : 'Enter a project name and root directory.';
    }
    function reset() {
        projectName = 'mielui';
        rootDirectory = './';
        message = 'Changes discarded.';
    }
</script>

<div class="w-full max-w-sm space-y-6">
    <h2 class="text-sm [font-weight:var(--font-weight-label,600)] text-foreground">
        Project settings
    </h2>

    <div class="space-y-4">
        <Input
            label="Project name"
            bind:value={projectName}
            description="The name shown in your workspace."
        />

        <Input
            label="Root directory"
            placeholder="./"
            bind:value={rootDirectory}
            description="The directory where your source code lives."
        />
    </div>

    <div class="flex items-center justify-end gap-3">
        <Button variant="ghost" size="md" onclick={reset}>Reset</Button>
        <Button size="md" onclick={save}>Save settings</Button>
    </div>
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Validation

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Input } from '@mielui/svelte/components/input';

    let email = $state('');
    let workspaceSlug = $state('');
    let emailInput = $state<HTMLInputElement>();
    let workspaceSlugInput = $state<HTMLInputElement>();
    let emailTouched = $state(false);
    let workspaceSlugTouched = $state(false);
    let submitted = $state(false);
    const errorInputClass =
        'border-[color-mix(in_srgb,var(--color-error)_70%,transparent)] shadow-[0_0_0_calc(var(--border-size)*2)_color-mix(in_srgb,var(--color-error)_25%,transparent)]';

    function emailValidationMessage(
        value: string,
        input: HTMLInputElement | undefined,
        isTouched: boolean
    ): string {
        if (!isTouched) {
            return '';
        }

        if (value.trim() === '') {
            return 'Enter an email address.';
        }

        if (!input?.validity.valid) {
            return 'Enter a valid email address.';
        }

        return '';
    }

    function workspaceSlugValidationMessage(
        value: string,
        input: HTMLInputElement | undefined,
        isTouched: boolean
    ): string {
        if (!isTouched) {
            return '';
        }

        if (value.trim() === '') {
            return 'Enter a workspace slug.';
        }

        if (!input?.validity.valid) {
            return 'Use lowercase letters, numbers, and hyphens only.';
        }

        return '';
    }

    function validate(event: SubmitEvent) {
        event.preventDefault();
        emailTouched = true;
        workspaceSlugTouched = true;
        submitted = true;
    }

    let emailError = $derived(emailValidationMessage(email, emailInput, emailTouched));
    let workspaceSlugError = $derived(
        workspaceSlugValidationMessage(workspaceSlug, workspaceSlugInput, workspaceSlugTouched)
    );
    let isValid = $derived(submitted && !emailError && !workspaceSlugError);
</script>

<form class="w-full max-w-md space-y-4" novalidate onsubmit={validate}>
    <div class="space-y-1.5">
        <Input
            label="Email"
            type="email"
            placeholder="you@example.com"
            required
            bind:value={email}
            bind:element={emailInput}
            onblur={() => {
                emailTouched = true;
            }}
            aria-invalid={emailError ? 'true' : undefined}
            aria-describedby={emailError ? 'email-error email-description' : 'email-description'}
            aria-errormessage={emailError ? 'email-error' : undefined}
            class={emailError ? errorInputClass : undefined}
        />
        <div
            data-state={emailError ? 'error' : undefined}
            class="-mt-1.5 max-h-0 overflow-hidden opacity-0 transition-[margin,max-height,opacity] [transition-duration:220ms] ease-[var(--ease-out)] motion-reduce:transition-none data-[state=error]:mt-0 data-[state=error]:max-h-24 data-[state=error]:opacity-100"
        >
            <p
                id="email-error"
                class="text-sm font-medium text-error"
                role={emailError ? 'alert' : undefined}
                aria-hidden={emailError ? undefined : 'true'}
            >
                {emailError}
            </p>
        </div>
        <p
            id="email-description"
            class="text-foreground-muted [font-size:var(--font-size-body,16px)]"
        >
            We'll use this to send workspace invites.
        </p>
    </div>

    <div class="space-y-1.5">
        <Input
            label="Workspace slug"
            placeholder="acme-design"
            required
            pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
            bind:value={workspaceSlug}
            bind:element={workspaceSlugInput}
            onblur={() => {
                workspaceSlugTouched = true;
            }}
            aria-invalid={workspaceSlugError ? 'true' : undefined}
            aria-describedby={workspaceSlugError
                ? 'workspace-slug-error workspace-slug-description'
                : 'workspace-slug-description'}
            aria-errormessage={workspaceSlugError ? 'workspace-slug-error' : undefined}
            class={workspaceSlugError ? errorInputClass : undefined}
        />
        <div
            data-state={workspaceSlugError ? 'error' : undefined}
            class="-mt-1.5 max-h-0 overflow-hidden opacity-0 transition-[margin,max-height,opacity] [transition-duration:220ms] ease-[var(--ease-out)] motion-reduce:transition-none data-[state=error]:mt-0 data-[state=error]:max-h-24 data-[state=error]:opacity-100"
        >
            <p
                id="workspace-slug-error"
                class="text-sm font-medium text-error"
                role={workspaceSlugError ? 'alert' : undefined}
                aria-hidden={workspaceSlugError ? undefined : 'true'}
            >
                {workspaceSlugError}
            </p>
        </div>
        <p
            id="workspace-slug-description"
            class="text-foreground-muted [font-size:var(--font-size-body,16px)]"
        >
            Lowercase letters, numbers, and hyphens only.
        </p>
    </div>

    <div class="flex items-center gap-3">
        <Button type="submit" size="md">Validate fields</Button>
        {#if isValid}
            <p class="text-sm text-success" role="status">Both fields are valid.</p>
        {/if}
    </div>
</form>
~~~~

### Variant Outline

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
</script>

<div class="w-full max-w-xs">
    <Input label="Outline" placeholder="Placeholder text" />
</div>
~~~~

### Variant Secondary

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
</script>

<div class="w-full max-w-xs">
    <Input variant="secondary" label="Secondary" placeholder="Placeholder text" />
</div>
~~~~

For the rendered reference, visit [/docs/components/input](/docs/components/input).


---

Source: http://sveltekit-prerender/docs/components/kbd.md

# Kbd

Keyboard shortcut indicator. Activates its nearest interactive owner or an explicit ontrigger callback.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add kbd
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Kbd

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| shortcut | string | '' | Yes | No |
| ontrigger | ((event: KeyboardEvent) => void) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Kbd from './kbd.svelte';

export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
    children?: Snippet;
    shortcut: string;
    ontrigger?: (event: KeyboardEvent) => void;
};

export { Kbd };
export default Kbd;
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import Kbd from '@mielui/svelte/components/kbd';
</script>

<Kbd shortcut="K" />
~~~~

### Context

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';

    let saved = $state(false);
    function save() {
        saved = true;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <Button variant="secondary" onclick={save}>
        Save draft
        <Kbd shortcut="alt+S" ontrigger={save} />
    </Button>
    <p role="status" class="text-sm text-foreground-muted">
        {saved ? 'Draft saved in this preview.' : 'Click Save draft or press Alt+S.'}
    </p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';

    let message = $state('Try a shortcut or choose an action.');

    function cancel() {
        message = 'Changes discarded in this preview.';
    }
    function save() {
        message = 'Draft saved in this preview.';
    }
    function ontrigger() {
        message = 'Pressed K. Shortcut activated in this preview.';
    }
</script>

<div class="flex flex-col items-center gap-4">
    <div class="flex flex-wrap items-center justify-center gap-3">
        <Button variant="ghost" onclick={cancel}>
            Cancel
            <Kbd shortcut="esc" />
        </Button>
        <Button onclick={save}>
            Save
            <Kbd shortcut="enter" />
        </Button>
        <Kbd shortcut="K" {ontrigger} />
    </div>

    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Modifiers

~~~~svelte
<script lang="ts">
    import Kbd from '@mielui/svelte/components/kbd';
</script>

<div class="flex gap-2">
    <Kbd shortcut="cmd+K" />
    <Kbd shortcut="shift+/" />
</div>
~~~~

For the rendered reference, visit [/docs/components/kbd](/docs/components/kbd).


---

Source: http://sveltekit-prerender/docs/components/label.md

# Label

Thin wrapper around native <label> with mielui styling defaults.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add label
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLLabelAttributes } from 'svelte/elements';
import Label from './label.svelte';

export type LabelProps = DefaultProps & HTMLLabelAttributes;

export { Label };
export default Label;
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
    import { Label } from '@mielui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="disabled" class="cursor-not-allowed opacity-[var(--opacity-disabled)]">
        Username
    </Label>
    <Input id="disabled" type="text" disabled />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
    import { Label } from '@mielui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="email">Email address</Label>
    <Input id="email" type="email" placeholder="you@ui.miel.my" />
</div>
~~~~

### With Required

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
    import { Label } from '@mielui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="name">Full name<span class="text-error">*</span></Label>
    <Input id="name" type="text" required />
</div>
~~~~

For the rendered reference, visit [/docs/components/label](/docs/components/label).


---

Source: http://sveltekit-prerender/docs/components/native-select.md

# Native Select

A styled native select with option groups, forms, and multiple selection.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add native-select
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| multiple | false \| undefined \| true | false | No | No |
| value | string \| undefined \| string[] \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### OptGroup

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Option

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
export { default as Root } from './native-select.svelte';
export { default as OptGroup } from './native-select-opt-group.svelte';
export { default as Option } from './native-select-option.svelte';
~~~~

## Examples

### Form

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Label } from '@mielui/svelte/components/label';
    import * as NativeSelect from '@mielui/svelte/components/native-select';

    const id = $props.id();
    let plan = $state('');
    let saved = $state('');

    function savePlan(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
        event.preventDefault();
        saved = String(new FormData(event.currentTarget).get('plan'));
    }
</script>

<form class="flex w-full max-w-xs flex-col gap-3" onsubmit={savePlan}>
    <Label for={id}>Plan</Label>
    <NativeSelect.Root {id} name="plan" required bind:value={plan}>
        <NativeSelect.Option value="" disabled>Choose a plan</NativeSelect.Option>
        <NativeSelect.Option value="personal">Personal</NativeSelect.Option>
        <NativeSelect.Option value="team">Team</NativeSelect.Option>
        <NativeSelect.Option value="enterprise" disabled>
            Enterprise, coming soon
        </NativeSelect.Option>
    </NativeSelect.Root>
    <Button type="submit">Save plan</Button>
    <p role="status" class="min-h-5 text-sm text-foreground-muted">
        {saved ? `Saved ${saved} plan.` : ''}
    </p>
</form>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Label } from '@mielui/svelte/components/label';
    import * as NativeSelect from '@mielui/svelte/components/native-select';

    let timezone = $state('Europe/Paris');
    const id = $props.id();
</script>

<div class="flex w-full max-w-xs flex-col gap-2">
    <Label for={id}>Time zone</Label>
    <NativeSelect.Root {id} name="timezone" bind:value={timezone}>
        <NativeSelect.OptGroup label="Europe">
            <NativeSelect.Option value="Europe/Paris">Paris</NativeSelect.Option>
            <NativeSelect.Option value="Europe/London">London</NativeSelect.Option>
        </NativeSelect.OptGroup>
        <NativeSelect.OptGroup label="Americas">
            <NativeSelect.Option value="America/New_York">New York</NativeSelect.Option>
            <NativeSelect.Option value="America/Los_Angeles">Los Angeles</NativeSelect.Option>
        </NativeSelect.OptGroup>
    </NativeSelect.Root>
    <p class="text-sm text-foreground-muted">{`Selected: ${timezone}`}</p>
</div>
~~~~

### Multiple

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Label } from '@mielui/svelte/components/label';
    import * as NativeSelect from '@mielui/svelte/components/native-select';

    const id = $props.id();
    let days = $state(['monday', 'wednesday']);
</script>

<div class="flex w-full max-w-xs flex-col gap-2">
    <Label for={id}>Office days</Label>
    <NativeSelect.Root {id} name="days" multiple size={4} bind:value={days}>
        <NativeSelect.Option value="monday">Monday</NativeSelect.Option>
        <NativeSelect.Option value="tuesday">Tuesday</NativeSelect.Option>
        <NativeSelect.Option value="wednesday">Wednesday</NativeSelect.Option>
        <NativeSelect.Option value="thursday">Thursday</NativeSelect.Option>
    </NativeSelect.Root>
    <p class="text-sm text-foreground-muted">
        <span use:numberShuffle={{ value: days.length }}>{days.length}</span> days selected. Use
        your platform's modifier keys to select several options.
    </p>
</div>
~~~~

### Usage

~~~~svelte
<script lang="ts">
    import * as NativeSelect from '@mielui/svelte/components/native-select';

    let timezone = $state('Europe/Paris');
</script>

<NativeSelect.Root name="timezone" bind:value={timezone} aria-label="Time zone">
    <NativeSelect.Option value="Europe/Paris">Paris</NativeSelect.Option>
    <NativeSelect.Option value="Europe/London">London</NativeSelect.Option>
</NativeSelect.Root>
~~~~

For the rendered reference, visit [/docs/components/native-select](/docs/components/native-select).


---

Source: http://sveltekit-prerender/docs/components/number-field.md

# Number Field

Native numeric input with composable label and step controls.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button
- Shared utilities: components/_internal/button-attributes, utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add number-field
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Decrement

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| element | HTMLButtonElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Group

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Increment

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| element | HTMLButtonElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| element | HTMLInputElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | number \| undefined | — | No | Yes |
| inputId | string \| undefined | — | No | No |
| min | number \| undefined | — | No | No |
| max | number \| undefined | — | No | No |
| step | number \| undefined | 1 | No | No |
| name | string \| undefined | — | No | No |
| form | string \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| readonly | boolean \| undefined | false | No | No |
| required | boolean \| undefined | false | No | No |
| onValueChange | ((value: number \| undefined) => void) \| undefined | — | No | No |
| children | Snippet<[{ value: number \| undefined; }]> \| undefined | — | No | No |
| element | HTMLDivElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type {
    HTMLAttributes,
    HTMLButtonAttributes,
    HTMLInputAttributes,
    HTMLLabelAttributes
} from 'svelte/elements';
import Root from './number-field.svelte';
import Decrement from './number-field-decrement.svelte';
import Group from './number-field-group.svelte';
import Increment from './number-field-increment.svelte';
import Input from './number-field-input.svelte';
import Label from './number-field-label.svelte';

export type NumberFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange'> & {
    value?: number;
    inputId?: string;
    min?: number;
    max?: number;
    step?: number;
    name?: string;
    form?: string;
    disabled?: boolean;
    readonly?: boolean;
    required?: boolean;
    onValueChange?: (value: number | undefined) => void;
    children?: Snippet<[{ value: number | undefined }]>;
    element?: HTMLDivElement | undefined;
};
export type NumberFieldInputProps = Omit<
    HTMLInputAttributes,
    'type' | 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'name' | 'form' | 'children'
> & {
    element?: HTMLInputElement | undefined;
};
export type NumberFieldLabelProps = HTMLLabelAttributes;
export type NumberFieldGroupProps = HTMLAttributes<HTMLDivElement>;
export type NumberFieldStepperProps = Omit<HTMLButtonAttributes, 'onclick'> & {
    onclick?: (event: MouseEvent) => void;
    element?: HTMLButtonElement | undefined;
};

export { Decrement, Group, Increment, Input, Label, Root };
~~~~

## Examples

### Decimal

~~~~svelte
<script lang="ts">
    import * as NumberField from '@mielui/svelte/components/number-field';

    let amount = $state<number | undefined>(1.5);
</script>
<NumberField.Root bind:value={amount} min={0} max={10} step={0.25} class="w-full max-w-56">
    <NumberField.Label>Hours</NumberField.Label>
    <NumberField.Group>
        <NumberField.Input class="text-left" />
        <NumberField.Decrement aria-label="Subtract fifteen minutes" />
        <NumberField.Increment aria-label="Add fifteen minutes" />
    </NumberField.Group>
</NumberField.Root>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import * as NumberField from '@mielui/svelte/components/number-field';
</script>
<NumberField.Root value={4} disabled class="w-full max-w-56">
    <NumberField.Label>Included seats</NumberField.Label>
    <NumberField.Group>
        <NumberField.Decrement />
        <NumberField.Input />
        <NumberField.Increment />
    </NumberField.Group>
</NumberField.Root>
~~~~

### Form

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as NumberField from '@mielui/svelte/components/number-field';

    let value = $state<number | undefined>(3);
    let submitted = $state('');
</script>
<form
    class="flex w-full max-w-64 flex-col gap-4"
    onsubmit={(event) => {
    event.preventDefault();
    submitted = String(new FormData(event.currentTarget).get('quantity'));
}}
>
    <NumberField.Root name="quantity" bind:value min={1} max={20} required>
        <NumberField.Label>Quantity</NumberField.Label>
        <NumberField.Group>
            <NumberField.Decrement />
            <NumberField.Input />
            <NumberField.Increment />
        </NumberField.Group>
    </NumberField.Root>
    <div class="flex gap-2">
        <Button type="submit">Save quantity</Button>
        <Button type="reset" variant="outline">Reset</Button>
    </div>
    <p role="status" class="text-foreground-muted [font-size:var(--font-size-caption)]">
        {submitted ? `Saved quantity: ${submitted}` : 'Clear the input to see native required validation.'}
    </p>
</form>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as NumberField from '@mielui/svelte/components/number-field';

    let quantity = $state<number | undefined>(2);
</script>
<div class="w-full max-w-56">
    <NumberField.Root bind:value={quantity} min={1} max={12} name="quantity">
        <NumberField.Label>Seats</NumberField.Label>
        <NumberField.Group class="w-36 max-w-full">
            <NumberField.Decrement />
            <NumberField.Input aria-describedby="seats-hint" />
            <NumberField.Increment />
        </NumberField.Group>
    </NumberField.Root>
    <p id="seats-hint" class="mt-2 text-foreground-muted [font-size:var(--font-size-caption)]">
        Choose between 1 and 12 seats.
    </p>
</div>
~~~~

For the rendered reference, visit [/docs/components/number-field](/docs/components/number-field).


---

Source: http://sveltekit-prerender/docs/components/otp-field.md

# OTP Field

Accessible one-time code input with customizable visual cells.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add otp-field
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| cell | { char: string \| null \| undefined; isActive: boolean; hasFakeCaret: boolean; } | — | Yes | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Group

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| value | string \| undefined | '' | No | Yes |
| onValueChange | OnChangeFn<string> \| undefined | — | No | No |
| pasteTransformer | ((text: string) => string) \| undefined | — | No | No |
| textalign | "left" \| "center" \| "right" \| undefined | — | No | No |
| pushPasswordManagerStrategy | "none" \| "increase-width" \| undefined | — | No | No |
| length | number \| undefined | 6 | No | No |
| element | HTMLInputElement \| null \| undefined | null | No | Yes |
| onComplete | ((value: string) => void) \| undefined | — | No | No |
| children | Snippet<[{ cells: PinInputCell[]; isFocused: boolean; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { PinInput } from 'bits-ui';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Root from './otp-field.svelte';
import Cell from './otp-field-cell.svelte';
import Group from './otp-field-group.svelte';
import Separator from './otp-field-separator.svelte';

export type OTPFieldCellState = PinInput.CellProps['cell'];
export type OTPFieldProps = Omit<
    PinInput.RootProps,
    'children' | 'child' | 'ref' | 'inputRef' | 'inputId' | 'maxlength' | 'onComplete'
> & {
    length?: number;
    element?: HTMLInputElement | null;
    onComplete?: (value: string) => void;
    children?: Snippet<[{ cells: OTPFieldCellState[]; isFocused: boolean }]>;
};
export type OTPFieldCellProps = Omit<PinInput.CellProps, 'child' | 'children'>;
export type OTPFieldGroupProps = HTMLAttributes<HTMLDivElement>;
export type OTPFieldSeparatorProps = HTMLAttributes<HTMLSpanElement>;

export { Cell, Group, Root, Separator };
~~~~

## Examples

### Alphanumeric

~~~~svelte
<script lang="ts">
    import * as OTPField from '@mielui/svelte/components/otp-field';
</script>
<div class="flex flex-col gap-3">
    <label for="recovery-code" class="[font-size:var(--font-size-body)]">Recovery code</label>
    <OTPField.Root
        id="recovery-code"
        length={5}
        pattern="^[a-zA-Z0-9]*$"
        inputmode="text"
        autocapitalize="characters"
        pasteTransformer={(text) => text.trim().toUpperCase()}
    />
</div>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import * as OTPField from '@mielui/svelte/components/otp-field';
</script>
<OTPField.Root aria-label="Verified code" value="482019" disabled />
~~~~

### Form

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as OTPField from '@mielui/svelte/components/otp-field';

    let code = $state('');
    let result = $state('');
</script>
<form
    class="flex flex-col items-start gap-4"
    onsubmit={(event) => {
    event.preventDefault();
    result = `Submitted ${String(new FormData(event.currentTarget).get('code'))}`;
}}
>
    <label for="code-form" class="[font-size:var(--font-size-body)]">Security code</label>
    <OTPField.Root
        id="code-form"
        name="code"
        length={6}
        minlength={6}
        required
        bind:value={code}
        pasteTransformer={(text) => text.replace(/[\s-]/g, '')}
    />
    <div class="flex gap-2">
        <Button type="submit">Verify</Button>
        <Button type="reset" variant="outline">Reset</Button>
    </div>
    <p role="status" class="text-foreground-muted [font-size:var(--font-size-caption)]">
        {result || 'You can paste a code containing spaces or hyphens.'}
    </p>
</form>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as OTPField from '@mielui/svelte/components/otp-field';

    let code = $state('');
</script>
<div class="flex flex-col gap-3">
    <label for="verification-code" class="[font-size:var(--font-size-body)]">
        Verification code
    </label>
    <OTPField.Root
        id="verification-code"
        bind:value={code}
        length={6}
        aria-describedby="verification-hint"
    >
        {#snippet children({ cells })}
            <OTPField.Group>
                {#each cells.slice(0, 3) as cell, index (index)}
                    <OTPField.Cell {cell} />
                {/each}
            </OTPField.Group>
            <OTPField.Separator />
            <OTPField.Group>
                {#each cells.slice(3) as cell, index (index)}
                    <OTPField.Cell {cell} />
                {/each}
            </OTPField.Group>
        {/snippet}
    </OTPField.Root>
    <p id="verification-hint" class="text-foreground-muted [font-size:var(--font-size-caption)]">
        Enter the six-digit code sent to your email.
    </p>
</div>
~~~~

For the rendered reference, visit [/docs/components/otp-field](/docs/components/otp-field).


---

Source: http://sveltekit-prerender/docs/components/pagination.md

# Pagination

Numbered pagination with prev/next buttons, ellipses, and configurable siblings.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn, utils.pressable

## Install

~~~~sh
pnpm dlx @mielui/svelte add pagination
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Pagination

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| page | number \| undefined | 1 | No | Yes |
| total | number | — | Yes | No |
| siblings | number \| undefined | 1 | No | No |
| onPageChange | ((page: number) => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import Pagination from './pagination.svelte';

export type PaginationProps = {
    page?: number;
    total: number;
    siblings?: number;
    onPageChange?: (page: number) => void;
} & DefaultProps;

export { Pagination };
export default Pagination;
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Pagination } from '@mielui/svelte/components/pagination';

    const pageSize = 5;
    const items = Array.from({ length: 48 }, (_, i) => `Result ${i + 1}`);
    let page = $state(1);
    const totalPages = Math.ceil(items.length / pageSize);
    const pageItems = $derived(items.slice((page - 1) * pageSize, page * pageSize));
</script>

<div class="flex w-full max-w-sm flex-col gap-4">
    <ul class="m-0 flex list-none flex-col gap-2 p-0">
        {#each pageItems as item (item)}
            <li
                class="rounded-[var(--radius-md)] border border-border bg-card px-3 py-2 text-sm text-foreground"
            >
                {item}
            </li>
        {/each}
    </ul>
    <div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
        <p class="m-0 text-xs text-foreground-muted tabular-nums">
            {'Page '}
            <span use:numberShuffle={{ value: page }}>{page}</span>
            {' of '}
            <span use:numberShuffle={{ value: totalPages }}>{totalPages}</span>
        </p>
        <Pagination bind:page total={totalPages} />
    </div>
</div>
~~~~

### Siblings

~~~~svelte
<script lang="ts">
    import { Pagination } from '@mielui/svelte/components/pagination';

    let page = $state(8);
</script>

<div class="flex justify-center p-6">
    <Pagination bind:page total={20} siblings={2} />
</div>
~~~~

For the rendered reference, visit [/docs/components/pagination](/docs/components/pagination).


---

Source: http://sveltekit-prerender/docs/components/popover.md

# Popover

Floating content positioned by @floating-ui. Click or hover triggers, Title/Content subparts, inert outside content, click-outside + Escape dismiss, optional portal.

- Package: `@mielui/svelte`
- Component version: `3.2.0`
- Depends on Mielui components: _internal/utils, button, _internal/overlay
- Shared utilities: components/_internal/button-attributes, components/_internal/surface, utils.clickOutside, utils.cn, utils.createContext, utils.inertOutside, utils.lockBodyBackground, utils.lockBodyScroll, utils.positionFloatingPanel, utils.submenuPanelOffset, utils.pushEscapeLayer, utils.trapFocus, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add popover
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| children | Snippet<[]> | — | Yes | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| surfaceClass | string \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | true | No | No |
| dismissLayer | boolean \| undefined | true | No | No |
| portal | boolean \| undefined | true | No | No |
| refElement | VirtualElement \| undefined | — | No | No |
| role | "none" \| "alertdialog" \| "dialog" \| "listbox" \| "menu" \| undefined | 'dialog' | No | No |
| tabindex | number \| undefined | -1 | No | No |
| focusTrap | boolean \| undefined | true | No | No |
| lockScroll | boolean \| undefined | true | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| placement | Placement \| undefined | 'bottom' | No | No |
| state_key | string \| undefined | — | No | No |
| stateKey | string \| undefined | — | No | No |
| hoverable | boolean \| undefined | — | No | No |
| delay | number \| undefined | 0 | No | No |
| closeDelay | number \| undefined | 150 | No | No |
| inert | boolean \| undefined | true | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| icon | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onopen | (() => void) \| undefined | — | No | No |
| style | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { VirtualElement } from '@floating-ui/dom';
import type { ButtonVariant } from '@mielui/svelte/components/button';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import Root from './popover.svelte';
import Content from './popover-content.svelte';
import Title from './popover-title.svelte';
import Trigger from './popover-trigger.svelte';

export type PopoverContentProps = {
    surface?: 'solid' | 'glass';
    children: Snippet;
    class?: string;
    /** Classes for the inset surface (where children live) — padding, layout,
     * background overrides. The `class` prop styles the outer Panel frame. */
    surfaceClass?: string;
    allowClickOutside?: boolean;
    /**
     * Render the full-viewport dismiss layer under the panel while open.
     * Defaults to `true`. Set to `false` for triggers that must stay
     * clickable while open (e.g. an input-style combobox trigger);
     * outside pointer dismissal still applies via `allowClickOutside`.
     */
    dismissLayer?: boolean;
    portal?: boolean;
    refElement?: VirtualElement;
    role?: 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'none';
    tabindex?: number;
    /** Trap Tab focus inside the panel while open. Defaults to `true`. */
    focusTrap?: boolean;
    /** Lock document scrolling while the panel is open. Defaults to `true`. */
    lockScroll?: boolean;
} & DefaultProps &
    Partial<HTMLAttributes<HTMLElement>>;

export type PopoverProps = {
    children?: Snippet;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    placement?: Placement;
    /** Stable identifier used to connect trigger and content ARIA attributes. */
    state_key?: string;
    stateKey?: string;
    hoverable?: boolean;
    delay?: number;
    closeDelay?: number;
    /** Make document content outside an open non-hover popover inert. Defaults to `true`. */
    inert?: boolean;
};

export type PopoverTriggerProps = {
    icon?: boolean;
    variant?: ButtonVariant;
    size?: 'sm' | 'md' | 'lg' | 'icon';
    children?: Snippet;
    class?: string;
    element?: HTMLButtonElement | HTMLAnchorElement | undefined;
    /** Forwarded to Button: render with `class` alone, skipping variant/size. */
    unstyled?: boolean;
    onclick?: (event: MouseEvent) => void;
    /** Called immediately before this trigger opens its popover. */
    onopen?: () => void;
    style?: string;
} & Pick<
    HTMLButtonAttributes,
    | 'disabled'
    | 'type'
    | 'name'
    | 'value'
    | 'id'
    | 'role'
    | 'tabindex'
    | 'aria-label'
    | 'aria-controls'
    | 'aria-expanded'
    | 'aria-haspopup'
> &
    Partial<Record<`data-${string}`, string | boolean | null>>;
export type PopoverTitleProps = DefaultProps;

/** Mirrors floating-ui's placements: a side, optionally aligned to a corner. */
export type Placement =
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'left'
    | 'left-start'
    | 'left-end'
    | 'right'
    | 'right-start'
    | 'right-end';

export type PopoverState = {
    open: boolean;
    focusedInside?: boolean;
    trigger: HTMLElement | null;
    focusedElement: HTMLElement | null;
    buttonRef: HTMLElement | null;
    popoverRef: HTMLElement | undefined;
    placement: Placement;
    onclick: (() => void) | undefined;
    closeTimeout: ReturnType<typeof setTimeout> | undefined;
    hoverTimeout?: ReturnType<typeof setTimeout> | undefined;
    hoverable: boolean;
    hovering?: boolean;
    delay: number | undefined;
    closeDelay: number | undefined;
    inert: boolean;
};

export { Content, Root, Title, Trigger };
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import * as Popover from '@mielui/svelte/components/popover';
</script>

<Popover.Root>
    <Popover.Trigger>Open menu</Popover.Trigger>
    <Popover.Content class="w-64" aria-label="Details">
        <div class="p-3">
            <p class="m-0 text-sm text-foreground-muted">Popover content goes here.</p>
        </div>
    </Popover.Content>
</Popover.Root>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Input } from '@mielui/svelte/components/input';
    import * as Popover from '@mielui/svelte/components/popover';

    let email = $state('');
    let members = $state(['alex@example.com']);
    let message = $state('');

    function invite(event: SubmitEvent) {
        event.preventDefault();
        const address = email.trim().toLowerCase();
        if (members.includes(address)) {
            message = 'This person already has access.';
            return;
        }
        members = [...members, address];
        email = '';
        message = `Added ${address} to this preview. No invitation was sent.`;
    }

    async function copyLink() {
        try {
            await navigator.clipboard.writeText(
                `${window.location.origin}/docs/components/popover`
            );
            message = 'Documentation link copied.';
        } catch {
            message = 'Clipboard access is unavailable. Copy the address from your browser.';
        }
    }
</script>

<Popover.Root placement="bottom">
    <Popover.Trigger variant="secondary">Share project</Popover.Trigger>
    <Popover.Content surface="glass" class="w-80 max-w-[calc(100vw-var(--spacing)*8)]">
        <div class="flex flex-col gap-4 p-2">
            <div>
                <Popover.Title class="text-sm font-medium">Project access</Popover.Title>
                <p class="mt-1 text-xs text-foreground-muted">
                    Invite someone to the local preview.
                </p>
            </div>
            <form onsubmit={invite} class="flex flex-col gap-3">
                <Input
                    label="Email address"
                    type="email"
                    required
                    bind:value={email}
                    placeholder="sam@example.com"
                />
                <Button type="submit">Invite</Button>
            </form>
            <ul class="divide-y divide-border text-sm">
                {#each members as member (member)}
                    <li class="truncate py-2">{member}</li>
                {/each}
            </ul>
            <Button variant="secondary" onclick={copyLink}>Copy documentation link</Button>
            <p role="status" class="text-xs text-foreground-muted">{message}</p>
        </div>
    </Popover.Content>
</Popover.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Input } from '@mielui/svelte/components/input';
    import * as Popover from '@mielui/svelte/components/popover';

    let email = $state('');
    let members = $state(['alex@example.com']);
    let message = $state('');

    function invite(event: SubmitEvent) {
        event.preventDefault();
        const address = email.trim().toLowerCase();
        if (members.includes(address)) {
            message = 'This person already has access.';
            return;
        }
        members = [...members, address];
        email = '';
        message = `Added ${address} to this preview. No invitation was sent.`;
    }

    async function copyLink() {
        try {
            await navigator.clipboard.writeText(
                `${window.location.origin}/docs/components/popover`
            );
            message = 'Documentation link copied.';
        } catch {
            message = 'Clipboard access is unavailable. Copy the address from your browser.';
        }
    }
</script>

<Popover.Root placement="bottom">
    <Popover.Trigger variant="secondary">Share project</Popover.Trigger>
    <Popover.Content class="w-80 max-w-[calc(100vw-var(--spacing)*8)]">
        <div class="flex flex-col gap-4 p-2">
            <div>
                <Popover.Title class="text-sm font-medium">Project access</Popover.Title>
                <p class="mt-1 text-xs text-foreground-muted">
                    Invite someone to the local preview.
                </p>
            </div>
            <form onsubmit={invite} class="flex flex-col gap-3">
                <Input
                    label="Email address"
                    type="email"
                    required
                    bind:value={email}
                    placeholder="sam@example.com"
                />
                <Button type="submit">Invite</Button>
            </form>
            <ul class="divide-y divide-border text-sm">
                {#each members as member (member)}
                    <li class="truncate py-2">{member}</li>
                {/each}
            </ul>
            <Button variant="secondary" onclick={copyLink}>Copy documentation link</Button>
            <p role="status" class="text-xs text-foreground-muted">{message}</p>
        </div>
    </Popover.Content>
</Popover.Root>
~~~~

### Placements

~~~~svelte
<script lang="ts">
    import * as Popover from '@mielui/svelte/components/popover';
</script>

<div class="flex flex-wrap gap-4 justify-center">
    {#each ['top', 'right', 'bottom', 'left'] as placement (placement)}
        <Popover.Root placement={placement as 'top' | 'right' | 'bottom' | 'left'}>
            <Popover.Trigger size="md" variant="outline">{placement}</Popover.Trigger>
            <Popover.Content class="w-48" aria-label={`${placement} placement`}>
                <div class="p-3">
                    <p class="m-0 text-sm text-foreground-muted">Anchored to{placement}</p>
                </div>
            </Popover.Content>
        </Popover.Root>
    {/each}
</div>
~~~~

For the rendered reference, visit [/docs/components/popover](/docs/components/popover).


---

Source: http://sveltekit-prerender/docs/components/progress.md

# Progress

Determinate and indeterminate progress bar.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/motion-loop, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add progress
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Progress

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | number \| undefined | 0 | No | No |
| max | number \| undefined | 100 | No | No |
| indeterminate | boolean \| undefined | false | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { HTMLAttributes } from 'svelte/elements';
import Progress from './progress.svelte';

export type ProgressProps = {
    value?: number;
    max?: number;
    indeterminate?: boolean;
} & Omit<
    HTMLAttributes<HTMLDivElement>,
    'children' | 'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow'
>;

export { Progress };
export default Progress;
~~~~

## Examples

### Determinate

~~~~svelte
<script lang="ts">
    import { Progress } from '@mielui/svelte/components/progress';
</script>

<div class="w-full max-w-md">
    <Progress aria-label="Upload progress" value={45} />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import { Progress } from '@mielui/svelte/components/progress';
    import { onDestroy } from 'svelte';

    let value = $state(0);
    let running = $state(false);
    let timer: ReturnType<typeof setInterval> | undefined;
    const status = $derived(
        value === 100 ? 'Upload complete' : running ? 'Uploading release.zip' : 'Ready to upload'
    );

    function start() {
        clearInterval(timer);
        value = 0;
        running = true;
        timer = setInterval(() => {
            value = Math.min(100, value + 10);
            if (value === 100) {
                clearInterval(timer);
                running = false;
            }
        }, 240);
    }

    function cancel() {
        clearInterval(timer);
        running = false;
        value = 0;
    }

    onDestroy(() => {
        clearInterval(timer);
    });
</script>

<div class="flex w-full max-w-md flex-col gap-4">
    <div class="flex items-center justify-between gap-3 text-sm">
        <span role="status">{status}</span>
        <span class="tabular-nums text-foreground-muted">
            <span use:numberShuffle={{ value: value }}>{value}</span>
            %
        </span>
    </div>
    <Progress aria-label="Release archive upload" {value} />
    <div class="flex gap-2">
        <Button onclick={start} disabled={running}>
            {value === 100 ? 'Upload again' : 'Start upload'}
        </Button>
        {#if running}
            <Button variant="secondary" onclick={cancel}>Cancel</Button>
        {/if}
    </div>
    <p class="text-xs text-foreground-muted">Simulated transfer. No files leave your device.</p>
</div>
~~~~

### Indeterminate

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Progress } from '@mielui/svelte/components/progress';

    let pending = $state(true);
</script>

<div class="flex w-full max-w-md flex-col gap-4">
    <Progress aria-label="Sample request" indeterminate={pending} value={pending ? 0 : 100} />
    <div class="flex items-center justify-between gap-4">
        <p class="m-0 text-sm text-foreground-muted" role="status">
            {pending ? 'Waiting for a response' : 'Response received'}
        </p>
        <Button
            variant="secondary"
            onclick={() => {
            pending = !pending;
        }}
        >
            {pending ? 'Complete request' : 'Start again'}
        </Button>
    </div>
</div>
~~~~

### With Label

~~~~svelte
<script lang="ts">
    import { Progress } from '@mielui/svelte/components/progress';
</script>

<div class="w-full max-w-md flex flex-col gap-2">
    <div class="flex items-center justify-between text-sm text-foreground-muted">
        <span>Uploading…</span>
        <span>72%</span>
    </div>
    <Progress aria-label="Upload progress" value={72} />
</div>
~~~~

For the rendered reference, visit [/docs/components/progress](/docs/components/progress).


---

Source: http://sveltekit-prerender/docs/components/radio-group.md

# Radio Group

Single-select radio group with bindable value and per-item label/description.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add radio-group
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| disabled | boolean \| undefined | — | No | No |
| label | string \| undefined | — | No | No |
| description | string \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| undefined | — | No | Yes |
| name | string \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| onValueChange | ((value: string) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLInputAttributes } from 'svelte/elements';
import Root from './radio-group.svelte';
import Item from './radio-group-item.svelte';

export type RadioGroupProps = {
    value?: string;
    name?: string;
    disabled?: boolean;
    onValueChange?: (value: string) => void;
    children?: Snippet;
} & DefaultProps;

export type RadioGroupItemProps = {
    value: string;
    disabled?: boolean;
    label?: string;
    description?: string;
    id?: string;
} & DefaultProps &
    Omit<HTMLInputAttributes, 'type' | 'value' | 'name' | 'checked'>;

export type RadioGroupContext = {
    readonly name: string | undefined;
    readonly disabled: boolean;
    isSelected: (value: string) => boolean;
    setValue: (value: string) => void;
};

export { Item, Root };
~~~~

## Examples

### Descriptions

~~~~svelte
<script lang="ts">
    import * as RadioGroup from '@mielui/svelte/components/radio-group';

    let frequency = $state<string | undefined>('weekly');
    const summary = $derived(
        frequency === 'daily'
            ? 'A digest arrives each morning.'
            : frequency === 'weekly'
              ? 'A digest arrives every Monday.'
              : 'Only security notices will be sent.'
    );
</script>

<fieldset class="flex max-w-sm flex-col gap-4">
    <legend class="mb-3 text-sm font-medium">Email digest frequency</legend>
    <RadioGroup.Root bind:value={frequency} name="digest-frequency">
        <RadioGroup.Item
            value="daily"
            label="Daily"
            description="Activity from the previous day."
        />
        <RadioGroup.Item
            value="weekly"
            label="Weekly"
            description="One summary of the week's activity."
        />
        <RadioGroup.Item value="off" label="Off" description="Keep required account notices." />
    </RadioGroup.Root>
    <p role="status" class="text-sm text-foreground-muted">{summary}</p>
</fieldset>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import * as RadioGroup from '@mielui/svelte/components/radio-group';
</script>

<RadioGroup.Root disabled name="option">
    <RadioGroup.Item value="a" label="Option A" />
    <RadioGroup.Item value="b" label="Option B" />
</RadioGroup.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as RadioGroup from '@mielui/svelte/components/radio-group';

    let value = $state<string | undefined>('pro');
</script>

<RadioGroup.Root bind:value name="plan">
    <RadioGroup.Item value="free" label="Free" description="For solo hobby projects." />
    <RadioGroup.Item value="pro" label="Pro" description="For small teams and side projects." />
    <RadioGroup.Item
        value="team"
        label="Team"
        description="Audit log, SSO, and priority support."
    />
</RadioGroup.Root>
~~~~

For the rendered reference, visit [/docs/components/radio-group](/docs/components/radio-group).


---

Source: http://sveltekit-prerender/docs/components/range-calendar.md

# Range Calendar

Composable date-range calendar with shared calendar parts and range highlighting.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, calendar
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add range-calendar
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Grid

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridBody

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridHead

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### GridRow

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### HeadCell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Heading

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarHeadingSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarHeadingSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### MonthSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| months | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarMonthSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarMonthSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### NextButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### PrevButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[{ props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### YearSelect

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| years | number[] \| undefined | — | No | No |
| child | Snippet<[CalendarYearSelectSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarYearSelectSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[RangeCalendarRootSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| placeholder | DateValue \| undefined | — | No | Yes |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| value | DateRange \| undefined | — | No | Yes |
| readonly | boolean \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| onValueChange | OnChangeFn<DateRange> \| undefined | — | No | No |
| onPlaceholderChange | OnChangeFn<DateValue> \| undefined | — | No | No |
| preventDeselect | boolean \| undefined | — | No | No |
| minValue | DateValue \| undefined | — | No | No |
| maxValue | DateValue \| undefined | — | No | No |
| pagedNavigation | boolean \| undefined | — | No | No |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined | — | No | No |
| weekdayFormat | "long" \| "short" \| "narrow" \| undefined | 'short' | No | No |
| isDateDisabled | DateMatcher \| undefined | — | No | No |
| isDateUnavailable | DateMatcher \| undefined | — | No | No |
| fixedWeeks | boolean \| undefined | true | No | No |
| numberOfMonths | number \| undefined | — | No | No |
| calendarLabel | string \| undefined | — | No | No |
| locale | string \| undefined | 'en-US' | No | No |
| disableDaysOutsideMonth | boolean \| undefined | — | No | No |
| maxDays | number \| undefined | — | No | No |
| monthFormat | "numeric" \| "long" \| "short" \| "narrow" \| "2-digit" \| ((month: number) => string) \| undefined | — | No | No |
| yearFormat | "numeric" \| "2-digit" \| ((year: number) => string) \| undefined | — | No | No |
| onStartValueChange | OnChangeFn<DateValue \| undefined> \| undefined | — | No | No |
| onEndValueChange | OnChangeFn<DateValue \| undefined> \| undefined | — | No | No |
| minDays | number \| undefined | — | No | No |
| excludeDisabled | boolean \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| date | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| month | CalendarDate \| CalendarDateTime \| ZonedDateTime | — | Yes | No |
| child | Snippet<[CalendarCellSnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarCellSnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Day

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| child | Snippet<[CalendarDaySnippetProps & { props: Record<string, unknown>; }]> \| undefined | — | No | No |
| children | Snippet<[CalendarDaySnippetProps]> \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| ref | HTMLElement \| null \| undefined | null | No | Yes |
| id | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Month

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| month | { value: DateValue; weeks: DateValue[][]; dates: DateValue[]; } | — | Yes | No |
| weekdays | string[] | — | Yes | No |
| locale | string \| undefined | 'en-US' | No | No |
| showHeading | boolean \| undefined | false | No | No |
| day | Snippet<[date: DateValue]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DateValue } from '@internationalized/date';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { RangeCalendar as CalendarPrimitive, CalendarRootSnippetProps } from 'bits-ui';
import type { Snippet } from 'svelte';

export type RangeCalendarProps = Omit<CalendarPrimitive.RootProps, 'child'>;
export type RangeCalendarMonthProps = Omit<DefaultProps, 'children'> & {
    month: CalendarRootSnippetProps['months'][number];
    weekdays: string[];
    locale?: string;
    showHeading?: boolean;
    day?: Snippet<[date: DateValue]>;
};

export { default as Grid } from '../calendar/calendar-grid.svelte';
export { default as GridBody } from '../calendar/calendar-grid-body.svelte';
export { default as GridHead } from '../calendar/calendar-grid-head.svelte';
export { default as GridRow } from '../calendar/calendar-grid-row.svelte';
export { default as HeadCell } from '../calendar/calendar-head-cell.svelte';
export { default as Header } from '../calendar/calendar-header.svelte';
export { default as Heading } from '../calendar/calendar-heading.svelte';
export { default as MonthSelect } from '../calendar/calendar-month-select.svelte';
export { default as NextButton } from '../calendar/calendar-next-button.svelte';
export { default as PrevButton } from '../calendar/calendar-prev-button.svelte';
export { default as YearSelect } from '../calendar/calendar-year-select.svelte';
export { default as Root } from './range-calendar.svelte';
export { default as Cell } from './range-calendar-cell.svelte';
export { default as Day } from './range-calendar-day.svelte';
export { default as Month } from './range-calendar-month.svelte';
~~~~

## Examples

### Constraints

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import * as RangeCalendar from '@mielui/svelte/components/range-calendar';

    const start = new CalendarDate(2026, 9, 1);
    const end = new CalendarDate(2026, 9, 30);
    let value = $state<{ start: DateValue | undefined; end: DateValue | undefined }>({
        start: undefined,
        end: undefined
    });
</script>

<RangeCalendar.Root
    bind:value
    placeholder={start}
    minValue={start}
    maxValue={end}
    minDays={2}
    maxDays={7}
    calendarLabel="September booking, two to seven days"
>
    {#snippet children({ months, weekdays })}
        <RangeCalendar.Header>
            <RangeCalendar.Heading />
        </RangeCalendar.Header>
        {#each months as month (month.value.toString())}
            <RangeCalendar.Month {month} {weekdays} />
        {/each}
    {/snippet}
</RangeCalendar.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import * as RangeCalendar from '@mielui/svelte/components/range-calendar';

    let value = $state<{ start: DateValue | undefined; end: DateValue | undefined }>({
        start: new CalendarDate(2026, 9, 17),
        end: new CalendarDate(2026, 9, 23)
    });
</script>

<div class="flex max-w-full flex-col items-center gap-4">
    <div
        class="max-w-full rounded-[var(--radius-xl)] border-[length:var(--border-size)] border-border bg-card"
    >
        <RangeCalendar.Root bind:value calendarLabel="Travel dates" />
    </div>
    <p class="text-center text-sm text-foreground-muted">
        {value.start?.toString() ?? 'Start date'}
        <span aria-hidden="true">→</span>
        {value.end?.toString() ?? 'End date'}
    </p>
</div>
~~~~

### Two Months

~~~~svelte
<script lang="ts">
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import * as RangeCalendar from '@mielui/svelte/components/range-calendar';

    let value = $state<{
        start: DateValue | undefined;
        end: DateValue | undefined;
    }>({
        start: undefined,
        end: undefined
    });
</script>

<div class="flex max-w-full flex-col gap-3">
    <RangeCalendar.Root
        bind:value
        calendarLabel="Booking dates"
        placeholder={new CalendarDate(2026, 9, 17)}
        numberOfMonths={2}
        pagedNavigation
    />
    <p aria-live="polite" class="px-3 text-sm text-foreground-muted">
        {#if value.start && value.end}
            {value.start.toString()} —{value.end.toString()}
        {:else if value.start}
            Start:{value.start.toString()}
            . Choose an end date.
        {:else}
            Choose a start and end date, across any month.
        {/if}
    </p>
</div>
~~~~

For the rendered reference, visit [/docs/components/range-calendar](/docs/components/range-calendar).


---

Source: http://sveltekit-prerender/docs/components/scroll-area.md

# Scroll Area

Themed scroll container with vertical or horizontal overflow.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add scroll-area
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### ScrollArea

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| orientation | "both" \| "horizontal" \| "vertical" \| undefined | 'vertical' | No | No |
| showCues | boolean \| undefined | true | No | No |
| blur | boolean \| undefined | true | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLDivElement \| undefined | — | No | Yes |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import ScrollArea from './scroll-area.svelte';

export type ScrollAreaProps = {
    orientation?: 'vertical' | 'horizontal' | 'both';
    showCues?: boolean;
    blur?: boolean;
    children?: Snippet;
    element?: HTMLDivElement;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export { ScrollArea };
export default ScrollArea;
~~~~

## Examples

### Blur

~~~~svelte
<script lang="ts">
    import { ScrollArea } from '@mielui/svelte/components/scroll-area';

    const commits = [
        { hash: '9f2c1ab', message: 'Tighten the panel elevation ramp' },
        { hash: '4d80e73', message: 'Drop the unused motion fallback' },
        { hash: 'b17aa90', message: 'Document the density scale' },
        { hash: '02f5c6e', message: 'Fix toast stacking on mobile' },
        { hash: 'ac9013d', message: 'Add a reduced-motion snapshot' },
        { hash: '76be24f', message: 'Rename the radius tokens' },
        { hash: 'e3c8a15', message: 'Guard the popover outside click' },
        { hash: '5a10f9b', message: 'Split the theme export helpers' },
        { hash: 'd42e607', message: 'Cache the syntax highlighter' },
        { hash: '81fb3c2', message: 'Correct the badge outline width' },
        { hash: '3c67d48', message: 'Trim the changelog compiler' },
        { hash: 'f905b1e', message: 'Restore the focus ring on Safari' }
    ];
</script>

{#snippet commitList()}
    <div class="flex flex-col p-2">
        {#each commits as commit (commit.hash)}
            <div
                class="flex items-baseline gap-3 rounded-[var(--radius-md)] px-3 py-2 text-[0.85rem]"
            >
                <span class="font-mono text-[0.75rem] text-foreground-muted">{commit.hash}</span>
                <span class="truncate text-foreground">{commit.message}</span>
            </div>
        {/each}
    </div>
{/snippet}

<div class="flex flex-wrap items-start justify-center gap-6 p-10">
    <div class="flex flex-col gap-2">
        <span class="text-[0.7rem] font-semibold uppercase tracking-wider text-foreground-muted">
            Default
        </span>
        <ScrollArea
            aria-label="Commits with a blurred edge cue"
            class="h-56 w-72 rounded-[var(--radius-lg)] border border-border bg-panel"
        >
            {@render commitList()}
        </ScrollArea>
    </div>

    <div class="flex flex-col gap-2">
        <span class="text-[0.7rem] font-semibold uppercase tracking-wider text-foreground-muted">
            blur=&#123;false&#125;
        </span>
        <ScrollArea
            blur={false}
            aria-label="Commits without a blurred edge cue"
            class="h-56 w-72 rounded-[var(--radius-lg)] border border-border bg-panel"
        >
            {@render commitList()}
        </ScrollArea>
    </div>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { ScrollArea } from '@mielui/svelte/components/scroll-area';

    let activeChatId = $state(0);

    const chats = [
        { id: 0, date: 'Today', title: 'Svelte 5 runes migration' },
        { id: 1, date: 'Today', title: 'Designing the studio preset' },
        { id: 2, date: 'Today', title: 'Tailwind v4 token setup' },
        { id: 3, date: 'Today', title: 'Pagination active state' },
        { id: 4, date: 'Yesterday', title: 'Figma plugin ideas' },
        { id: 5, date: 'Yesterday', title: 'Vercel deploy hook' },
        { id: 6, date: 'Yesterday', title: 'Refactor command palette' },
        { id: 7, date: 'Yesterday', title: 'Hover card a11y' },
        { id: 8, date: 'Previous 7 days', title: 'Toast queue logic' },
        { id: 9, date: 'Previous 7 days', title: 'Color picker math' },
        { id: 10, date: 'Previous 7 days', title: 'Button loading states' },
        { id: 11, date: 'Previous 7 days', title: 'Dialog scroll behavior' },
        { id: 12, date: 'Previous 7 days', title: 'Badge variant system' },
        { id: 13, date: 'Previous 7 days', title: 'Breadcrumb navigation' },
        { id: 14, date: 'Previous 7 days', title: 'Dropdown menu icons' },
        { id: 15, date: 'Previous 7 days', title: 'Alert dialog focus trap' }
    ];

    const groupedChats = chats.reduce(
        (acc, chat) => {
            const group = acc.find((g) => g.date === chat.date);
            if (group) {
                group.items.push(chat);
            } else {
                acc.push({ date: chat.date, items: [chat] });
            }
            return acc;
        },
        [] as Array<{ date: string; items: typeof chats }>
    );
</script>

<div class="flex w-full min-w-0 items-center justify-center p-2 sm:p-6">
    <ScrollArea
        aria-label="Recent chats"
        class="h-72 w-full max-w-72 rounded-[var(--radius-lg)] border border-border bg-panel"
    >
        <div class="flex flex-col p-2">
            {#each groupedChats as group (group.date)}
                <div class="px-2 py-2 pt-3 text-xs font-medium text-foreground-muted">
                    {group.date}
                </div>

                {#each group.items as chat (chat.id)}
                    <button
                        type="button"
                        aria-pressed={activeChatId === chat.id}
                        onclick={() => (activeChatId = chat.id)}
                        class="w-full truncate rounded-[var(--radius-md)] px-3 py-2 text-left text-[0.85rem] transition-colors {activeChatId ===
                            chat.id
                            ? 'bg-secondary text-foreground'
                            : 'text-foreground-muted hover:bg-secondary/50 hover:text-foreground'}"
                    >
                        {chat.title}
                    </button>
                {/each}
            {/each}
        </div>
    </ScrollArea>
</div>
~~~~

### Horizontal

~~~~svelte
<script lang="ts">
    import { ScrollArea } from '@mielui/svelte/components/scroll-area';

    const tabs = [
        'Overview',
        'Activity',
        'Settings',
        'Members',
        'Billing',
        'Integrations',
        'Webhooks',
        'Security',
        'Audit log',
        'Danger zone'
    ];
</script>

<div class="flex items-center justify-center p-10">
    <ScrollArea
        orientation="horizontal"
        class="w-72 rounded-[var(--radius-lg)] border border-border bg-card p-2"
    >
        <div class="flex gap-2">
            {#each tabs as tab (tab)}
                <span
                    class="whitespace-nowrap rounded-md bg-secondary px-3 py-1.5 text-sm text-foreground"
                >
                    {tab}
                </span>
            {/each}
        </div>
    </ScrollArea>
</div>
~~~~

For the rendered reference, visit [/docs/components/scroll-area](/docs/components/scroll-area).


---

Source: http://sveltekit-prerender/docs/components/select.md

# Select

Listbox-based single-select with bindable value and Item/Label/Content subparts.

- Package: `@mielui/svelte`
- Component version: `2.3.0`
- Depends on Mielui components: _internal/utils, popover, button, scroll-area
- Shared utilities: components/_internal/button-attributes, components/_internal/surface, hugeicons-icon, utils.cn, utils.createContext, utils.dynamicWidth, utils.travelingHighlight

## Install

~~~~sh
pnpm dlx @mielui/svelte add select
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |
| dynamic | boolean \| undefined | false | No | No |



### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| string \| (string & string[]) | — | Yes | No |
| label | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| name | string \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| required | boolean \| undefined | false | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| type | "single" \| undefined \| "multiple" | 'single' | No | No |
| value | string \| undefined \| string[] \| undefined | type === 'multiple' ? [] : '' | No | Yes |
| onValueChange | ((value: string) => void) \| undefined \| ((value: string[]) => void) \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | 'outline' | No | No |
| style | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| icon | boolean \| undefined | — | No | No |
| onopen | (() => void) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Value

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| placeholder | string \| undefined | 'Select' | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { ButtonProps } from '@mielui/svelte/components/button';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import Root from './select.svelte';
import Content from './select-content.svelte';
import Item from './select-item.svelte';
import Label from './select-label.svelte';
import Trigger from './select-trigger.svelte';
import Value from './select-value.svelte';

export type SelectState<Value extends string | string[] = string> = {
    value: Value;
    selectedLabel: string;
};

type SelectRootProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    name?: string;
    disabled?: boolean;
    required?: boolean;
    children?: Snippet;
};

export type SelectProps = SelectRootProps &
    (
        | {
              type?: 'single';
              value?: string;
              onValueChange?: (value: string) => void;
          }
        | {
              type: 'multiple';
              value?: string[];
              onValueChange?: (value: string[]) => void;
          }
    );

export type SelectItemProps = {
    value: string;
    label?: string;
    children?: Snippet;
} & ButtonProps;

export type SelectValueProps = {
    placeholder?: string;
} & DefaultProps;

export { Content, Item, Label, Root, Trigger, Value };
~~~~

## Examples

### Dynamic Width

~~~~svelte
<script lang="ts">
    import * as Select from '@mielui/svelte/components/select';

    const roles = [
        { value: 'viewer', label: 'Viewer' },
        { value: 'editor', label: 'Editor' },
        { value: 'billing', label: 'Billing administrator' }
    ];

    let role = $state('viewer');
    const selected = $derived(roles.find((r) => r.value === role));
</script>

<div class="flex flex-col gap-2">
    <span class="text-sm [font-weight:var(--font-weight-label,500)] text-foreground">Role</span>
    <Select.Root bind:value={role}>
        <Select.Trigger aria-label="Role" class="w-40" variant="outline">
            {selected?.label ?? 'Select role'}
        </Select.Trigger>
        <Select.Content dynamic>
            {#each roles as option (option.value)}
                <Select.Item value={option.value}>{option.label}</Select.Item>
            {/each}
        </Select.Content>
    </Select.Root>
</div>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import * as Select from '@mielui/svelte/components/select';

    const priorities = [
        { value: 'none', label: 'No priority' },
        { value: 'urgent', label: 'Urgent' },
        { value: 'high', label: 'High' },
        { value: 'medium', label: 'Medium' },
        { value: 'low', label: 'Low' }
    ];

    let selectedPriority = $state('medium');
    const selected = $derived(priorities.find((p) => p.value === selectedPriority));
</script>

<div class="flex flex-col gap-2">
    <span class="text-sm [font-weight:var(--font-weight-label,500)] text-foreground">Priority</span>
    <Select.Root bind:value={selectedPriority}>
        <Select.Trigger aria-label="Priority" class="min-w-[220px]" variant="outline" size="md">
            {selected?.label ?? 'Select priority'}
        </Select.Trigger>
        <Select.Content surface="glass">
            {#each priorities as priority (priority.value)}
                <Select.Item value={priority.value}>
                    {priority.label}
                </Select.Item>
            {/each}
        </Select.Content>
    </Select.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Select from '@mielui/svelte/components/select';

    const priorities = [
        { value: 'none', label: 'No priority' },
        { value: 'urgent', label: 'Urgent' },
        { value: 'high', label: 'High' },
        { value: 'medium', label: 'Medium' },
        { value: 'low', label: 'Low' }
    ];

    let selectedPriority = $state('medium');
    const selected = $derived(priorities.find((p) => p.value === selectedPriority));
</script>

<div class="flex flex-col gap-2">
    <span class="text-sm [font-weight:var(--font-weight-label,500)] text-foreground">Priority</span>
    <Select.Root bind:value={selectedPriority}>
        <Select.Trigger aria-label="Priority" class="min-w-[220px]" variant="outline" size="md">
            {selected?.label ?? 'Select priority'}
        </Select.Trigger>
        <Select.Content>
            {#each priorities as priority (priority.value)}
                <Select.Item value={priority.value}>
                    {priority.label}
                </Select.Item>
            {/each}
        </Select.Content>
    </Select.Root>
</div>
~~~~

### Multiple

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Select from '@mielui/svelte/components/select';

    const options = [
        { value: 'design', label: 'Design' },
        { value: 'engineering', label: 'Engineering' },
        { value: 'support', label: 'Support' },
        { value: 'finance', label: 'Finance', disabled: true }
    ];
    let teams = $state<string[]>(['design']);
    let submitted = $state('');

    function clear() {
        teams = [];
        submitted = '';
    }

    function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
        event.preventDefault();
        const values = new FormData(event.currentTarget).getAll('teams').filter((value) => {
            return typeof value === 'string' && value.length > 0;
        });
        submitted = values.length ? `Saved: ${values.join(', ')}` : 'No teams selected.';
    }
</script>

<form class="flex w-full max-w-sm flex-col gap-4" onsubmit={submit}>
    <Select.Root type="multiple" bind:value={teams} name="teams">
        <Select.Trigger aria-label="Teams" class="w-full">
            <Select.Value placeholder="Select teams" />
        </Select.Trigger>
        <Select.Content>
            {#each options as option (option.value)}
                <Select.Item value={option.value} label={option.label} disabled={option.disabled}>
                    {option.label}
                </Select.Item>
            {/each}
        </Select.Content>
    </Select.Root>
    <div class="flex items-center gap-2">
        <Button type="submit">Save teams</Button>
        <Button variant="outline" onclick={clear}>Clear</Button>
    </div>
    <p role="status" class="min-h-5 text-sm text-foreground-muted">
        {submitted || `${teams.length} selected`}
    </p>
</form>
~~~~

### Scrollable

~~~~svelte
<script lang="ts">
    import * as Select from '@mielui/svelte/components/select';

    const timezones = [
        { value: 'pacific-honolulu', label: 'Hawaii (HST)' },
        { value: 'america-anchorage', label: 'Alaska (AKST)' },
        { value: 'america-los-angeles', label: 'Pacific Time (PT)' },
        { value: 'america-denver', label: 'Mountain Time (MT)' },
        { value: 'america-chicago', label: 'Central Time (CT)' },
        { value: 'america-new-york', label: 'Eastern Time (ET)' },
        { value: 'america-halifax', label: 'Atlantic Time (AT)' },
        { value: 'america-sao-paulo', label: 'São Paulo (BRT)' },
        { value: 'atlantic-azores', label: 'Azores (AZOT)' },
        { value: 'europe-london', label: 'London (GMT)' },
        { value: 'europe-paris', label: 'Paris (CET)' },
        { value: 'europe-berlin', label: 'Berlin (CET)' },
        { value: 'europe-athens', label: 'Athens (EET)' },
        { value: 'europe-istanbul', label: 'Istanbul (TRT)' },
        { value: 'africa-cairo', label: 'Cairo (EET)' },
        { value: 'africa-johannesburg', label: 'Johannesburg (SAST)' },
        { value: 'europe-moscow', label: 'Moscow (MSK)' },
        { value: 'asia-dubai', label: 'Dubai (GST)' },
        { value: 'asia-karachi', label: 'Karachi (PKT)' },
        { value: 'asia-kolkata', label: 'Kolkata (IST)' },
        { value: 'asia-bangkok', label: 'Bangkok (ICT)' },
        { value: 'asia-shanghai', label: 'Shanghai (CST)' },
        { value: 'asia-tokyo', label: 'Tokyo (JST)' },
        { value: 'asia-seoul', label: 'Seoul (KST)' },
        { value: 'australia-sydney', label: 'Sydney (AEST)' },
        { value: 'pacific-auckland', label: 'Auckland (NZST)' }
    ];

    let selectedTimezone = $state('america-new-york');
    const selected = $derived(timezones.find((zone) => zone.value === selectedTimezone));
</script>

<div class="flex flex-col gap-2">
    <span class="text-sm [font-weight:var(--font-weight-label,500)] text-foreground">Timezone</span>
    <Select.Root bind:value={selectedTimezone}>
        <Select.Trigger aria-label="Time zone" class="min-w-[240px]" variant="outline" size="md">
            {selected?.label ?? 'Select timezone'}
        </Select.Trigger>
        <Select.Content class="max-h-56">
            {#each timezones as timezone (timezone.value)}
                <Select.Item value={timezone.value}>
                    {timezone.label}
                </Select.Item>
            {/each}
        </Select.Content>
    </Select.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/select](/docs/components/select).


---

Source: http://sveltekit-prerender/docs/components/separator.md

# Separator

Semantic or decorative divider in either orientation.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add separator
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| orientation | Orientation \| undefined | 'horizontal' | No | No |
| decorative | boolean \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Separator as Primitive } from 'bits-ui';
import Separator from './separator.svelte';
export type SeparatorProps = Omit<Primitive.RootProps, 'child' | 'children' | 'ref'> & {
    element?: HTMLDivElement | null;
};
export { Separator };
export default Separator;
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import Separator from '@mielui/svelte/components/separator';
</script>
<div class="flex w-full max-w-xs flex-col gap-4 text-sm">
    <p>Workspace</p>
    <Separator />
    <div class="flex h-5 items-center gap-4">
        <span>Projects</span>
        <Separator orientation="vertical" decorative />
        <span>Members</span>
    </div>
</div>
~~~~

### Sections

~~~~svelte
<script lang="ts">
    import Separator from '@mielui/svelte/components/separator';
</script>
<div class="flex w-full max-w-xs flex-col gap-4 text-sm">
    <div>
        <p class="font-medium">Notifications</p>
        <p class="mt-1 text-foreground-muted">Choose which updates you receive.</p>
    </div>
    <Separator />
    <div>
        <p class="font-medium">Privacy</p>
        <p class="mt-1 text-foreground-muted">Manage who can see your activity.</p>
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/separator](/docs/components/separator).


---

Source: http://sveltekit-prerender/docs/components/sheet.md

# Sheet

Side-anchored drawer overlay (left | right). Composes _internal/overlay for shared mechanics and Svelte transitions for motion.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button, _internal/overlay
- Shared utilities: components/_internal/surface, hugeicons-icon, utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add sheet
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Close

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | true | No | No |
| side | "left" \| "right" \| undefined | 'right' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| close | boolean \| undefined | true | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { ButtonProps } from '../button';
import Root from './sheet.svelte';
import Close from './sheet-close.svelte';
import Content from './sheet-content.svelte';
import Description from './sheet-description.svelte';
import Footer from './sheet-footer.svelte';
import Header from './sheet-header.svelte';
import Title from './sheet-title.svelte';
import Trigger from './sheet-trigger.svelte';

export type SheetProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    children?: Snippet;
};

export type SheetTriggerProps = ButtonProps;
export type SheetTitleProps = DefaultProps;
export type SheetHeaderProps = DefaultProps & { close?: boolean };
export type SheetFooterProps = DefaultProps;
export type SheetDescriptionProps = DefaultProps;
export type SheetContentProps = {
    surface?: 'solid' | 'glass';
    allowClickOutside?: boolean;
    side?: 'left' | 'right';
} & DefaultProps;

export type SheetCloseProps = ButtonProps;

export type SheetState = {
    open: boolean;
    triggerRef?: HTMLElement | null;
};

export { Close, Content, Description, Footer, Header, Root, Title, Trigger };
~~~~

## Examples

### Glass

~~~~svelte
<script lang="ts">
    import {
        CircleIcon as Circle,
        AlertCircleIcon as CircleAlert,
        MinusSignIcon as Minus,
        SignalHighIcon as SignalHigh,
        SignalLow01Icon as SignalLow,
        SignalMedium01Icon as SignalMedium,
        Edit01Icon as SquarePen
    } from '@hugeicons/core-free-icons';
    import * as Avatar from '@mielui/svelte/components/avatar';
    import { Button } from '@mielui/svelte/components/button';
    import { Input } from '@mielui/svelte/components/input';
    import Kbd from '@mielui/svelte/components/kbd';
    import { Label } from '@mielui/svelte/components/label';
    import * as Select from '@mielui/svelte/components/select';
    import * as Sheet from '@mielui/svelte/components/sheet';
    import { Textarea } from '@mielui/svelte/components/textarea';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(false);
    let issueTitle = $state('');
    let issueDescription = $state('');
    let status = $state('');
    let priority = $state('');
    let assignee = $state('');

    const statuses = [
        { value: 'todo', label: 'Todo', icon: Circle },
        { value: 'in-progress', label: 'In progress', icon: Circle },
        { value: 'done', label: 'Done', icon: Circle }
    ];

    const priorities = [
        { value: 'none', label: 'No priority', icon: Minus },
        { value: 'urgent', label: 'Urgent', icon: CircleAlert },
        { value: 'high', label: 'High', icon: SignalHigh },
        { value: 'medium', label: 'Medium', icon: SignalMedium },
        { value: 'low', label: 'Low', icon: SignalLow }
    ];

    const assignees = [
        { value: 'an', label: 'mielsense', initials: 'AN' },
        { value: 'sk', label: 'Sam K.', initials: 'SK' },
        { value: 'unassigned', label: 'Unassigned', initials: '?' }
    ];

    const statusMeta = $derived(statuses.find((s) => s.value === status));
    const priorityMeta = $derived(priorities.find((p) => p.value === priority));
    const assigneeMeta = $derived(assignees.find((a) => a.value === assignee));
    const canCreate = $derived(issueTitle.trim().length > 0);

    function reset() {
        issueTitle = '';
        issueDescription = '';
        status = '';
        priority = '';
        assignee = '';
    }

    function createIssue() {
        if (!canCreate) {
            return;
        }
        reset();
        open = false;
    }
</script>

<div class="flex items-center justify-center">
    <Sheet.Root bind:open>
        <Sheet.Trigger>
            <HugeiconsIcon icon={SquarePen} size={16} />
            New issue
        </Sheet.Trigger>
        <Sheet.Content surface="glass" side="right">
            <Sheet.Header>
                <div class="flex items-center gap-2.5">
                    <HugeiconsIcon icon={SquarePen} size={18} class="text-foreground-muted" />
                    <Sheet.Title>New issue</Sheet.Title>
                </div>
                <Sheet.Description>Create a new issue in Engineering.</Sheet.Description>
            </Sheet.Header>

            <div class="flex flex-col gap-4">
                <Input
                    bind:value={issueTitle}
                    label="Title"
                    placeholder="Issue title"
                    description="A short, specific summary of the work."
                />

                <Textarea
                    bind:value={issueDescription}
                    label="Description"
                    placeholder="Add description…"
                    class="min-h-[120px]"
                />

                <div class="h-px w-full bg-border" role="separator"></div>

                <div class="flex flex-col gap-3">
                    <div class="flex flex-col gap-1.5">
                        <Label>Status</Label>
                        <Select.Root bind:value={status}>
                            <Select.Trigger class="w-full" variant="outline" size="md">
                                <span class="flex min-w-0 items-center gap-2">
                                    {#if statusMeta}
                                        <HugeiconsIcon
                                            icon={statusMeta.icon}
                                            size={14}
                                            class="shrink-0 text-foreground-muted"
                                        />
                                    {/if}
                                    <Select.Value placeholder="Status" />
                                </span>
                            </Select.Trigger>
                            <Select.Content>
                                {#each statuses as item (item.value)}
                                    <Select.Item value={item.value} label={item.label}>
                                        <span class="flex items-center gap-2">
                                            <HugeiconsIcon
                                                icon={item.icon}
                                                size={14}
                                                class="text-foreground-muted"
                                            />
                                            {item.label}
                                        </span>
                                    </Select.Item>
                                {/each}
                            </Select.Content>
                        </Select.Root>
                    </div>

                    <div class="flex flex-col gap-1.5">
                        <Label>Priority</Label>
                        <Select.Root bind:value={priority}>
                            <Select.Trigger class="w-full" variant="outline" size="md">
                                <span class="flex min-w-0 items-center gap-2">
                                    {#if priorityMeta}
                                        <HugeiconsIcon
                                            icon={priorityMeta.icon}
                                            size={14}
                                            class="shrink-0 text-foreground-muted"
                                        />
                                    {/if}
                                    <Select.Value placeholder="Priority" />
                                </span>
                            </Select.Trigger>
                            <Select.Content>
                                {#each priorities as item (item.value)}
                                    <Select.Item value={item.value} label={item.label}>
                                        <span class="flex items-center gap-2">
                                            <HugeiconsIcon
                                                icon={item.icon}
                                                size={14}
                                                class="text-foreground-muted"
                                            />
                                            {item.label}
                                        </span>
                                    </Select.Item>
                                {/each}
                            </Select.Content>
                        </Select.Root>
                    </div>

                    <div class="flex flex-col gap-1.5">
                        <Label>Assignee</Label>
                        <Select.Root bind:value={assignee}>
                            <Select.Trigger class="w-full" variant="outline" size="md">
                                <span class="flex min-w-0 items-center gap-2">
                                    {#if assigneeMeta}
                                        <Avatar.Root size="sm" class="size-5 shrink-0 text-[10px]">
                                            <Avatar.Fallback>
                                                {assigneeMeta.initials}
                                            </Avatar.Fallback>
                                        </Avatar.Root>
                                    {/if}
                                    <Select.Value placeholder="Assignee" />
                                </span>
                            </Select.Trigger>
                            <Select.Content>
                                {#each assignees as person (person.value)}
                                    <Select.Item value={person.value} label={person.label}>
                                        <span class="flex items-center gap-2">
                                            <Avatar.Root size="sm" class="size-5 text-[10px]">
                                                <Avatar.Fallback>{person.initials}</Avatar.Fallback>
                                            </Avatar.Root>
                                            {person.label}
                                        </span>
                                    </Select.Item>
                                {/each}
                            </Select.Content>
                        </Select.Root>
                    </div>
                </div>
            </div>

            <Sheet.Footer>
                <Sheet.Close onclick={reset}>
                    Cancel
                    <Kbd shortcut="esc" />
                </Sheet.Close>
                <Button onclick={() => createIssue()}>
                    Create issue
                    <Kbd shortcut="enter" />
                </Button>
            </Sheet.Footer>
        </Sheet.Content>
    </Sheet.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        CircleIcon as Circle,
        AlertCircleIcon as CircleAlert,
        MinusSignIcon as Minus,
        SignalHighIcon as SignalHigh,
        SignalLow01Icon as SignalLow,
        SignalMedium01Icon as SignalMedium,
        Edit01Icon as SquarePen
    } from '@hugeicons/core-free-icons';
    import * as Avatar from '@mielui/svelte/components/avatar';
    import { Button } from '@mielui/svelte/components/button';
    import { Input } from '@mielui/svelte/components/input';
    import Kbd from '@mielui/svelte/components/kbd';
    import { Label } from '@mielui/svelte/components/label';
    import * as Select from '@mielui/svelte/components/select';
    import * as Sheet from '@mielui/svelte/components/sheet';
    import { Textarea } from '@mielui/svelte/components/textarea';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(false);
    let created = $state('');
    let issueTitle = $state('');
    let issueDescription = $state('');
    let status = $state('');
    let priority = $state('');
    let assignee = $state('');

    const statuses = [
        { value: 'todo', label: 'Todo', icon: Circle },
        { value: 'in-progress', label: 'In progress', icon: Circle },
        { value: 'done', label: 'Done', icon: Circle }
    ];

    const priorities = [
        { value: 'none', label: 'No priority', icon: Minus },
        { value: 'urgent', label: 'Urgent', icon: CircleAlert },
        { value: 'high', label: 'High', icon: SignalHigh },
        { value: 'medium', label: 'Medium', icon: SignalMedium },
        { value: 'low', label: 'Low', icon: SignalLow }
    ];

    const assignees = [
        { value: 'an', label: 'mielsense', initials: 'AN' },
        { value: 'sk', label: 'Sam K.', initials: 'SK' },
        { value: 'unassigned', label: 'Unassigned', initials: '?' }
    ];

    const statusMeta = $derived(statuses.find((s) => s.value === status));
    const priorityMeta = $derived(priorities.find((p) => p.value === priority));
    const assigneeMeta = $derived(assignees.find((a) => a.value === assignee));
    const canCreate = $derived(issueTitle.trim().length > 0);

    function reset() {
        issueTitle = '';
        issueDescription = '';
        status = '';
        priority = '';
        assignee = '';
    }

    function createIssue() {
        if (!canCreate) {
            return;
        }
        created = `Created ${issueTitle.trim()} in this preview.`;
        reset();
        open = false;
    }
</script>

<div class="flex flex-col items-center gap-3">
    <div class="flex items-center justify-center">
        <Sheet.Root bind:open>
            <Sheet.Trigger>
                <HugeiconsIcon icon={SquarePen} size={16} />
                New issue
            </Sheet.Trigger>
            <Sheet.Content side="right">
                <Sheet.Header>
                    <div class="flex items-center gap-2.5">
                        <HugeiconsIcon icon={SquarePen} size={18} class="text-foreground-muted" />
                        <Sheet.Title>New issue</Sheet.Title>
                    </div>
                    <Sheet.Description>Create a new issue in Engineering.</Sheet.Description>
                </Sheet.Header>

                <div class="flex flex-col gap-4">
                    <Input
                        bind:value={issueTitle}
                        label="Title"
                        placeholder="Issue title"
                        description="A short, specific summary of the work."
                    />

                    <Textarea
                        bind:value={issueDescription}
                        label="Description"
                        placeholder="Add description…"
                        class="min-h-[120px]"
                    />

                    <div class="h-px w-full bg-border" role="separator"></div>

                    <div class="flex flex-col gap-3">
                        <div class="flex flex-col gap-1.5">
                            <Label>Status</Label>
                            <Select.Root bind:value={status}>
                                <Select.Trigger class="w-full" variant="outline" size="md">
                                    <span class="flex min-w-0 items-center gap-2">
                                        {#if statusMeta}
                                            <HugeiconsIcon
                                                icon={statusMeta.icon}
                                                size={14}
                                                class="shrink-0 text-foreground-muted"
                                            />
                                        {/if}
                                        <Select.Value placeholder="Status" />
                                    </span>
                                </Select.Trigger>
                                <Select.Content>
                                    {#each statuses as item (item.value)}
                                        <Select.Item value={item.value} label={item.label}>
                                            <span class="flex items-center gap-2">
                                                <HugeiconsIcon
                                                    icon={item.icon}
                                                    size={14}
                                                    class="text-foreground-muted"
                                                />
                                                {item.label}
                                            </span>
                                        </Select.Item>
                                    {/each}
                                </Select.Content>
                            </Select.Root>
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <Label>Priority</Label>
                            <Select.Root bind:value={priority}>
                                <Select.Trigger class="w-full" variant="outline" size="md">
                                    <span class="flex min-w-0 items-center gap-2">
                                        {#if priorityMeta}
                                            <HugeiconsIcon
                                                icon={priorityMeta.icon}
                                                size={14}
                                                class="shrink-0 text-foreground-muted"
                                            />
                                        {/if}
                                        <Select.Value placeholder="Priority" />
                                    </span>
                                </Select.Trigger>
                                <Select.Content>
                                    {#each priorities as item (item.value)}
                                        <Select.Item value={item.value} label={item.label}>
                                            <span class="flex items-center gap-2">
                                                <HugeiconsIcon
                                                    icon={item.icon}
                                                    size={14}
                                                    class="text-foreground-muted"
                                                />
                                                {item.label}
                                            </span>
                                        </Select.Item>
                                    {/each}
                                </Select.Content>
                            </Select.Root>
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <Label>Assignee</Label>
                            <Select.Root bind:value={assignee}>
                                <Select.Trigger class="w-full" variant="outline" size="md">
                                    <span class="flex min-w-0 items-center gap-2">
                                        {#if assigneeMeta}
                                            <Avatar.Root
                                                size="sm"
                                                class="size-5 shrink-0 text-[10px]"
                                            >
                                                <Avatar.Fallback>
                                                    {assigneeMeta.initials}
                                                </Avatar.Fallback>
                                            </Avatar.Root>
                                        {/if}
                                        <Select.Value placeholder="Assignee" />
                                    </span>
                                </Select.Trigger>
                                <Select.Content>
                                    {#each assignees as person (person.value)}
                                        <Select.Item value={person.value} label={person.label}>
                                            <span class="flex items-center gap-2">
                                                <Avatar.Root size="sm" class="size-5 text-[10px]">
                                                    <Avatar.Fallback>
                                                        {person.initials}
                                                    </Avatar.Fallback>
                                                </Avatar.Root>
                                                {person.label}
                                            </span>
                                        </Select.Item>
                                    {/each}
                                </Select.Content>
                            </Select.Root>
                        </div>
                    </div>
                </div>

                <Sheet.Footer>
                    <Sheet.Close onclick={reset}>
                        Cancel
                        <Kbd shortcut="esc" />
                    </Sheet.Close>
                    <Button onclick={createIssue} disabled={!canCreate}>
                        Create issue
                        <Kbd shortcut="enter" />
                    </Button>
                </Sheet.Footer>
            </Sheet.Content>
        </Sheet.Root>
    </div>

    <p role="status" class="text-sm text-foreground-muted">{created}</p>
</div>
~~~~

### Left

~~~~svelte
<script lang="ts">
    import {
        FolderKanbanIcon as FolderKanban,
        Home01Icon as Home,
        InboxIcon as Inbox,
        Menu01Icon as Menu,
        Settings01Icon as Settings
    } from '@hugeicons/core-free-icons';
    import * as Avatar from '@mielui/svelte/components/avatar';
    import { Badge } from '@mielui/svelte/components/badge';
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';
    import * as Sheet from '@mielui/svelte/components/sheet';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(false);
    let current = $state('home');

    const links = [
        { value: 'home', label: 'Home', icon: Home },
        { value: 'inbox', label: 'Inbox', icon: Inbox, count: 3 },
        { value: 'projects', label: 'Projects', icon: FolderKanban },
        { value: 'settings', label: 'Settings', icon: Settings }
    ];

    function navigate(value: string) {
        current = value;
        open = false;
    }
</script>

<Sheet.Root bind:open>
    <Sheet.Trigger variant="outline">
        <HugeiconsIcon icon={Menu} size={14} />
        Menu
    </Sheet.Trigger>
    <Sheet.Content side="left">
        <Sheet.Header>
            <Sheet.Title>Navigation</Sheet.Title>
            <Sheet.Description>Jump to a section of the app.</Sheet.Description>
        </Sheet.Header>

        <nav aria-label="App sections" class="flex flex-col gap-1">
            {#each links as link (link.value)}
                <Button
                    variant="ghost"
                    class="w-full justify-start gap-2"
                    aria-current={current === link.value ? 'page' : undefined}
                    onclick={() => navigate(link.value)}
                >
                    <HugeiconsIcon icon={link.icon} size={16} />
                    {link.label}
                    {#if link.count}
                        <Badge variant="secondary" class="ml-auto">{link.count}</Badge>
                    {/if}
                </Button>
            {/each}
        </nav>

        <div class="h-px w-full bg-border" role="separator"></div>

        <div class="flex items-center gap-3">
            <Avatar.Root size="sm">
                <Avatar.Fallback>AN</Avatar.Fallback>
            </Avatar.Root>
            <div class="flex min-w-0 flex-col">
                <span
                    class="truncate text-sm [font-weight:var(--font-weight-label,500)] text-foreground"
                >
                    mielsense
                </span>
                <span class="truncate text-xs text-foreground-muted">mielsense@mielui.ui</span>
            </div>
        </div>

        <Sheet.Footer>
            <Sheet.Close class="w-full" variant="outline">
                Close
                <Kbd shortcut="esc" />
            </Sheet.Close>
        </Sheet.Footer>
    </Sheet.Content>
</Sheet.Root>
~~~~

### Right

~~~~svelte
<script lang="ts">
    import { SlidersHorizontalIcon as SlidersHorizontal } from '@hugeicons/core-free-icons';
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Badge } from '@mielui/svelte/components/badge';
    import { Button } from '@mielui/svelte/components/button';
    import { Checkbox } from '@mielui/svelte/components/checkbox';
    import Kbd from '@mielui/svelte/components/kbd';
    import { Label } from '@mielui/svelte/components/label';
    import * as Select from '@mielui/svelte/components/select';
    import * as Sheet from '@mielui/svelte/components/sheet';
    import { Switch } from '@mielui/svelte/components/switch';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let open = $state(false);
    let status = $state('all');
    let onlyMine = $state(false);
    let includeArchived = $state(false);
    let hasAssignee = $state(true);
    let hasLabels = $state(true);

    const statuses = [
        { value: 'all', label: 'All statuses' },
        { value: 'open', label: 'Open' },
        { value: 'closed', label: 'Closed' }
    ];

    const statusLabel = $derived(statuses.find((s) => s.value === status)?.label ?? 'Status');
    const activeCount = $derived(
        (status !== 'all' ? 1 : 0) +
            (onlyMine ? 1 : 0) +
            (includeArchived ? 1 : 0) +
            (!hasAssignee ? 1 : 0) +
            (!hasLabels ? 1 : 0)
    );

    function reset() {
        status = 'all';
        onlyMine = false;
        includeArchived = false;
        hasAssignee = true;
        hasLabels = true;
    }

    function apply() {
        open = false;
    }
</script>

<Sheet.Root bind:open>
    <Sheet.Trigger variant="outline">
        <HugeiconsIcon icon={SlidersHorizontal} size={14} />
        Filters
        {#if activeCount > 0}
            <Badge variant="secondary">
                <span use:numberShuffle={{ value: activeCount }}>{activeCount}</span>
            </Badge>
        {/if}
    </Sheet.Trigger>
    <Sheet.Content side="right">
        <Sheet.Header>
            <Sheet.Title>Filters</Sheet.Title>
            <Sheet.Description>Narrow the issue list.</Sheet.Description>
        </Sheet.Header>

        <div class="flex flex-col gap-4">
            <div class="flex flex-col gap-1.5">
                <Label>Status</Label>
                <Select.Root bind:value={status}>
                    <Select.Trigger class="w-full" variant="outline" size="md">
                        {statusLabel}
                    </Select.Trigger>
                    <Select.Content>
                        {#each statuses as item (item.value)}
                            <Select.Item value={item.value}>{item.label}</Select.Item>
                        {/each}
                    </Select.Content>
                </Select.Root>
            </div>

            <div class="h-px w-full bg-border" role="separator"></div>

            <div class="flex flex-col gap-3">
                <Switch bind:switched={onlyMine} label="Only my issues" />
                <Switch bind:switched={includeArchived} label="Include archived" />
            </div>

            <div class="h-px w-full bg-border" role="separator"></div>

            <fieldset class="flex flex-col gap-3">
                <legend
                    class="pb-3 text-sm [font-weight:var(--font-weight-label,500)] text-foreground"
                >
                    Fields
                </legend>
                <Checkbox bind:checked={hasAssignee} label="Has assignee" />
                <Checkbox bind:checked={hasLabels} label="Has labels" />
            </fieldset>
        </div>

        <Sheet.Footer>
            <Sheet.Close variant="ghost" onclick={reset}>
                Reset
                <Kbd shortcut="esc" />
            </Sheet.Close>
            <Button onclick={() => apply()}>
                Apply filters
                {#if activeCount > 0}
                    <Badge variant="secondary">
                        <span use:numberShuffle={{ value: activeCount }}>{activeCount}</span>
                    </Badge>
                {/if}
                <Kbd shortcut="enter" />
            </Button>
        </Sheet.Footer>
    </Sheet.Content>
</Sheet.Root>
~~~~

For the rendered reference, visit [/docs/components/sheet](/docs/components/sheet).


---

Source: http://sveltekit-prerender/docs/components/skeleton.md

# Skeleton

Static loading placeholder and a delayed, minimum-visible swap into real content.

- Package: `@mielui/svelte`
- Component version: `2.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add skeleton
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Skeleton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "default" \| "shimmer" \| undefined | 'default' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| w | number \| undefined | — | No | No |
| h | number \| undefined | — | No | No |
| unit | "em" \| "in" \| "px" \| "rem" \| "%" \| "vh" \| "vw" \| "vmin" \| "vmax" \| "ch" \| "ex" \| "cm" \| "mm" \| "pt" \| "pc" \| undefined | 'px' | No | No |



### SkeletonSwap

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| ready | boolean | — | Yes | No |
| children | Snippet<[]> \| undefined | — | No | No |
| skeleton | Snippet<[]> \| undefined | — | No | No |
| lines | number \| undefined | 3 | No | No |
| lineHeight | number \| undefined | 21 | No | No |
| barHeight | number \| undefined | 9 | No | No |
| reserve | number \| undefined | — | No | No |
| delay | number \| undefined | 120 | No | No |
| minVisible | number \| undefined | 380 | No | No |
| label | string \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Skeleton from './skeleton.svelte';
import SkeletonSwap from './skeleton-swap.svelte';

export type SkeletonProps = {
    variant?: 'default' | 'shimmer';
    children?: Snippet;
    class?: string;
    w?: number;
    h?: number;
    unit?:
        | 'px'
        | 'rem'
        | 'em'
        | '%'
        | 'vh'
        | 'vw'
        | 'vmin'
        | 'vmax'
        | 'ch'
        | 'ex'
        | 'cm'
        | 'mm'
        | 'in'
        | 'pt'
        | 'pc';
};

export type SkeletonSwapProps = {
    ready: boolean;
    children?: Snippet;
    skeleton?: Snippet;
    lines?: number;
    lineHeight?: number;
    barHeight?: number;
    reserve?: number;
    delay?: number;
    minVisible?: number;
    label?: string;
    class?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export { Skeleton, SkeletonSwap };
~~~~

## Examples

### Card

~~~~svelte
<script lang="ts">
    import { Skeleton } from '@mielui/svelte/components/skeleton';
</script>

<div class="flex flex-col gap-3">
    <Skeleton w={280} h={160} />
    <Skeleton w={200} h={20} />
    <Skeleton w={150} h={16} />
</div>
~~~~

### Circle

~~~~svelte
<script lang="ts">
    import { Skeleton } from '@mielui/svelte/components/skeleton';
</script>

<Skeleton w={100} h={100} class="rounded-full" />
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { SkeletonSwap } from '@mielui/svelte/components/skeleton';
    import { onDestroy } from 'svelte';

    let ready = $state(true);
    let timer: ReturnType<typeof setTimeout> | undefined;
    function reload() {
        clearTimeout(timer);
        ready = false;
        timer = setTimeout(() => {
            ready = true;
        }, 1200);
    }
    onDestroy(() => {
        clearTimeout(timer);
    });
</script>

<div class="flex w-full max-w-sm flex-col gap-4">
    <SkeletonSwap {ready} lines={3} lineHeight={24} label="Workspace summary">
        {#if ready}
            <p class="text-sm leading-6 text-foreground-muted">
                Your workspace has 12 active projects. Three are ready for review, and the next team
                check-in is on Friday.
            </p>
        {/if}
    </SkeletonSwap>
    <Button variant="secondary" onclick={reload} disabled={!ready}>Reload summary</Button>
</div>
~~~~

### Rectangle

~~~~svelte
<script lang="ts">
    import { Skeleton } from '@mielui/svelte/components/skeleton';
</script>

<Skeleton w={280} h={160} />
~~~~

### Shimmer

~~~~svelte
<script lang="ts">
    import { Skeleton } from '@mielui/svelte/components/skeleton';
</script>

<div class="w-64 space-y-3" role="status" aria-label="Loading profile">
    <Skeleton variant="shimmer" class="size-12 rounded-full" />
    <Skeleton variant="shimmer" class="h-4 w-full" />
    <Skeleton variant="shimmer" class="h-4 w-2/3" />
    <span class="sr-only">Loading profile…</span>
</div>
~~~~

For the rendered reference, visit [/docs/components/skeleton](/docs/components/skeleton).


---

Source: http://sveltekit-prerender/docs/components/slider.md

# Slider

Single-value and two-handle range slider with pill handles, keyboard controls, and RTL support.

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add slider
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Slider

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| min | number \| undefined | 0 | No | No |
| max | number \| undefined | 100 | No | No |
| step | number \| undefined | 1 | No | No |
| disabled | boolean \| undefined | false | No | No |
| label | string \| undefined | — | No | No |
| dir | "ltr" \| "rtl" \| undefined | — | No | No |
| id | string \| undefined | generatedId | No | No |
| name | string \| undefined | — | No | No |
| form | string \| undefined | — | No | No |
| element | HTMLDivElement \| undefined | — | No | Yes |
| aria-label | string \| undefined | — | No | No |
| aria-labelledby | string \| undefined | — | No | No |
| aria-describedby | string \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| range | false \| undefined \| true | — | No | No |
| value | number \| undefined \| [number, number] \| undefined | — | No | Yes |
| thumbLabels | undefined \| [string, string] \| undefined | — | No | No |
| onValueChange | ((value: number) => void) \| undefined \| ((value: [number, number]) => void) \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import Slider from './slider.svelte';

type SliderBaseProps = {
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
    label?: string;
    dir?: 'ltr' | 'rtl';
    id?: string;
    name?: string;
    form?: string;
    element?: HTMLDivElement;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
} & DefaultProps;

export type SliderProps = SliderBaseProps &
    (
        | {
              range?: false;
              value?: number;
              thumbLabels?: never;
              onValueChange?: (value: number) => void;
          }
        | {
              range: true;
              value?: [number, number];
              thumbLabels?: [string, string];
              onValueChange?: (value: [number, number]) => void;
          }
    );

export { Slider };
export default Slider;
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import { Slider } from '@mielui/svelte/components/slider';
</script>

<div class="w-full max-w-sm">
    <Slider value={50} label="Slider" />
</div>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import { Slider } from '@mielui/svelte/components/slider';
</script>

<div class="w-full max-w-sm">
    <Slider value={50} disabled label="Disabled" />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Slider } from '@mielui/svelte/components/slider';

    let volume = $state(64);
</script>

<div class="flex w-full max-w-sm flex-col gap-2">
    <div class="flex items-center justify-between text-[0.78rem]">
        <span class="text-foreground-muted">Volume</span>
        <span class="font-mono text-foreground">
            <span use:numberShuffle={{ value: volume }}>{volume}</span>
        </span>
    </div>
    <Slider bind:value={volume} label="Volume" />
</div>
~~~~

### Range

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Slider } from '@mielui/svelte/components/slider';

    let price = $state<[number, number]>([200, 750]);
</script>

<div class="flex w-full max-w-sm flex-col gap-2">
    <div class="flex items-center justify-between text-sm">
        <span class="text-foreground-muted">Price range</span>
        <span class="tabular-nums">
            $<span use:numberShuffle={{ value: price[0] }}>{price[0]}</span> to $<span
                use:numberShuffle={{ value: price[1] }}
            >
                {price[1]}
            </span>
        </span>
    </div>
    <Slider
        range
        bind:value={price}
        min={0}
        max={1000}
        step={10}
        thumbLabels={['Minimum price', 'Maximum price']}
    />
</div>
~~~~

### Rtl

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Slider } from '@mielui/svelte/components/slider';

    let selection = $state<[number, number]>([25, 70]);
</script>

<div class="flex w-full max-w-sm flex-col gap-2">
    <div class="flex items-center justify-between text-sm">
        <span class="text-foreground-muted">Right-to-left range</span>
        <span class="tabular-nums">
            <span use:numberShuffle={{ value: selection[0] }}>{selection[0]}</span> to<span
                use:numberShuffle={{ value: selection[1] }}
            >
                {selection[1]}
            </span>
        </span>
    </div>
    <Slider range dir="rtl" bind:value={selection} thumbLabels={['Range start', 'Range end']} />
</div>
~~~~

### Stepped

~~~~svelte
<script lang="ts">
    import { Slider } from '@mielui/svelte/components/slider';
</script>

<div class="w-full max-w-sm">
    <Slider value={50} step={10} min={0} max={100} label="By tens" />
</div>
~~~~

For the rendered reference, visit [/docs/components/slider](/docs/components/slider).


---

Source: http://sveltekit-prerender/docs/components/spinner.md

# Spinner

An animated loading indicator that can resolve to a checkmark.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/motion-loop, hugeicons-icon, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add spinner
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Spinner

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| size | number \| undefined | 16 | No | No |
| ready | boolean \| undefined | false | No | No |
| speed | number \| undefined | 1 | No | No |
| curved | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |
| aria-label | string \| undefined | — | No | No |
| aria-hidden | boolean \| "true" \| "false" \| undefined | — | No | No |



### Public types

~~~~ts
import Spinner from './spinner.svelte';

export type SpinnerProps = {
    size?: number;
    ready?: boolean;
    speed?: number;
    curved?: boolean;
    class?: string;
    'aria-label'?: string;
    'aria-hidden'?: boolean | 'true' | 'false';
};

export { Spinner };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { Spinner } from '@mielui/svelte/components/spinner';
</script>

<div class="flex items-center gap-3 text-sm text-foreground-muted">
    <Spinner aria-hidden="true" />
    <span>Checking for updates</span>
</div>
~~~~

### Pace

~~~~svelte
<script lang="ts">
    import { Spinner } from '@mielui/svelte/components/spinner';
</script>

<div class="flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-foreground-muted">
    <span class="flex items-center gap-2">
        <Spinner aria-hidden="true" />
        <span>Default</span>
    </span>
    <span class="flex items-center gap-2">
        <Spinner speed={2} aria-hidden="true" />
        <span>Speed 2</span>
    </span>
    <span class="flex items-center gap-2">
        <Spinner curved aria-hidden="true" />
        <span>Curved</span>
    </span>
</div>
~~~~

### Ready State

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Spinner } from '@mielui/svelte/components/spinner';
    import { onDestroy, onMount } from 'svelte';

    let ready = $state(false);
    let timer: ReturnType<typeof setTimeout> | undefined;

    function save() {
        clearTimeout(timer);
        ready = false;
        timer = setTimeout(() => {
            ready = true;
        }, 900);
    }

    onMount(save);
    onDestroy(() => clearTimeout(timer));
</script>

<div
    class="flex w-full max-w-sm items-center justify-between gap-4 rounded-[var(--radius-md)] border border-border bg-card px-3 py-2"
>
    <div class="flex items-center gap-2 text-sm text-foreground-muted">
        <Spinner {ready} aria-hidden="true" />
        <span>{ready ? 'Changes saved' : 'Saving changes'}</span>
    </div>
    <Button size="md" onclick={save} disabled={!ready}>Save again</Button>
</div>
~~~~

For the rendered reference, visit [/docs/components/spinner](/docs/components/spinner).


---

Source: http://sveltekit-prerender/docs/components/switch.md

# Switch

Toggle switch with role="switch", bindable switched state, optional label and description.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/field-metadata, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add switch
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Switch

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| checked | boolean \| undefined | undefined | No | Yes |
| switched | boolean \| undefined | undefined | No | Yes |
| label | string \| undefined | — | No | No |
| description | string \| undefined | — | No | No |
| element | HTMLButtonElement \| undefined | — | No | Yes |
| onclick | (MouseEventHandler<HTMLButtonElement> & ((e: MouseEvent) => void)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { HTMLButtonAttributes } from 'svelte/elements';
import Switch from './switch.svelte';

export type SwitchState = {
    switched: boolean;
};

export type SwitchProps = {
    checked?: boolean;
    switched?: boolean;
    label?: string;
    description?: string;
    element?: HTMLButtonElement | undefined;
} & Partial<HTMLButtonAttributes>;

export default Switch;
export { Switch };
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';
</script>

<Switch label="Notifications" />
~~~~

### Description

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';
</script>

<Switch label="Auto-save" description="Automatically save changes as you work." />
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';
</script>

<Switch disabled label="Unavailable" />
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';

    let enabled = $state(true);
</script>

<Switch bind:switched={enabled} label="Push notifications" />
~~~~

For the rendered reference, visit [/docs/components/switch](/docs/components/switch).


---

Source: http://sveltekit-prerender/docs/components/table.md

# Table

Semantic tables with headers, footers, captions, scrolling, and an inset variant.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/inset-layout, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add table
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "inset" \| "default" \| undefined | 'default' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Body

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Caption

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Head

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Row

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### ScrollArea

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
export { default as Root } from './table.svelte';
export { default as Body } from './table-body.svelte';
export { default as Caption } from './table-caption.svelte';
export { default as Cell } from './table-cell.svelte';
export { default as Footer } from './table-footer.svelte';
export { default as Head } from './table-head.svelte';
export { default as Header } from './table-header.svelte';
export { default as Row } from './table-row.svelte';
export { default as ScrollArea } from './table-scroll-area.svelte';
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { Badge } from '@mielui/svelte/components/badge';
    import * as Table from '@mielui/svelte/components/table';

    let { variant = 'default' }: { variant?: 'default' | 'inset' } = $props();
    const invoices = [
        { id: 'INV-001', status: 'Paid', method: 'Card', amount: '$250.00' },
        { id: 'INV-002', status: 'Pending', method: 'Bank transfer', amount: '$150.00' },
        { id: 'INV-003', status: 'Paid', method: 'Card', amount: '$350.00' }
    ];
</script>

<Table.ScrollArea class="max-w-2xl" tabindex={0} aria-label="Invoices">
    <Table.Root {variant} class="min-w-[30rem]">
        <Table.Caption>Invoices for September.</Table.Caption>
        <Table.Header>
            <Table.Row>
                <Table.Head>Invoice</Table.Head>
                <Table.Head>Status</Table.Head>
                <Table.Head>Method</Table.Head>
                <Table.Head class="text-end">Amount</Table.Head>
            </Table.Row>
        </Table.Header>
        <Table.Body>
            {#each invoices as invoice (invoice.id)}
                <Table.Row>
                    <Table.Head
                        {...{ scope: 'row' as const }}
                        class="border-0 font-medium text-foreground"
                    >
                        {invoice.id}
                    </Table.Head>
                    <Table.Cell>
                        <Badge
                            class="w-fit"
                            variant={invoice.status === 'Paid' ? 'success' : 'warning'}
                        >
                            {invoice.status}
                        </Badge>
                    </Table.Cell>
                    <Table.Cell>{invoice.method}</Table.Cell>
                    <Table.Cell class="text-end tabular-nums">{invoice.amount}</Table.Cell>
                </Table.Row>
            {/each}
        </Table.Body>
        <Table.Footer>
            <Table.Row>
                <Table.Cell colspan={3}>Total</Table.Cell>
                <Table.Cell class="text-end tabular-nums">$750.00</Table.Cell>
            </Table.Row>
        </Table.Footer>
    </Table.Root>
</Table.ScrollArea>
~~~~

### Inset

~~~~svelte
<script lang="ts">
    import Invoices from './hero.svelte';
</script>

<Invoices variant="inset" />
~~~~

### Interactive

~~~~svelte
<script lang="ts">
    import { ArrowUpDownIcon as SortIcon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import { Checkbox } from '@mielui/svelte/components/checkbox';
    import * as Table from '@mielui/svelte/components/table';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const projects = ['Website', 'Dashboard', 'Mobile app'];
    let ascending = $state(true);
    let selected = $state<string[]>([]);
    let empty = $state(false);
    const rows = $derived(
        empty
            ? []
            : [...projects].sort((left, right) =>
                  ascending ? left.localeCompare(right) : right.localeCompare(left)
              )
    );
    function selectAll(checked: boolean) {
        selected = checked ? rows : [];
    }

    function toggleSort() {
        ascending = !ascending;
    }

    function toggleEmpty() {
        empty = !empty;
        selected = [];
    }

    function select(name: string, checked: boolean) {
        selected = checked
            ? [...new Set([...selected, name])]
            : selected.filter((value) => value !== name);
    }
</script>

<div class="flex w-full max-w-xl flex-col gap-3">
    <Table.ScrollArea tabindex={0} aria-label="Projects">
        <Table.Root>
            <Table.Header>
                <Table.Row>
                    <Table.Head class="w-12">
                        <Checkbox
                            aria-label="Select all projects"
                            checked={rows.length > 0 && rows.every((row) => selected.includes(row))}
                            onCheckedChange={selectAll}
                        />
                    </Table.Head>
                    <Table.Head aria-sort={ascending ? 'ascending' : 'descending'}>
                        <Button variant="ghost" size="sm" class="-ms-2" onclick={toggleSort}>
                            Project<HugeiconsIcon icon={SortIcon} size={14} />
                        </Button>
                    </Table.Head>
                </Table.Row>
            </Table.Header>
            <Table.Body>
                {#each rows as name (name)}
                    <Table.Row data-state={selected.includes(name) ? 'selected' : undefined}>
                        <Table.Cell>
                            <Checkbox
                                aria-label={`Select ${name}`}
                                checked={selected.includes(name)}
                                onCheckedChange={(checked) => select(name, checked)}
                            />
                        </Table.Cell>
                        <Table.Cell>{name}</Table.Cell>
                    </Table.Row>
                {:else}
                    <Table.Row>
                        <Table.Cell colspan={2} class="h-24 text-center text-foreground-muted">
                            No projects found.
                        </Table.Cell>
                    </Table.Row>
                {/each}
            </Table.Body>
        </Table.Root>
    </Table.ScrollArea>
    <div class="flex items-center justify-between gap-3">
        <p role="status" class="text-sm text-foreground-muted">{selected.length} selected</p>
        <Button variant="outline" size="sm" onclick={toggleEmpty}>
            {empty ? 'Restore rows' : 'Show empty state'}
        </Button>
    </div>
</div>
~~~~

### Usage

~~~~svelte
<script lang="ts">
    import * as Table from '@mielui/svelte/components/table';
</script>

<Table.ScrollArea tabindex={0} aria-label="Invoices">
    <Table.Root variant="inset">
        <Table.Caption>September invoices</Table.Caption>
        <Table.Header>
            <Table.Row>
                <Table.Head>Invoice</Table.Head>
                <Table.Head>Amount</Table.Head>
            </Table.Row>
        </Table.Header>
        <Table.Body>
            <Table.Row>
                <Table.Cell>INV-001</Table.Cell>
                <Table.Cell>$250.00</Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table.Root>
</Table.ScrollArea>
~~~~

For the rendered reference, visit [/docs/components/table](/docs/components/table).


---

Source: http://sveltekit-prerender/docs/components/tabs.md

# Tabs

Horizontal or vertical tabbed interface with List, Trigger, and Content subparts. Supports three visual variants and a bindable active value.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn, utils.pressable

## Install

~~~~sh
pnpm dlx @mielui/svelte add tabs
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| forceMount | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### List

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| activationMode | "manual" \| "automatic" \| undefined | 'automatic' | No | No |
| value | string \| undefined | '' | No | Yes |
| onValueChange | ((value: string) => void) \| undefined | — | No | No |
| orientation | "horizontal" \| "vertical" \| undefined | 'horizontal' | No | No |
| variant | TabsVariant \| undefined | 'default' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| disabled | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import Root from './tabs.svelte';
import Content from './tabs-content.svelte';
import List from './tabs-list.svelte';
import Trigger from './tabs-trigger.svelte';

export type TabsVariant = 'default' | 'ghost' | 'segmented';

export type TabsState = {
    id: string;
    value: string;
    orientation: 'horizontal' | 'vertical';
    variant: TabsVariant;
};

export type TabsProps = {
    activationMode?: 'automatic' | 'manual';
    value?: string;
    onValueChange?: (value: string) => void;
    orientation?: 'horizontal' | 'vertical';
    variant?: TabsVariant;
} & DefaultProps;

export type TabsListProps = DefaultProps;

export type TabsTriggerProps = {
    value: string;
    disabled?: boolean;
} & DefaultProps;

export type TabsContentProps = {
    value: string;
    forceMount?: boolean;
} & DefaultProps;

export { Content, List, Root, Trigger };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Tabs from '@mielui/svelte/components/tabs';

    let activeTab = $state('overview');
</script>

<div class="flex justify-center p-3 sm:p-6">
    <div class="w-full max-w-sm">
        <Tabs.Root bind:value={activeTab}>
            <Tabs.List class="grid w-full grid-cols-3">
                <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
                <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
                <Tabs.Trigger value="files">Files</Tabs.Trigger>
            </Tabs.List>

            <Tabs.Content value="overview" class="pt-4">
                <div class="rounded-lg border border-border bg-card p-4">
                    <p class="text-sm font-medium text-foreground">Project overview</p>
                    <p class="mt-1 text-sm text-foreground-muted">Everything is up to date.</p>
                </div>
            </Tabs.Content>

            <Tabs.Content value="activity" class="pt-4">
                <div class="rounded-lg border border-border bg-card p-4">
                    <p class="text-sm font-medium text-foreground">Recent activity</p>
                    <p class="mt-1 text-sm text-foreground-muted">
                        You updated the project settings.
                    </p>
                </div>
            </Tabs.Content>

            <Tabs.Content value="files" class="pt-4">
                <div class="rounded-lg border border-border bg-card p-4">
                    <p class="text-sm font-medium text-foreground">Files</p>
                    <p class="mt-1 text-sm text-foreground-muted">README.md and package.json</p>
                </div>
            </Tabs.Content>
        </Tabs.Root>
    </div>
</div>
~~~~

### Manual

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let tab = $state('draft');
</script>

<div class="w-full max-w-sm">
    <Tabs.Root bind:value={tab} activationMode="manual">
        <div role="group" aria-label="Draft settings">
            <Tabs.List>
                <Tabs.Trigger value="draft">Draft</Tabs.Trigger>
                <Tabs.Trigger value="preview">Preview</Tabs.Trigger>
                <Tabs.Trigger value="history" disabled>History</Tabs.Trigger>
            </Tabs.List>
        </div>
        <Tabs.Content value="draft" forceMount class="pt-4">
            <Input label="Draft title" placeholder="Type here, then switch tabs" />
        </Tabs.Content>
        <Tabs.Content value="preview" class="pt-4">
            <p class="text-sm text-foreground-muted">
                Return to Draft to see the input still holds your text.
            </p>
        </Tabs.Content>
    </Tabs.Root>
</div>
~~~~

### Variant Default

~~~~svelte
<script lang="ts">
    import * as Tabs from '@mielui/svelte/components/tabs';

    let tab = $state('overview');
</script>

<Tabs.Root bind:value={tab}>
    <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
        <Tabs.Trigger value="files">Files</Tabs.Trigger>
    </Tabs.List>
</Tabs.Root>
~~~~

### Variant Ghost

~~~~svelte
<script lang="ts">
    import * as Tabs from '@mielui/svelte/components/tabs';

    let tab = $state('overview');
</script>

<Tabs.Root bind:value={tab} variant="ghost">
    <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
        <Tabs.Trigger value="files">Files</Tabs.Trigger>
    </Tabs.List>
</Tabs.Root>
~~~~

### Variant Segmented

~~~~svelte
<script lang="ts">
    import * as Tabs from '@mielui/svelte/components/tabs';

    let tab = $state('vanilla');
</script>

<Tabs.Root bind:value={tab} variant="segmented">
    <Tabs.List>
        <Tabs.Trigger value="vanilla">Vanilla</Tabs.Trigger>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
        <Tabs.Trigger value="svelte">Svelte</Tabs.Trigger>
    </Tabs.List>
</Tabs.Root>
~~~~

### Vertical

~~~~svelte
<script lang="ts">
    import * as Tabs from '@mielui/svelte/components/tabs';

    let tab = $state('account');
</script>

<div class="w-full max-w-lg p-2 sm:p-4">
    <Tabs.Root bind:value={tab} orientation="vertical" variant="ghost">
        <Tabs.List class="min-w-28">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
            <Tabs.Trigger value="appearance">Appearance</Tabs.Trigger>
        </Tabs.List>

        <Tabs.Content value="account" class="rounded-lg bg-secondary/35 p-4">
            <p class="text-sm font-medium text-foreground">Account</p>
            <p class="mt-1 text-sm leading-relaxed text-foreground-muted">
                Manage your profile and contact details.
            </p>
        </Tabs.Content>

        <Tabs.Content value="notifications" class="rounded-lg bg-secondary/35 p-4">
            <p class="text-sm font-medium text-foreground">Notifications</p>
            <p class="mt-1 text-sm leading-relaxed text-foreground-muted">
                Choose which updates you want to receive.
            </p>
        </Tabs.Content>

        <Tabs.Content value="appearance" class="rounded-lg bg-secondary/35 p-4">
            <p class="text-sm font-medium text-foreground">Appearance</p>
            <p class="mt-1 text-sm leading-relaxed text-foreground-muted">
                Adjust the theme and interface density.
            </p>
        </Tabs.Content>
    </Tabs.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/tabs](/docs/components/tabs).


---

Source: http://sveltekit-prerender/docs/components/tag-input.md

# Tag Input

Tokenized tag entry field with keyboard, paste, and validation support. Compound: Root / List / Tag / Input.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button, badge
- Shared utilities: components/_internal/button-attributes, components/_internal/field-metadata, hugeicons-icon, utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add tag-input
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| placeholder | string \| undefined | 'Add a tag…' | No | No |
| element | HTMLInputElement \| undefined | undefined | No | Yes |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### List

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Tags' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| tags | string[] \| undefined | [] | No | Yes |
| query | string \| undefined | '' | No | Yes |
| max | number \| undefined | — | No | No |
| allowDuplicates | boolean \| undefined | false | No | No |
| disabled | boolean \| undefined | false | No | No |
| label | string \| undefined | — | No | No |
| description | string \| undefined | — | No | No |
| error | string \| undefined | — | No | No |
| name | string \| undefined | — | No | No |
| required | boolean \| undefined | false | No | No |
| requiredMessage | string \| undefined | 'Add at least one tag.' | No | No |
| variant | TagInputVariant \| undefined | 'outline' | No | No |
| validate | ((tag: string) => string \| boolean) \| undefined | — | No | No |
| normalize | ((tag: string) => string) \| undefined | — | No | No |
| delimiters | string[] \| undefined | [','] | No | No |
| addOnBlur | boolean \| undefined | true | No | No |
| addOnPaste | boolean \| undefined | true | No | No |
| onTagsChange | ((tags: string[]) => void) \| undefined | — | No | No |
| onAdd | ((tag: string) => void) \| undefined | — | No | No |
| onRemove | ((tag: string) => void) \| undefined | — | No | No |
| onReject | ((rejection: TagInputRejection) => void) \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Tag

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| index | number \| undefined | — | No | No |
| removable | boolean \| undefined | true | No | No |
| onRemove | ((tag: string) => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
import Root from './tag-input.svelte';
import Input from './tag-input-input.svelte';
import List from './tag-input-list.svelte';
import Tag from './tag-input-tag.svelte';

export type TagInputRejectionCode = 'duplicate' | 'invalid' | 'max-tags';

export type TagInputRejection = {
    value: string;
    code: TagInputRejectionCode;
    reason: string;
};

export type TagInputVariant = 'outline' | 'secondary';

export type TagInputProps = {
    tags?: string[];
    query?: string;
    max?: number;
    allowDuplicates?: boolean;
    disabled?: boolean;
    label?: string;
    description?: string;
    error?: string;
    name?: string;
    /**
     * Requires at least one tag for native form submission. Carried by a
     * dedicated validation anchor, since hidden inputs are barred from
     * constraint validation.
     */
    required?: boolean;
    /** Validation message shown when `required` is set and no tags are added. */
    requiredMessage?: string;
    variant?: TagInputVariant;
    validate?: (tag: string) => boolean | string;
    normalize?: (tag: string) => string;
    delimiters?: string[];
    addOnBlur?: boolean;
    addOnPaste?: boolean;
    onTagsChange?: (tags: string[]) => void;
    onAdd?: (tag: string) => void;
    onRemove?: (tag: string) => void;
    onReject?: (rejection: TagInputRejection) => void;
    id?: string;
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'id'>;

export type TagInputListProps = {
    label?: string;
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLUListElement>, 'children' | 'class'>;

export type TagInputTagProps = {
    value: string;
    index?: number;
    removable?: boolean;
    onRemove?: (tag: string) => void;
    class?: string;
    children?: Snippet;
} & Omit<HTMLButtonAttributes, 'children' | 'class' | 'type' | 'value' | 'onclick'>;

export type TagInputInputProps = {
    placeholder?: string;
    element?: HTMLInputElement | undefined;
    class?: string;
} & Omit<HTMLInputAttributes, 'children' | 'class' | 'value'>;

export { Input, List, Root, Tag };
~~~~

## Examples

### Controlled

~~~~svelte
<script lang="ts">
    import * as TagInput from '@mielui/svelte/components/tag-input';

    let tags = $state(['announcements']);
    let events = $state<string[]>([]);

    function log(message: string) {
        events = [message, ...events].slice(0, 4);
    }
</script>

<div class="w-full max-w-md space-y-3">
    <TagInput.Root
        bind:tags
        label="Channels"
        description="Every change reports through callbacks."
        onAdd={(tag) => {
            log(`Added ${tag}`);
        }}
        onRemove={(tag) => {
            log(`Removed ${tag}`);
        }}
    >
        <TagInput.List />
        <TagInput.Input placeholder="Add a channel…" />
    </TagInput.Root>

    <ul aria-live="polite" class="space-y-1 text-sm text-foreground-muted">
        {#each events as event, index (index)}
            <li>{event}</li>
        {/each}
    </ul>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import * as TagInput from '@mielui/svelte/components/tag-input';

    let tags = $state(['svelte', 'design-system']);
    let saved = $state<string[]>([]);
    let message = $state('');
    function save() {
        saved = [...tags];
        message = saved.length ? `Saved topics: ${saved.join(', ')}.` : 'Saved without topics.';
    }
</script>

<div class="w-full max-w-md space-y-4">
    <TagInput.Root bind:tags label="Topics" description="Type a topic and press Enter.">
        <TagInput.List />
        <TagInput.Input placeholder="Add a topic…" />
    </TagInput.Root>

    <div class="flex items-center justify-between gap-3">
        <p class="text-sm text-foreground-muted">
            <span use:numberShuffle={{ value: tags.length }}>{tags.length}</span> topics
        </p>
        <div class="flex gap-2">
            <Button
                variant="ghost"
                size="md"
                onclick={() => {
                    tags = [];
                }}
            >
                Clear
            </Button>
            <Button size="md" onclick={save}>Save</Button>
        </div>
    </div>
    <p role="status" class="text-sm text-foreground-muted">{message}</p>
</div>
~~~~

### Max Tags

~~~~svelte
<script lang="ts">
    import * as TagInput from '@mielui/svelte/components/tag-input';

    let tags = $state(['svelte', 'mielui']);
    let notice = $state('');
</script>

<div class="w-full max-w-md space-y-2">
    <TagInput.Root
        bind:tags
        max={5}
        label="Labels"
        description="Up to 5 labels."
        onAdd={() => {
            notice = '';
        }}
        onRemove={() => {
            notice = '';
        }}
        onReject={(rejection) => {
            notice = rejection.reason;
        }}
    >
        <TagInput.List />
        <TagInput.Input placeholder="Add a label…" />
    </TagInput.Root>

    {#if notice}
        <p class="text-sm text-foreground-muted">{notice}</p>
    {/if}
</div>
~~~~

### Validation

~~~~svelte
<script lang="ts">
    import * as TagInput from '@mielui/svelte/components/tag-input';

    let tags = $state<string[]>([]);
    let error = $state('');

    function validate(tag: string) {
        if (tag !== tag.toLowerCase()) {
            return 'Use lowercase letters.';
        }

        if (tag.includes(' ')) {
            return 'Use hyphens instead of spaces.';
        }

        return tag.length >= 2 || 'Tags need at least 2 characters.';
    }
</script>

<div class="w-full max-w-md">
    <TagInput.Root
        bind:tags
        {validate}
        {error}
        label="Slugs"
        description={'Use lowercase slugs without spaces. Try "Release Notes".'}
        onAdd={() => {
            error = '';
        }}
        onReject={(rejection) => {
            error = rejection.reason;
        }}
    >
        <TagInput.List />
        <TagInput.Input placeholder="e.g. release-notes" />
    </TagInput.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/tag-input](/docs/components/tag-input).


---

Source: http://sveltekit-prerender/docs/components/textarea.md

# Textarea

Multi-line text input wrapping native <textarea>. Shares variants with input.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, input
- Shared utilities: components/_internal/field-metadata, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add textarea
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Textarea

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| placeholder | string \| undefined | — | No | No |
| label | string \| undefined | — | No | No |
| description | string \| undefined | — | No | No |
| variant | "secondary" \| "outline" \| undefined | 'outline' | No | No |
| autoresize | boolean \| undefined | false | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLTextAreaElement \| undefined | — | No | Yes |
| value | ((string \| number) & (string \| number \| string[])) \| null \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLTextareaAttributes } from 'svelte/elements';
import Textarea from './textarea.svelte';

export type TextareaProps = {
    placeholder?: string;
    label?: string;
    description?: string;
    variant?: 'outline' | 'secondary';
    autoresize?: boolean;
    class?: string;
    children?: Snippet;
    element?: HTMLTextAreaElement | undefined;
    value?: string | number | null | undefined;
} & HTMLTextareaAttributes;

export { Textarea };
export default Textarea;
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import { Textarea } from '@mielui/svelte/components/textarea';
</script>

<div class="w-full max-w-sm">
    <Textarea label="Message" placeholder="Enter your message..." />
</div>
~~~~

### Composer

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import { Textarea } from '@mielui/svelte/components/textarea';

    let message = $state('');
    let sent = $state('');

    function send(event: SubmitEvent) {
        event.preventDefault();
        sent = message.trim();
        message = '';
    }
</script>

<form class="flex w-full max-w-sm flex-col gap-3" onsubmit={send}>
    <Textarea
        bind:value={message}
        label="Message"
        autoresize
        required
        placeholder="Write a message..."
    >
        <div class="flex items-center justify-between gap-3 px-3 pb-3">
            <span class="text-xs text-foreground-muted tabular-nums">
                <span use:numberShuffle={{ value: message.length }}>
                    {message.length}
                </span> characters
            </span>
            <Button type="submit" size="sm" disabled={!message.trim()}>Send</Button>
        </div>
    </Textarea>
    <p role="status" class="text-sm text-foreground-muted">
        {sent ? `Sent in this preview: ${sent}` : ''}
    </p>
</form>
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import { Textarea } from '@mielui/svelte/components/textarea';
</script>

<div class="w-full max-w-sm">
    <Textarea disabled value="Cannot edit this text" label="Disabled" />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Textarea } from '@mielui/svelte/components/textarea';

    let value = $state('Please include the launch checklist in the project notes before Friday.');
</script>

<div class="w-full max-w-sm">
    <Textarea bind:value label="Message" />
</div>
~~~~

### Labeled

~~~~svelte
<script lang="ts">
    import { Textarea } from '@mielui/svelte/components/textarea';
</script>

<div class="w-full max-w-sm">
    <Textarea label="Feedback" description="Tell us what you think." />
</div>
~~~~

For the rendered reference, visit [/docs/components/textarea](/docs/components/textarea).


---

Source: http://sveltekit-prerender/docs/components/toggle.md

# Toggle

Two-state toggle button with bindable pressed state, sizes (sm/md/lg), variants (default/outlined).

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add toggle
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Toggle

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| pressed | boolean \| undefined | false | No | Yes |
| disabled | boolean \| undefined | false | No | No |
| size | "sm" \| "md" \| "lg" \| undefined | 'md' | No | No |
| variant | "outline" \| "default" \| "outlined" \| undefined | 'default' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| onPressedChange | ((pressed: boolean) => void) \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import Toggle from './toggle.svelte';

export type ToggleProps = {
    pressed?: boolean;
    disabled?: boolean;
    size?: 'sm' | 'md' | 'lg';
    variant?: 'default' | 'outlined' | 'outline';
    children?: Snippet;
    onPressedChange?: (pressed: boolean) => void;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'onclick' | 'children'>;

export { Toggle };
export default Toggle;
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Toggle aria-label="Bold" disabled>
    <HugeiconsIcon icon={Bold} size={14} />
</Toggle>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let bold = $state(true);
</script>

<Toggle bind:pressed={bold} aria-label="Bold">
    <HugeiconsIcon icon={Bold} size={14} />
</Toggle>
~~~~

### Icon

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Toggle aria-label="Bold">
    <HugeiconsIcon icon={Bold} size={14} />
</Toggle>
~~~~

### Sizes

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="flex gap-2">
    <Toggle aria-label="Bold" size="sm">
        <HugeiconsIcon icon={Bold} size={12} />
    </Toggle>
    <Toggle aria-label="Bold">
        <HugeiconsIcon icon={Bold} size={14} />
    </Toggle>
    <Toggle aria-label="Bold" size="lg">
        <HugeiconsIcon icon={Bold} size={16} />
    </Toggle>
</div>
~~~~

### Text

~~~~svelte
<script lang="ts">
    import { Toggle } from '@mielui/svelte/components/toggle';
</script>

<Toggle>Option</Toggle>
~~~~

For the rendered reference, visit [/docs/components/toggle](/docs/components/toggle).


---

Source: http://sveltekit-prerender/docs/components/toggle-group.md

# Toggle Group

Single or multiple-select toggle group with bindable value (string or string[]).

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn, utils.travelingHighlight

## Install

~~~~sh
pnpm dlx @mielui/svelte add toggle-group
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| disabled | boolean \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| type | "single" \| undefined \| "multiple" | — | No | No |
| value | string \| undefined \| string[] \| undefined | — | No | Yes |
| onValueChange | ((value: string \| undefined) => void) \| undefined \| ((value: string[]) => void) \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import Root from './toggle-group.svelte';
import Item from './toggle-group-item.svelte';

export type ToggleGroupProps = DefaultProps & {
    disabled?: boolean;
} & (
        | {
              type?: 'single';
              value?: string;
              onValueChange?: (value: string | undefined) => void;
          }
        | {
              type: 'multiple';
              value?: string[];
              onValueChange?: (value: string[]) => void;
          }
    );

export type ToggleGroupItemProps = {
    value: string;
    disabled?: boolean;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'onclick' | 'children' | 'disabled' | 'value'>;

export type ToggleGroupContext = {
    readonly disabled: boolean;
    readonly type: 'single' | 'multiple';
    isActive: (value: string) => boolean;
    setValue: (value: string) => void;
};

export { Item, Root };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import {
        TextAlignCenterIcon as AlignCenter,
        TextAlignLeftIcon as AlignLeft,
        TextAlignRightIcon as AlignRight
    } from '@hugeicons/core-free-icons';
    import * as ToggleGroup from '@mielui/svelte/components/toggle-group';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let alignment = $state<string | undefined>('center');
</script>

<div class="flex w-full max-w-sm flex-col items-center gap-5">
    <ToggleGroup.Root type="single" bind:value={alignment}>
        <ToggleGroup.Item value="left" aria-label="Align left">
            <HugeiconsIcon icon={AlignLeft} size={14} />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="center" aria-label="Align center">
            <HugeiconsIcon icon={AlignCenter} size={14} />
        </ToggleGroup.Item>
        <ToggleGroup.Item value="right" aria-label="Align right">
            <HugeiconsIcon icon={AlignRight} size={14} />
        </ToggleGroup.Item>
    </ToggleGroup.Root>

    <p
        class="w-full text-sm"
        class:text-left={alignment === 'left'}
        class:text-center={alignment === 'center'}
        class:text-right={alignment === 'right'}
    >
        Choose an alignment to change how this paragraph sits in its column.
    </p>
</div>
~~~~

### Multiple

~~~~svelte
<script lang="ts">
    import * as ToggleGroup from '@mielui/svelte/components/toggle-group';
</script>

<ToggleGroup.Root type="multiple" value={['left', 'center']}>
    <ToggleGroup.Item value="left">Option A</ToggleGroup.Item>
    <ToggleGroup.Item value="center">Option B</ToggleGroup.Item>
    <ToggleGroup.Item value="right">Option C</ToggleGroup.Item>
</ToggleGroup.Root>
~~~~

### Single

~~~~svelte
<script lang="ts">
    import {
        TextAlignCenterIcon as AlignCenter,
        TextAlignLeftIcon as AlignLeft,
        TextAlignRightIcon as AlignRight
    } from '@hugeicons/core-free-icons';
    import * as ToggleGroup from '@mielui/svelte/components/toggle-group';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<ToggleGroup.Root type="single" value="center">
    <ToggleGroup.Item value="left" aria-label="Align left">
        <HugeiconsIcon icon={AlignLeft} size={14} />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="center" aria-label="Align center">
        <HugeiconsIcon icon={AlignCenter} size={14} />
    </ToggleGroup.Item>
    <ToggleGroup.Item value="right" aria-label="Align right">
        <HugeiconsIcon icon={AlignRight} size={14} />
    </ToggleGroup.Item>
</ToggleGroup.Root>
~~~~

For the rendered reference, visit [/docs/components/toggle-group](/docs/components/toggle-group).


---

Source: http://sveltekit-prerender/docs/components/tooltip.md

# Tooltip

Hover-revealed inline guidance with a shared Tailwind-styled surface, role="tooltip", and small default delays.

- Package: `@mielui/svelte`
- Component version: `2.1.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: transition, components/_internal/surface, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add tooltip
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| rich | boolean \| undefined | false | No | No |



### Provider

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| delay | number \| undefined | 125 | No | No |
| closeDelay | number \| undefined | 100 | No | No |
| placement | TooltipPlacement \| undefined | 'top' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| showOnClick | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import Root from './tooltip.svelte';
import Content from './tooltip-content.svelte';
import Provider from './tooltip-provider.svelte';
import Trigger from './tooltip-trigger.svelte';

export type TooltipPlacement = 'top' | 'left' | 'bottom' | 'right';

export type TooltipProps = {
    delay?: number;
    closeDelay?: number;
    placement?: TooltipPlacement;
    children?: Snippet;
};

export type TooltipTriggerProps = {
    showOnClick?: boolean;
} & DefaultProps;

export type TooltipContentProps = DefaultProps & { surface?: 'solid' | 'glass'; rich?: boolean };

export type TooltipProviderProps = { children?: Snippet };

export type TooltipState = {
    text: string;
    placement: TooltipPlacement;
    delay: number;
    closeDelay: number;
    className: string;
};

export { Content, Provider, Root, Trigger };
~~~~

## Examples

### Bottom

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
</script>

<Tooltip.Root placement="bottom">
    <Tooltip.Trigger>
        <Button variant="outline">Bottom</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>Appears below the trigger</Tooltip.Content>
</Tooltip.Root>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import {
        FrameIcon as Frame,
        BubbleChatIcon as MessageCircle,
        MousePointer01Icon as MousePointer2,
        PenTool01Icon as PenTool,
        SquareIcon as Square,
        TextFontIcon as Type
    } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let activeTool = $state<string>('move');

    const tools = [
        { id: 'move', label: 'Move', shortcut: 'V', icon: MousePointer2 },
        { id: 'frame', label: 'Frame', shortcut: 'F', icon: Frame },
        { id: 'rectangle', label: 'Rectangle', shortcut: 'R', icon: Square },
        { id: 'pen', label: 'Pen', shortcut: 'P', icon: PenTool },
        { id: 'text', label: 'Text', shortcut: 'T', icon: Type },
        { id: 'comment', label: 'Comment', shortcut: 'C', icon: MessageCircle }
    ];
</script>

<div class="flex max-w-full items-center justify-center p-2 sm:p-6">
    <div class="flex flex-wrap gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1">
        {#each tools as tool (tool.id)}
            <Tooltip.Root placement="top" delay={300}>
                <Tooltip.Trigger>
                    <Button
                        variant="ghost"
                        size="icon"
                        type="button"
                        class={`size-8 ${activeTool === tool.id
                            ? 'bg-secondary text-foreground'
                            : 'text-foreground-muted hover:bg-secondary hover:text-foreground'}`}
                        onclick={() => (activeTool = tool.id)}
                        aria-label={tool.label}
                        aria-pressed={activeTool === tool.id}
                    >
                        <HugeiconsIcon icon={tool.icon} size={16} />
                    </Button>
                </Tooltip.Trigger>
                <Tooltip.Content surface="glass">
                    <div class="flex items-center gap-2">
                        <span>{tool.label}</span>
                        <Kbd shortcut={tool.shortcut} />
                    </div>
                </Tooltip.Content>
            </Tooltip.Root>
        {/each}
    </div>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        FrameIcon as Frame,
        BubbleChatIcon as MessageCircle,
        MousePointer01Icon as MousePointer2,
        PenTool01Icon as PenTool,
        SquareIcon as Square,
        TextFontIcon as Type
    } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import Kbd from '@mielui/svelte/components/kbd';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let activeTool = $state<string>('move');

    const tools = [
        { id: 'move', label: 'Move', shortcut: 'V', icon: MousePointer2 },
        { id: 'frame', label: 'Frame', shortcut: 'F', icon: Frame },
        { id: 'rectangle', label: 'Rectangle', shortcut: 'R', icon: Square },
        { id: 'pen', label: 'Pen', shortcut: 'P', icon: PenTool },
        { id: 'text', label: 'Text', shortcut: 'T', icon: Type },
        { id: 'comment', label: 'Comment', shortcut: 'C', icon: MessageCircle }
    ];
</script>

<div class="flex max-w-full items-center justify-center p-2 sm:p-6">
    <div class="flex flex-wrap gap-1 rounded-[var(--radius-lg)] border border-border bg-card p-1">
        {#each tools as tool (tool.id)}
            <Tooltip.Root placement="top" delay={300}>
                <Tooltip.Trigger>
                    <Button
                        variant="ghost"
                        size="icon"
                        type="button"
                        class={`size-8 ${activeTool === tool.id
                            ? 'bg-secondary text-foreground'
                            : 'text-foreground-muted hover:bg-secondary hover:text-foreground'}`}
                        onclick={() => (activeTool = tool.id)}
                        aria-label={tool.label}
                        aria-pressed={activeTool === tool.id}
                    >
                        <HugeiconsIcon icon={tool.icon} size={16} />
                    </Button>
                </Tooltip.Trigger>
                <Tooltip.Content>
                    <div class="flex items-center gap-2">
                        <span>{tool.label}</span>
                        <Kbd shortcut={tool.shortcut} />
                    </div>
                </Tooltip.Content>
            </Tooltip.Root>
        {/each}
    </div>
</div>
~~~~

### Rich

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
</script>

<Tooltip.Provider>
    <Tooltip.Root>
        <Tooltip.Trigger>
            <Button variant="outline">Sync status</Button>
        </Tooltip.Trigger>
        <Tooltip.Content rich>
            <span class="flex items-center gap-2">
                <span aria-hidden="true" class="size-1.5 rounded-full bg-success"></span>
                <span><strong>Synced</strong> · just now</span>
            </span>
        </Tooltip.Content>
    </Tooltip.Root>
</Tooltip.Provider>
~~~~

### Right

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
</script>

<Tooltip.Root placement="right">
    <Tooltip.Trigger>
        <Button variant="outline">Right</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>Appears to the right</Tooltip.Content>
</Tooltip.Root>
~~~~

### Top

~~~~svelte
<script lang="ts">
    import { InformationCircleIcon as Info } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Tooltip.Root placement="top">
    <Tooltip.Trigger>
        <Button variant="outline">
            <HugeiconsIcon icon={Info} size={14} />
            Top
        </Button>
    </Tooltip.Trigger>
    <Tooltip.Content>Appears above the trigger</Tooltip.Content>
</Tooltip.Root>
~~~~

For the rendered reference, visit [/docs/components/tooltip](/docs/components/tooltip).


---

Source: http://sveltekit-prerender/docs/components/typography.md

# Typography

Document headings, role-based text, inline code, and compact interface typography primitives.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add typography
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H1

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H2

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H3

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H4

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H5

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H6

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### InlineCode

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Metadata

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Text

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| variant | TypographyTextVariant \| undefined | 'supporting' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| level | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Description from './typography-description.svelte';
import H1 from './typography-h1.svelte';
import H2 from './typography-h2.svelte';
import H3 from './typography-h3.svelte';
import H4 from './typography-h4.svelte';
import H5 from './typography-h5.svelte';
import H6 from './typography-h6.svelte';
import InlineCode from './typography-inline-code.svelte';
import Metadata from './typography-metadata.svelte';
import Text from './typography-text.svelte';
import Title from './typography-title.svelte';

export type {
    TypographyHeadingProps,
    TypographyInlineCodeProps,
    TypographyTextProps,
    TypographyTextVariant
} from './types';

export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
export type HeadingTag = `h${HeadingLevel}`;

export type TypographyTitleProps = HTMLAttributes<HTMLHeadingElement> & {
    level: HeadingLevel;
    children: Snippet;
};

export type TypographyDescriptionProps = HTMLAttributes<HTMLParagraphElement> & {
    children: Snippet;
};

export type TypographyMetadataProps = HTMLAttributes<HTMLSpanElement> & {
    children: Snippet;
};

export { Description, H1, H2, H3, H4, H5, H6, InlineCode, Metadata, Text, Title };
~~~~

## Examples

### Heading Levels

~~~~svelte
<script lang="ts">
    import * as Typography from '@mielui/svelte/components/typography';
</script>

<div class="flex w-full max-w-xl flex-col gap-5">
    <Typography.H1>Heading one</Typography.H1>
    <Typography.H2>Heading two</Typography.H2>
    <Typography.H3>Heading three</Typography.H3>
    <Typography.H4>Heading four</Typography.H4>
    <Typography.H5>Heading five</Typography.H5>
    <Typography.H6>Heading six</Typography.H6>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Typography from '@mielui/svelte/components/typography';
</script>

<article class="flex w-full max-w-xl flex-col gap-2">
    <Typography.Metadata>Project notes / September 3, 2026</Typography.Metadata>
    <Typography.Title level={2}>Preparing the September release</Typography.Title>
    <Typography.Description class="max-w-[62ch]">
        Review the updated components and documentation before publishing the next release.
    </Typography.Description>
</article>
~~~~

### Metadata

~~~~svelte
<script lang="ts">
    import * as Typography from '@mielui/svelte/components/typography';
</script>

<div class="grid w-full max-w-sm grid-cols-[1fr_auto] items-baseline gap-x-8 gap-y-3">
    <Typography.Metadata>Build started</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:41:07</Typography.Metadata>
    <Typography.Metadata>Tests completed</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:43:18</Typography.Metadata>
    <Typography.Metadata>Deployment ready</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:44:02</Typography.Metadata>
</div>
~~~~

### Text Roles

~~~~svelte
<script lang="ts">
    import * as Typography from '@mielui/svelte/components/typography';
</script>

<div class="flex w-full max-w-xl flex-col gap-5">
    <Typography.Text variant="lead">
        Lead text introduces a page or a significant section.
    </Typography.Text>
    <Typography.Text variant="body">
        Body text carries longer explanations at a comfortable reading size and rhythm.
    </Typography.Text>
    <Typography.Text variant="supporting">
        Supporting text adds quieter instructions, context, or qualifications.
    </Typography.Text>
    <Typography.Text variant="body">
        Use<Typography.InlineCode>InlineCode</Typography.InlineCode> for commands, paths, and short
        identifiers within prose.
    </Typography.Text>
</div>
~~~~

For the rendered reference, visit [/docs/components/typography](/docs/components/typography).


---

Source: http://sveltekit-prerender/docs/components/code-block.md

# Code Block

Code block with syntax-highlighted snippets, a multi-language tab switcher, built-in copy button, and an actions slot. Highlighting via highlight.js with a built-in GitHub palette; theme="custom" skips the token colors for any highlight.js theme stylesheet.

- Package: `@mielui/svelte`
- Component version: `2.0.0`
- Depends on Mielui components: _internal/utils, tabs, copy-button, card, _internal/highlight
- Shared utilities: components/_internal/inset-layout, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add code-block
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### CodeBlock

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| undefined | — | No | Yes |
| tabs | CodeBlockTab[] \| undefined | — | No | No |
| code | string \| undefined | — | No | No |
| lang | string \| undefined | — | No | No |
| showLineNumbers | boolean \| undefined | false | No | No |
| copy | CodeBlockCopyPlacement \| undefined | 'actionbar' | No | No |
| actions | Snippet<[]> \| undefined | — | No | No |
| theme | CodeBlockTheme \| undefined | 'mielui' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| copy | boolean \| undefined | true | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string \| undefined | 'default' | No | No |
| code | string | — | Yes | No |
| lang | string \| undefined | — | No | No |
| showLineNumbers | boolean \| undefined | false | No | No |
| copyPlacement | "inline" \| "overlay" \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Copy

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Copy code' | No | No |
| copiedLabel | string \| undefined | 'Copied' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### List

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| disabled | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';

import Root from './code-block.svelte';
import Actions from './code-block-actions.svelte';
import Content from './code-block-content.svelte';
import Copy from './code-block-copy.svelte';
import Header from './code-block-header.svelte';
import List from './code-block-list.svelte';
import Trigger from './code-block-trigger.svelte';

/** One language entry for the high-level `tabs` prop. */
export type CodeBlockTab = {
    /** Visible tab label, e.g. "JavaScript". */
    label: string;
    /** Highlight.js language id (or alias), e.g. "javascript" / "py" / "c#". */
    lang: string;
    /** Raw source for this tab. */
    code: string;
    /** Stable tab id; defaults to `lang`. Needed when two tabs share a `lang`. */
    value?: string;
};

/** Where the built-in copy button sits. */
export type CodeBlockCopyPlacement = 'actionbar' | 'overlay' | 'inline';

/**
 * Syntax paint for the highlighted tokens.
 * - `mielui`: the built-in GitHub palette (light in light mode, dark in dark mode).
 * - `custom`: no token colors; load any `highlight.js/styles/*` theme instead.
 */
export type CodeBlockTheme = 'mielui' | 'custom';

/** Context shape shared with the subparts. */
export type CodeBlockRegistry = {
    /** Raw code per tab value, registered by each `Content` (Copy reads the active one). */
    codes: Record<string, string>;
    /** Highlight.js language id per tab value. */
    langs: Record<string, string>;
    /** The currently-active tab value. */
    active: string;
    /** Tab values in source order — drives the directional slide on swap. */
    order: string[];
    /** Whether the high-level root owns the shared panel surface. */
    contained: boolean;
    /** Token paint; `custom` skips the built-in colors for a stock theme stylesheet. */
    theme: CodeBlockTheme;
};

export type CodeBlockProps = {
    /** Active tab id (bindable). Defaults to the first tab. */
    value?: string;
    /** High-level multi-language form. */
    tabs?: CodeBlockTab[];
    /** Single-snippet shorthand (ignored when `tabs` is set). */
    code?: string;
    /** Language for the single-snippet shorthand. */
    lang?: string;
    /** Render a line-number gutter. */
    showLineNumbers?: boolean;
    /**
     * Copy button placement:
     * - `actionbar` (default): in the header's action cluster.
     * - `overlay`: pinned to the top-right of the code body.
     * - `inline`: a single-line body with the copy centered on the far right.
     */
    copy?: CodeBlockCopyPlacement;
    /** Extra buttons placed left of the built-in copy button (high-level form). */
    actions?: Snippet;
    /**
     * Syntax paint:
     * - `mielui` (default): the built-in GitHub palette.
     * - `custom`: no token colors; load any `highlight.js/styles/*` theme instead.
     */
    theme?: CodeBlockTheme;
} & DefaultProps;

export type CodeBlockHeaderProps = DefaultProps;

export type CodeBlockListProps = DefaultProps;

export type CodeBlockTriggerProps = {
    /** Tab id; matches a `Content` value. */
    value: string;
    disabled?: boolean;
} & DefaultProps;

export type CodeBlockActionsProps = {
    /** Append the built-in copy button after `children`. */
    copy?: boolean;
} & DefaultProps;

export type CodeBlockCopyProps = {
    label?: string;
    copiedLabel?: string;
} & DefaultProps;

export type CodeBlockContentProps = {
    /** Tab id this panel belongs to. */
    value?: string;
    code: string;
    lang?: string;
    showLineNumbers?: boolean;
    /** Render the copy button in/over this panel (`overlay` or `inline`). */
    copyPlacement?: 'overlay' | 'inline';
} & DefaultProps;

export { default as CodeBlock } from './code-block.svelte';
export { Actions, Content, Copy, Header, List, Root, Trigger };
export default Root;
~~~~

## Examples

### Compound

~~~~svelte
<script lang="ts">
    import { Download01Icon as Download } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as CodeBlock from '@mielui/svelte/components/code-block';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const sh = `npm install @mielui/svelte
npx mielui add code-block`;

    const yaml = `name: ci
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm test`;
</script>

<CodeBlock.Root value="shell">
    <CodeBlock.Header>
        <CodeBlock.List>
            <CodeBlock.Trigger value="shell">Terminal</CodeBlock.Trigger>
            <CodeBlock.Trigger value="yaml">ci.yml</CodeBlock.Trigger>
        </CodeBlock.List>
        <CodeBlock.Actions>
            <Button variant="ghost" size="icon" aria-label="Download">
                <HugeiconsIcon icon={Download} size={15} />
            </Button>
        </CodeBlock.Actions>
    </CodeBlock.Header>
    <CodeBlock.Content value="shell" code={sh} lang="bash" />
    <CodeBlock.Content value="yaml" code={yaml} lang="yaml" />
</CodeBlock.Root>
~~~~

### Copy Inline

~~~~svelte
<script lang="ts">
    import * as CodeBlock from '@mielui/svelte/components/code-block';
</script>

<!-- copyPlacement="inline": a single-line body with the copy centered on the far right. -->
<CodeBlock.Root value="sh">
    <CodeBlock.Content
        value="sh"
        code="pnpm dlx @mielui/svelte add code-block"
        lang="bash"
        copyPlacement="inline"
    />
</CodeBlock.Root>
~~~~

### Copy Overlay

~~~~svelte
<script lang="ts">
    import * as CodeBlock from '@mielui/svelte/components/code-block';

    const code = `model = SentenceTransformer("all-MiniLM-L6-v2")
embeddings = model.encode(documents)
index.upsert(vectors=zip(ids, embeddings))`;
</script>

<!-- copyPlacement="overlay" pins the copy button to the body's top-right (no header). -->
<CodeBlock.Root value="py">
    <CodeBlock.Content value="py" {code} lang="python" copyPlacement="overlay" />
</CodeBlock.Root>
~~~~

### Custom Actions

~~~~svelte
<script lang="ts">
    import {
        LinkSquare02Icon as ExternalLink,
        RefreshIcon as RefreshCw
    } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as CodeBlock from '@mielui/svelte/components/code-block';
    import { Textarea } from '@mielui/svelte/components/textarea';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let ran = $state(false);
    let editing = $state(false);
    let code = $state(`SELECT id, email, created_at
FROM users
WHERE created_at > now() - interval '7 days'
ORDER BY created_at DESC
LIMIT 50;`);
</script>

<div class="w-full space-y-3">
    <CodeBlock.Root value="sql">
        <CodeBlock.Header>
            <CodeBlock.Actions>
                <Tooltip.Root>
                    <Tooltip.Trigger>
                        <Button
                            variant="ghost"
                            size="icon"
                            aria-label="Run query"
                            onclick={() => { ran = true; }}
                        >
                            <HugeiconsIcon icon={RefreshCw} size={15} />
                        </Button>
                    </Tooltip.Trigger>
                    <Tooltip.Content>Run query</Tooltip.Content>
                </Tooltip.Root>
                <Tooltip.Root>
                    <Tooltip.Trigger>
                        <Button
                            variant="ghost"
                            size="icon"
                            aria-label="Edit query"
                            onclick={() => { editing = !editing; }}
                        >
                            <HugeiconsIcon icon={ExternalLink} size={15} />
                        </Button>
                    </Tooltip.Trigger>
                    <Tooltip.Content>Edit query</Tooltip.Content>
                </Tooltip.Root>
            </CodeBlock.Actions>
        </CodeBlock.Header>
        <CodeBlock.Content value="sql" {code} lang="sql" />
    </CodeBlock.Root>
    {#if editing}
        <Textarea label="Query editor" bind:value={code} rows={6} class="font-mono text-sm" />
    {/if}
    <p role="status" class="text-sm text-foreground-muted">
        {ran ? 'Demo complete: 12 matching users. No database request was sent.' : 'Edit the query or run the local demonstration.'}
    </p>
</div>
~~~~

### Custom Theme Stylesheet

~~~~svelte
<script lang="ts">
    import { CodeBlock } from '@mielui/svelte/components/code-block';

    const code = `export async function getUser(id: string) {
  const res = await fetch(\`/api/users/\${id}\`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}`;
</script>

<!-- theme="custom" skips Mielui's token colors, so these stock-style
     highlight.js selectors paint the tokens instead. -->
<CodeBlock {code} lang="typescript" copy="overlay" theme="custom" class="demo-hljs-onedark" />

<style>
    /* One Dark / One Light inspired token colors, scoped to this demo. */
    :global(.demo-hljs-onedark .hljs-comment),
    :global(.demo-hljs-onedark .hljs-quote) {
        color: #a0a1a7;
        font-style: italic;
    }
    :global(.demo-hljs-onedark .hljs-keyword),
    :global(.demo-hljs-onedark .hljs-selector-tag),
    :global(.demo-hljs-onedark .hljs-literal),
    :global(.demo-hljs-onedark .hljs-section),
    :global(.demo-hljs-onedark .hljs-link) {
        color: #a626a4;
    }
    :global(.demo-hljs-onedark .hljs-string),
    :global(.demo-hljs-onedark .hljs-regexp) {
        color: #50a14f;
    }
    :global(.demo-hljs-onedark .hljs-number) {
        color: #986801;
    }
    :global(.demo-hljs-onedark .hljs-title),
    :global(.demo-hljs-onedark .hljs-title.function_) {
        color: #4078f2;
    }
    :global(.demo-hljs-onedark .hljs-attr),
    :global(.demo-hljs-onedark .hljs-attribute),
    :global(.demo-hljs-onedark .hljs-property),
    :global(.demo-hljs-onedark .hljs-variable) {
        color: #e45649;
    }
    :global(.demo-hljs-onedark .hljs-built_in),
    :global(.demo-hljs-onedark .hljs-type) {
        color: #0184bc;
    }
    :global(.demo-hljs-onedark .hljs-meta) {
        color: #383a42;
    }

    :global(.dark .demo-hljs-onedark .hljs-comment),
    :global(.dark .demo-hljs-onedark .hljs-quote) {
        color: #7f848e;
    }
    :global(.dark .demo-hljs-onedark .hljs-keyword),
    :global(.dark .demo-hljs-onedark .hljs-selector-tag),
    :global(.dark .demo-hljs-onedark .hljs-literal),
    :global(.dark .demo-hljs-onedark .hljs-section),
    :global(.dark .demo-hljs-onedark .hljs-link) {
        color: #c678dd;
    }
    :global(.dark .demo-hljs-onedark .hljs-string),
    :global(.dark .demo-hljs-onedark .hljs-regexp) {
        color: #98c379;
    }
    :global(.dark .demo-hljs-onedark .hljs-number) {
        color: #d19a66;
    }
    :global(.dark .demo-hljs-onedark .hljs-title),
    :global(.dark .demo-hljs-onedark .hljs-title.function_) {
        color: #61afef;
    }
    :global(.dark .demo-hljs-onedark .hljs-attr),
    :global(.dark .demo-hljs-onedark .hljs-attribute),
    :global(.dark .demo-hljs-onedark .hljs-property),
    :global(.dark .demo-hljs-onedark .hljs-variable) {
        color: #e06c75;
    }
    :global(.dark .demo-hljs-onedark .hljs-built_in),
    :global(.dark .demo-hljs-onedark .hljs-type) {
        color: #e5c07b;
    }
    :global(.dark .demo-hljs-onedark .hljs-meta) {
        color: #abb2bf;
    }
</style>
~~~~

### Custom Theme Variables

~~~~svelte
<script lang="ts">
    import { CodeBlock } from '@mielui/svelte/components/code-block';

    const code = `export async function getUser(id: string) {
  const res = await fetch(\`/api/users/\${id}\`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}`;
</script>

<!-- The eight --code-block-token-* variables inherit, so a wrapper can
     recolor the built-in palette per mode without a stylesheet. -->
<div class="demo-brand-tokens">
    <CodeBlock {code} lang="typescript" copy="overlay" />
</div>

<style>
    :global(.demo-brand-tokens) {
        --code-block-token-comment: #7d8590;
        --code-block-token-keyword: #a21caf;
        --code-block-token-string: #047857;
        --code-block-token-number: #b45309;
        --code-block-token-function: #4d7c0f;
        --code-block-token-property: #0e7490;
        --code-block-token-builtin: #be123c;
        --code-block-token-entity: #15803d;
        --code-block-token-meta: #64748b;
    }
    :global(.dark .demo-brand-tokens) {
        --code-block-token-comment: #8b949e;
        --code-block-token-keyword: #e879f9;
        --code-block-token-string: #34d399;
        --code-block-token-number: #fbbf24;
        --code-block-token-function: #a3e635;
        --code-block-token-property: #22d3ee;
        --code-block-token-builtin: #fb7185;
        --code-block-token-entity: #4ade80;
        --code-block-token-meta: #94a3b8;
    }
</style>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        InformationCircleIcon as Info,
        SparklesIcon as Sparkles
    } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as CodeBlock from '@mielui/svelte/components/code-block';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
    import csharp from './snippets/quickstart.cs.txt?raw';
    import go from './snippets/quickstart.go.txt?raw';
    import java from './snippets/quickstart.java.txt?raw';
    import javascript from './snippets/quickstart.js.txt?raw';
    // Loaded as raw text so the sample `import` lines aren't seen by the bundler.
    import python from './snippets/quickstart.py.txt?raw';
</script>

<CodeBlock.Root value="javascript">
    <CodeBlock.Header>
        <CodeBlock.List>
            <CodeBlock.Trigger value="python">Python</CodeBlock.Trigger>
            <CodeBlock.Trigger value="javascript">JavaScript</CodeBlock.Trigger>
            <CodeBlock.Trigger value="java">Java</CodeBlock.Trigger>
            <CodeBlock.Trigger value="go">Go</CodeBlock.Trigger>
            <CodeBlock.Trigger value="csharp">C#</CodeBlock.Trigger>
        </CodeBlock.List>
        <CodeBlock.Actions>
            <Tooltip.Root>
                <Tooltip.Trigger>
                    <Button variant="ghost" size="icon" aria-label="About this snippet">
                        <HugeiconsIcon icon={Info} size={15} />
                    </Button>
                </Tooltip.Trigger>
                <Tooltip.Content>About this snippet</Tooltip.Content>
            </Tooltip.Root>
            <Tooltip.Root>
                <Tooltip.Trigger>
                    <Button variant="ghost" size="icon" aria-label="Explain with AI">
                        <HugeiconsIcon icon={Sparkles} size={15} />
                    </Button>
                </Tooltip.Trigger>
                <Tooltip.Content>Explain with AI</Tooltip.Content>
            </Tooltip.Root>
        </CodeBlock.Actions>
    </CodeBlock.Header>
    <CodeBlock.Content value="python" code={python} lang="python" />
    <CodeBlock.Content value="javascript" code={javascript} lang="javascript" />
    <CodeBlock.Content value="java" code={java} lang="java" />
    <CodeBlock.Content value="go" code={go} lang="go" />
    <CodeBlock.Content value="csharp" code={csharp} lang="csharp" />
</CodeBlock.Root>
~~~~

### Line Numbers

~~~~svelte
<script lang="ts">
    import * as CodeBlock from '@mielui/svelte/components/code-block';

    const code = `def fib(n):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a

print([fib(i) for i in range(10)])`;
</script>

<CodeBlock.Root value="py">
    <CodeBlock.Content value="py" {code} lang="python" showLineNumbers />
</CodeBlock.Root>
~~~~

### Multi Language

~~~~svelte
<script lang="ts">
    import { CodeBlock } from '@mielui/svelte/components/code-block';

    const ts = `export async function getUser(id: string) {
  const res = await fetch(\`/api/users/\${id}\`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}`;

    const py = `import httpx

async def get_user(id: str):
    async with httpx.AsyncClient() as client:
        res = await client.get(f"/api/users/{id}")
        res.raise_for_status()
        return res.json()`;

    const go = `func GetUser(id string) (*User, error) {
    res, err := http.Get("/api/users/" + id)
    if err != nil {
        return nil, err
    }
    defer res.Body.Close()
    return decode(res.Body)
}`;
</script>

<CodeBlock
    class="max-w-xl"
    value="typescript"
    tabs={[
        { label: 'TypeScript', lang: 'typescript', code: ts },
        { label: 'Python', lang: 'python', code: py },
        { label: 'Go', lang: 'go', code: go }
    ]}
/>
~~~~

### Single

~~~~svelte
<script lang="ts">
    import * as CodeBlock from '@mielui/svelte/components/code-block';

    const code = `const greet = (name: string) => {
  return \`Hello, \${name}!\`;
};

console.log(greet('world'));`;
</script>

<CodeBlock.Root value="ts">
    <CodeBlock.Content value="ts" {code} lang="typescript" />
</CodeBlock.Root>
~~~~

For the rendered reference, visit [/docs/components/code-block](/docs/components/code-block).


---

Source: http://sveltekit-prerender/docs/components/color-picker.md

# Color Picker

Popover-based color picker with SB drag, hue strip, hex input, and HSL sliders. Optional preset swatches. Composable Root, Trigger, Content, Plane, Hue, Preview, HexInput, Channels, and Presets.

- Package: `@mielui/svelte`
- Component version: `3.0.0`
- Depends on Mielui components: _internal/utils, popover, button, slider
- Shared utilities: hugeicons-icon, utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add color-picker
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Channels

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| tabindex | number \| undefined | — | No | No |
| role | "none" \| "alertdialog" \| "dialog" \| "listbox" \| "menu" \| undefined | — | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| surfaceClass | string \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | — | No | No |
| dismissLayer | boolean \| undefined | — | No | No |
| portal | boolean \| undefined | — | No | No |
| refElement | VirtualElement \| undefined | — | No | No |
| focusTrap | boolean \| undefined | — | No | No |
| lockScroll | boolean \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### HexInput

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Hue

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Plane

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Presets

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Preview

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | — | No | No |
| value | string \| undefined | '' | No | Yes |
| onValueChange | ((value: string) => void) \| undefined | — | No | No |
| options | ColorOption[] \| undefined | [] | No | No |
| format | ColorFormat \| undefined | 'hsl' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "secondary" \| "ghost" \| "outline" \| undefined | 'outline' | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { PopoverContentProps } from '@mielui/svelte/components/popover';
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Channels from './color-picker-channels.svelte';
import Content from './color-picker-content.svelte';
import HexInput from './color-picker-hex-input.svelte';
import Hue from './color-picker-hue.svelte';
import Plane from './color-picker-plane.svelte';
import Presets from './color-picker-presets.svelte';
import Preview from './color-picker-preview.svelte';
import Root from './color-picker-root.svelte';
import Trigger from './color-picker-trigger.svelte';
import type { ColorFormat, ColorOption } from './context';

export type { ColorFormat, ColorOption, ColorPickerContext } from './context';

export type ColorPickerProps = {
    label?: string;
    value?: string;
    onValueChange?: (value: string) => void;
    options?: ColorOption[];
    format?: ColorFormat;
    children?: Snippet;
} & DefaultProps;

export type ColorPickerContentProps = Omit<PopoverContentProps, 'children'> & {
    children?: Snippet;
};

export { Channels, Content, HexInput, Hue, Plane, Presets, Preview, Root, Trigger };

export type ColorPickerPlaneProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ColorPickerHueProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ColorPickerPreviewProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;

export type ColorPickerHexInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ColorPickerChannelsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ColorPickerPresetsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
~~~~

## Examples

### Composition

~~~~svelte
<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let value = $state('#5e6ad2');
    const options = [
        { label: 'Indigo', value: '#5e6ad2' },
        { label: 'Rose', value: '#e65c86' },
        { label: 'Green', value: '#36a375' }
    ];
</script>

<ColorPicker.Root label="Accent color" bind:value {options} format="rgb">
    <ColorPicker.Trigger />
    <ColorPicker.Content>
        <ColorPicker.Presets />
        <div class="flex items-center gap-2 px-2">
            <ColorPicker.Preview />
            <ColorPicker.HexInput class="flex-1" />
        </div>
        <ColorPicker.Channels />
    </ColorPicker.Content>
</ColorPicker.Root>
~~~~

### Default

~~~~svelte
<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let value = $state('#5e6ad2');
</script>

<div class="flex items-center justify-center">
    <ColorPicker.Root {value} onValueChange={(v) => (value = v)} label="Pick a color">
        <ColorPicker.Trigger />
        <ColorPicker.Content />
    </ColorPicker.Root>
</div>
~~~~

### Formats

~~~~svelte
<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let hslValue = $state('#5e6ad2');
    let rgbValue = $state('#5e6ad2');
    let hsvValue = $state('#5e6ad2');
</script>

<div class="flex flex-wrap items-center justify-center gap-4">
    <ColorPicker.Root
        value={hslValue}
        onValueChange={(v) => (hslValue = v)}
        format="hsl"
        label="HSL"
    >
        <ColorPicker.Trigger />
        <ColorPicker.Content />
    </ColorPicker.Root>
    <ColorPicker.Root
        value={rgbValue}
        onValueChange={(v) => (rgbValue = v)}
        format="rgb"
        label="RGB"
    >
        <ColorPicker.Trigger />
        <ColorPicker.Content />
    </ColorPicker.Root>
    <ColorPicker.Root
        value={hsvValue}
        onValueChange={(v) => (hsvValue = v)}
        format="hsv"
        label="HSV"
    >
        <ColorPicker.Trigger />
        <ColorPicker.Content />
    </ColorPicker.Root>
</div>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let value = $state('#5e6ad2');
</script>

<div class="flex items-center justify-center">
    <ColorPicker.Root {value} onValueChange={(v) => (value = v)}>
        <ColorPicker.Trigger />
        <ColorPicker.Content surface="glass" />
    </ColorPicker.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let value = $state('#5e6ad2');
</script>

<div class="flex items-center justify-center">
    <ColorPicker.Root {value} onValueChange={(v) => (value = v)}>
        <ColorPicker.Trigger />
        <ColorPicker.Content />
    </ColorPicker.Root>
</div>
~~~~

### With Presets

~~~~svelte
<script lang="ts">
    import type { ColorOption } from '@mielui/svelte/components/color-picker';
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let valueWithOptions = $state('#0284c7');

    const presetSwatches: ColorOption[] = [
        { label: 'Blue', value: '#2563eb' },
        { label: 'Indigo', value: '#4f46e5' },
        { label: 'Violet', value: '#7c3aed' },
        { label: 'Pink', value: '#db2777' },
        { label: 'Rose', value: '#e11d48' }
    ];
</script>

<div class="flex items-center justify-center">
    <ColorPicker.Root
        value={valueWithOptions}
        onValueChange={(v) => (valueWithOptions = v)}
        options={presetSwatches}
        label="Choose"
    >
        <ColorPicker.Trigger />
        <ColorPicker.Content />
    </ColorPicker.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/color-picker](/docs/components/color-picker).


---

Source: http://sveltekit-prerender/docs/components/command.md

# Command

Dialog command palette with search, grouped items, and separators.

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils, dialog, button
- Shared utilities: hugeicons-icon, utils.cn, utils.createContext, utils.travelingHighlight

## Install

~~~~sh
pnpm dlx @mielui/svelte add command
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| allowClickOutside | boolean \| undefined | true | No | No |
| label | string \| undefined | 'Command palette' | No | No |



### Group

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> | — | Yes | No |
| class | string \| undefined | — | No | No |
| heading | string | — | Yes | No |



### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| name | string \| undefined | — | No | No |
| value | string \| undefined | — | No | No |
| callback | (() => void) \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| href | string \| undefined | — | No | No |
| onclick | (() => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Results

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| empty | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Search

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| threshold | number \| undefined | DEFAULT_COMMAND_SEARCH_THRESHOLD | No | No |
| icon | Snippet<[]> \| undefined | — | No | No |
| count | Snippet<[count: number]> \| undefined | — | No | No |
| announcement | Snippet<[message: string]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | — | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | No |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLInputAttributes } from 'svelte/elements';
import Root from './command.svelte';
import Content from './command-content.svelte';
import Group from './command-group.svelte';
import Header from './command-header.svelte';
import Item from './command-item.svelte';
import Results from './command-results.svelte';
import Search from './command-search.svelte';
import Separator from './command-separator.svelte';
import Trigger from './command-trigger.svelte';

export type CommandItem = {
    id: string;
    name: string;
    callback: (() => void) | undefined;
    ref: HTMLButtonElement | HTMLAnchorElement | undefined;
    disabled: boolean;
};

export type CommandProps = {
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    children?: Snippet;
};

export type CommandItemProps = {
    name?: string;
    value?: string;
    callback?: () => void;
    disabled?: boolean;
    href?: string;
    onclick?: () => void;
} & DefaultProps;

export type CommandHeaderProps = DefaultProps;

export type CommandSearchProps = Omit<HTMLInputAttributes, 'children'> & {
    threshold?: number;
    icon?: Snippet;
    count?: Snippet<[count: number]>;
    announcement?: Snippet<[message: string]>;
};

export type CommandResultsProps = DefaultProps & {
    empty?: Snippet;
};

export type CommandState = {
    id: string;
    items: CommandItem[];
    results: CommandItem[];
    searchContent: string;
    activeId: string | undefined;
    itemsVersion: number;
};

export { Content, Group, Header, Item, Results, Root, Search, Separator, Trigger };
~~~~

## Examples

### Glass

~~~~svelte
<script lang="ts">
    import {
        CircleDotIcon as CircleDot,
        FolderAddIcon as FolderPlus,
        InboxIcon as Inbox,
        MapsIcon as MapIcon,
        Moon02Icon as Moon,
        Search01Icon as Search,
        Edit01Icon as SquarePen,
        UserGroupIcon as Users
    } from '@hugeicons/core-free-icons';
    import * as Command from '@mielui/svelte/components/command';
    import Kbd from '@mielui/svelte/components/kbd';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let selected = $state('No command selected');
</script>

<div class="flex w-full flex-col items-center justify-center gap-4">
    <Command.Root>
        <Command.Trigger
            variant="outline"
            class="w-[16rem] max-w-full justify-between gap-2 px-3 py-2 text-foreground-muted"
        >
            <div class="flex min-w-0 items-center gap-2">
                <HugeiconsIcon icon={Search} size={16} />
                <span class="truncate">Search or jump to…</span>
            </div>
            <Kbd shortcut="cmd+K" class="shrink-0" />
        </Command.Trigger>
        <Command.Content surface="glass">
            <Command.Header>
                <span>Command</span>
                <span class="ml-auto flex items-center gap-1.5">
                    <Kbd shortcut="esc" />
                    close
                </span>
            </Command.Header>
            <Command.Search placeholder="Type a command or search…" />
            <Command.Results>
                <Command.Group heading="Jump to">
                    <Command.Item name="Inbox" callback={() => { selected = 'Inbox selected'; }}>
                        <HugeiconsIcon icon={Inbox} size={16} />
                        Inbox
                    </Command.Item>
                    <Command.Item
                        name="My Issues"
                        callback={() => { selected = 'My Issues selected'; }}
                    >
                        <HugeiconsIcon icon={CircleDot} size={16} />
                        My Issues
                    </Command.Item>
                    <Command.Item
                        name="Roadmap"
                        callback={() => { selected = 'Roadmap selected'; }}
                    >
                        <HugeiconsIcon icon={MapIcon} size={16} />
                        Roadmap
                    </Command.Item>
                </Command.Group>
                <Command.Separator />
                <Command.Group heading="Create">
                    <Command.Item
                        name="New issue"
                        callback={() => { selected = 'New issue selected'; }}
                    >
                        <HugeiconsIcon icon={SquarePen} size={16} />
                        <span class="flex-1">New issue</span>
                        <Kbd shortcut="C" />
                    </Command.Item>
                    <Command.Item
                        name="New project"
                        callback={() => { selected = 'New project selected'; }}
                    >
                        <HugeiconsIcon icon={FolderPlus} size={16} />
                        New project
                    </Command.Item>
                </Command.Group>
                <Command.Separator />
                <Command.Group heading="Settings">
                    <Command.Item
                        name="Switch team"
                        callback={() => { selected = 'Switch team selected'; }}
                    >
                        <HugeiconsIcon icon={Users} size={16} />
                        Switch team
                    </Command.Item>
                    <Command.Item name="Theme" callback={() => { selected = 'Theme selected'; }}>
                        <HugeiconsIcon icon={Moon} size={16} />
                        Theme
                    </Command.Item>
                </Command.Group>
            </Command.Results>
        </Command.Content>
    </Command.Root>
    <p role="status" class="text-sm text-foreground-muted">{selected}</p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        CircleDotIcon as CircleDot,
        FolderAddIcon as FolderPlus,
        InboxIcon as Inbox,
        MapsIcon as MapIcon,
        Moon02Icon as Moon,
        Search01Icon as Search,
        Edit01Icon as SquarePen,
        UserGroupIcon as Users
    } from '@hugeicons/core-free-icons';
    import * as Command from '@mielui/svelte/components/command';
    import Kbd from '@mielui/svelte/components/kbd';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let selected = $state('No command selected');
</script>

<div class="flex w-full flex-col items-center justify-center gap-4">
    <Command.Root>
        <Command.Trigger
            variant="outline"
            class="w-[16rem] max-w-full justify-between gap-2 px-3 py-2 text-foreground-muted"
        >
            <div class="flex min-w-0 items-center gap-2">
                <HugeiconsIcon icon={Search} size={16} />
                <span class="truncate">Search or jump to…</span>
            </div>
            <Kbd shortcut="cmd+K" class="shrink-0" />
        </Command.Trigger>
        <Command.Content>
            <Command.Header>
                <span>Command</span>
                <span class="ml-auto flex items-center gap-1.5">
                    <Kbd shortcut="esc" />
                    close
                </span>
            </Command.Header>
            <Command.Search placeholder="Type a command or search…" />
            <Command.Results>
                <Command.Group heading="Jump to">
                    <Command.Item name="Inbox" callback={() => { selected = 'Inbox selected'; }}>
                        <HugeiconsIcon icon={Inbox} size={16} />
                        Inbox
                    </Command.Item>
                    <Command.Item
                        name="My Issues"
                        callback={() => { selected = 'My Issues selected'; }}
                    >
                        <HugeiconsIcon icon={CircleDot} size={16} />
                        My Issues
                    </Command.Item>
                    <Command.Item
                        name="Roadmap"
                        callback={() => { selected = 'Roadmap selected'; }}
                    >
                        <HugeiconsIcon icon={MapIcon} size={16} />
                        Roadmap
                    </Command.Item>
                </Command.Group>
                <Command.Separator />
                <Command.Group heading="Create">
                    <Command.Item
                        name="New issue"
                        callback={() => { selected = 'New issue selected'; }}
                    >
                        <HugeiconsIcon icon={SquarePen} size={16} />
                        <span class="flex-1">New issue</span>
                        <Kbd shortcut="C" />
                    </Command.Item>
                    <Command.Item
                        name="New project"
                        callback={() => { selected = 'New project selected'; }}
                    >
                        <HugeiconsIcon icon={FolderPlus} size={16} />
                        New project
                    </Command.Item>
                </Command.Group>
                <Command.Separator />
                <Command.Group heading="Settings">
                    <Command.Item
                        name="Switch team"
                        callback={() => { selected = 'Switch team selected'; }}
                    >
                        <HugeiconsIcon icon={Users} size={16} />
                        Switch team
                    </Command.Item>
                    <Command.Item name="Theme" callback={() => { selected = 'Theme selected'; }}>
                        <HugeiconsIcon icon={Moon} size={16} />
                        Theme
                    </Command.Item>
                </Command.Group>
            </Command.Results>
        </Command.Content>
    </Command.Root>
    <p role="status" class="text-sm text-foreground-muted">{selected}</p>
</div>
~~~~

### With Groups

~~~~svelte
<script lang="ts">
    import {
        Add01Icon as Plus,
        Search01Icon as Search,
        Settings01Icon as Settings,
        UserGroupIcon as Users
    } from '@hugeicons/core-free-icons';
    import * as Command from '@mielui/svelte/components/command';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let selected = $state('No command selected');
</script>

<div class="flex flex-col items-center justify-center gap-4">
    <Command.Root>
        <Command.Trigger>
            <HugeiconsIcon icon={Search} size={14} />
            Open palette
        </Command.Trigger>
        <Command.Content>
            <Command.Search placeholder="Search..." />
            <Command.Results>
                <Command.Group heading="Actions">
                    <Command.Item
                        name="New project"
                        callback={() => { selected = 'New project selected'; }}
                    >
                        <HugeiconsIcon icon={Plus} size={14} />
                        New project
                    </Command.Item>
                    <Command.Item
                        name="Settings"
                        callback={() => { selected = 'Settings selected'; }}
                    >
                        <HugeiconsIcon icon={Settings} size={14} />
                        Settings
                    </Command.Item>
                </Command.Group>
                <Command.Group heading="Users">
                    <Command.Item name="Team" callback={() => { selected = 'Team selected'; }}>
                        <HugeiconsIcon icon={Users} size={14} />
                        Team
                    </Command.Item>
                </Command.Group>
            </Command.Results>
        </Command.Content>
    </Command.Root>
    <p role="status" class="text-sm text-foreground-muted">{selected}</p>
</div>
~~~~

For the rendered reference, visit [/docs/components/command](/docs/components/command).


---

Source: http://sveltekit-prerender/docs/components/copy-button.md

# Copy Button

One-tap clipboard button with a Copy↔Check icon morph and tooltip feedback, reverting after a short hold.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils, button, tooltip
- Shared utilities: components/_internal/button-attributes, hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add copy-button
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### CopyButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| text | string | — | Yes | No |
| label | string \| undefined | 'Copy' | No | No |
| copiedLabel | string \| undefined | 'Copied' | No | No |
| duration | number \| undefined | 2000 | No | No |
| variant | ButtonVariant \| undefined | 'ghost' | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | 'icon' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| oncopy | (((text: string) => void) & ClipboardEventHandler<HTMLButtonElement>) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { ButtonVariant } from '@mielui/svelte/components/button';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import CopyButton from './copy-button.svelte';

export type CopyButtonProps = {
    /** The string written to the clipboard on click. */
    text: string;
    /** Tooltip label at rest. */
    label?: string;
    /** Tooltip label shown right after copying. */
    copiedLabel?: string;
    /** How long (ms) to hold the copied state before reverting. */
    duration?: number;
    /** Button variant (defaults to `ghost`). */
    variant?: ButtonVariant;
    /** Button size (defaults to `icon`). Pass a text size when rendering children. */
    size?: 'sm' | 'md' | 'lg' | 'icon';
    class?: string;
    /** Optional visible label rendered after the icon. */
    children?: Snippet;
    /** Fired after the text is successfully written to the clipboard. */
    oncopy?: (text: string) => void;
} & Omit<HTMLButtonAttributes, 'class' | 'type'>;

export { CopyButton };
export default CopyButton;
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import { CopyButton } from '@mielui/svelte/components/copy-button';
</script>

<div
    class="flex w-full max-w-sm items-center gap-2 rounded-[var(--radius-md)] border border-border bg-card px-3 py-2"
>
    <code class="min-w-0 flex-1 truncate font-mono text-sm text-foreground">
        pnpm dlx @mielui/svelte add copy-button
    </code>
    <CopyButton text="pnpm dlx @mielui/svelte add copy-button" />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { CopyButton } from '@mielui/svelte/components/copy-button';

    let copied = $state(false);
</script>

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-3">
        <code class="text-sm">pnpm add @mielui/svelte</code>
        <CopyButton
            text="pnpm add @mielui/svelte"
            label="Copy install command"
            oncopy={() => { copied = true; }}
        />
    </div>
    <p role="status" class="text-sm text-foreground-muted">
        {copied ? 'Install command copied.' : 'Copy the command to your clipboard.'}
    </p>
</div>
~~~~

### Variants

~~~~svelte
<script lang="ts">
    import { CopyButton } from '@mielui/svelte/components/copy-button';
</script>

<div class="flex items-center gap-3">
    <CopyButton text="ghost variant" label="Ghost" />
    <CopyButton text="outline variant" label="Outline" variant="outline" />
    <CopyButton text="secondary variant" label="Secondary" variant="secondary" />
</div>
~~~~

For the rendered reference, visit [/docs/components/copy-button](/docs/components/copy-button).


---

Source: http://sveltekit-prerender/docs/components/data-table.md

# Data Table

Composable TanStack Table v9 presentation with native table semantics, sorting, filtering, selection, and pagination.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: pagination, _internal/utils, table, input, group, button, checkbox, dropdown-menu, popover, native-select, date-picker
- Shared utilities: utils.cn, utils.pressable, hugeicons-icon

## Install

~~~~sh
pnpm dlx @mielui/svelte add data-table
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| cell | Snippet<[Cell<TableFeatures, RowData, unknown>]> \| undefined | — | No | No |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| loading | boolean \| undefined | false | No | No |
| caption | string \| undefined | — | No | No |
| header | Snippet<[Header<TableFeatures, RowData, unknown>]> \| undefined | — | No | No |
| selectable | boolean \| undefined | false | No | No |
| rowLabel | ((row: Row<TableFeatures, RowData>) => string) \| undefined | — | No | No |
| empty | Snippet<[{ loading: boolean; }]> \| undefined | — | No | No |
| variant | "inset" \| "default" \| undefined | 'default' | No | No |
| children | Snippet<[DataTableState<TableFeatures, RowData>]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Body

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| cell | Snippet<[Cell<TableFeatures, RowData, unknown>]> \| undefined | — | No | No |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| loading | boolean \| undefined | false | No | No |
| selectable | boolean \| undefined | false | No | No |
| rowLabel | ((row: Row<TableFeatures, RowData>) => string) \| undefined | — | No | No |
| empty | Snippet<[{ loading: boolean; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Empty

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| columns | number | — | Yes | No |
| loading | boolean \| undefined | false | No | No |
| children | Snippet<[{ loading: boolean; }]> \| undefined | — | No | No |



### Filter

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| column | string | — | Yes | No |
| label | string | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| header | Snippet<[Header<TableFeatures, RowData, unknown>]> \| undefined | — | No | No |
| selectable | boolean \| undefined | false | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Pagination

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| loading | boolean \| undefined | false | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Selection

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| checked | boolean \| undefined | false | No | No |
| indeterminate | boolean \| undefined | false | No | No |
| disabled | boolean \| undefined | false | No | No |
| label | string | — | Yes | No |
| onCheckedChange | (checked: boolean) => void | — | Yes | No |



### Summary

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| children | Snippet<[DataTableState<TableFeatures, RowData>]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Toolbar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### View

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| loading | boolean \| undefined | false | No | No |
| selectable | boolean \| undefined | false | No | No |
| caption | string \| undefined | — | No | No |
| rowLabel | ((row: Row<TableFeatures, RowData>) => string) \| undefined | — | No | No |
| header | Snippet<[Header<TableFeatures, RowData, unknown>]> \| undefined | — | No | No |
| cell | Snippet<[Cell<TableFeatures, RowData, unknown>]> \| undefined | — | No | No |
| empty | Snippet<[{ loading: boolean; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### ColumnHeader

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| header | Header_Core<TableFeatures, RowData, unknown> & Header_ColumnResizing & Header_ColumnSizing | — | Yes | No |
| class | string \| undefined | — | No | No |



### Facet

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| filter | { column: string; label: string; editor?: Snippet<[{ value: unknown; setValue: (value: unknown) => void; }]> \| undefined; } & ({ type: "text"; placeholder?: string \| undefined; } \| { type: "select"; options: readonly { value: string; label: string; }[]; } \| { type: "number"; min?: number \| undefined; max?: number \| undefined; step?: number \| undefined; } \| { type: "date"; }) | — | Yes | No |
| open | boolean \| undefined | false | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| onRemove | (() => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Filters

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| filters | readonly DataTableFilterDefinition[] | — | Yes | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Sort

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| table | Table_Core<TableFeatures, RowData> & Table_CellSelection<TableFeatures, RowData> & Table_CellSpanning<TableFeatures, RowData> & Table_ColumnFaceting<TableFeatures, RowData> & Table_ColumnFiltering & Table_ColumnGrouping<TableFeatures, RowData> & Table_ColumnOrdering<TableFeatures, RowData> & Table_ColumnPinning<TableFeatures, RowData> & Table_ColumnResizing & Table_ColumnSizing & Table_ColumnVisibility<TableFeatures, RowData> & Table_GlobalFiltering<TableFeatures, RowData> & Table_RowExpanding<TableFeatures, RowData> & Table_RowPagination<TableFeatures, RowData> & Table_RowPinning<TableFeatures, RowData> & Table_RowSelection<TableFeatures, RowData> & Table_RowSorting<TableFeatures, RowData> | — | Yes | No |
| columns | readonly { id: string; label: string; }[] \| undefined | — | No | No |
| class | string \| undefined | — | No | No |



### Public types

~~~~ts
import type { Cell, Header, Row, RowData, Table, TableFeatures } from '@tanstack/svelte-table';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLInputAttributes, HTMLTableAttributes } from 'svelte/elements';
export type DataTableState<TFeatures extends TableFeatures, TData extends RowData> = {
    table: Table<TFeatures, TData>;
    rows: Row<TFeatures, TData>[];
    total: number;
    selected: number;
};
export type DataTableViewProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<
    HTMLTableAttributes,
    'children'
> & {
    table: Table<TFeatures, TData>;
    loading?: boolean;
    selectable?: boolean;
    caption?: string;
    rowLabel?: (row: Row<TFeatures, TData>) => string;
    header?: Snippet<[Header<TFeatures, TData, unknown>]>;
    cell?: Snippet<[Cell<TFeatures, TData, unknown>]>;
    empty?: Snippet<[{ loading: boolean }]>;
};
export type DataTableProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<
    HTMLAttributes<HTMLDivElement>,
    'children'
> &
    Pick<
        DataTableViewProps<TFeatures, TData>,
        'table' | 'loading' | 'selectable' | 'caption' | 'rowLabel' | 'header' | 'cell' | 'empty'
    > & {
        variant?: 'default' | 'inset';
        children?: Snippet<[DataTableState<TFeatures, TData>]>;
    };
export type DataTableHeaderProps<TFeatures extends TableFeatures, TData extends RowData> = Pick<
    DataTableViewProps<TFeatures, TData>,
    'table' | 'selectable' | 'header'
> &
    Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'>;
export type DataTableBodyProps<TFeatures extends TableFeatures, TData extends RowData> = Pick<
    DataTableViewProps<TFeatures, TData>,
    'table' | 'selectable' | 'loading' | 'cell' | 'empty' | 'rowLabel'
> &
    Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'>;
export type DataTableToolbarProps = HTMLAttributes<HTMLDivElement>;
export type DataTablePaginationProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<
    HTMLAttributes<HTMLElement>,
    'children'
> & {
    table: Table<TFeatures, TData>;
    loading?: boolean;
};
export type DataTableSummaryProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<
    HTMLAttributes<HTMLParagraphElement>,
    'children'
> & {
    table: Table<TFeatures, TData>;
    children?: Snippet<[DataTableState<TFeatures, TData>]>;
};
export type DataTableFilterProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<
    HTMLInputAttributes,
    'value' | 'type' | 'oninput' | 'checked' | 'files'
> & {
    table: Table<TFeatures, TData>;
    column: string;
    label: string;
};
export type DataTableEmptyProps = {
    class?: string;
    columns: number;
    loading?: boolean;
    children?: Snippet<[{ loading: boolean }]>;
};
export type DataTableSelectionProps = {
    class?: string;
    checked?: boolean;
    indeterminate?: boolean;
    disabled?: boolean;
    label: string;
    onCheckedChange: (checked: boolean) => void;
};
export { default as Root } from './data-table.svelte';
export { default as Body } from './data-table-body.svelte';
export { default as Empty } from './data-table-empty.svelte';
export { default as Filter } from './data-table-filter.svelte';
export { default as Header } from './data-table-header.svelte';
export { default as Pagination } from './data-table-pagination.svelte';
export { default as Selection } from './data-table-selection.svelte';
export { default as Summary } from './data-table-summary.svelte';
export { default as Toolbar } from './data-table-toolbar.svelte';
export { default as View } from './data-table-view.svelte';

export type DataTableFilterClause =
    | {
          type: 'text';
          operator: 'contains' | 'equals' | 'not';
          value: string;
      }
    | {
          type: 'select';
          operator: 'in' | 'notIn';
          value: string[];
      }
    | {
          type: 'number';
          operator: 'equals' | 'lt' | 'lte' | 'gt' | 'gte';
          value: number;
      }
    | {
          type: 'number';
          operator: 'between';
          value: [number | undefined, number | undefined];
      }
    | {
          type: 'date';
          operator: 'equals' | 'lt' | 'lte' | 'gt' | 'gte';
          value: string;
      }
    | {
          type: 'date';
          operator: 'between';
          value: [string | undefined, string | undefined];
      };
export type DataTableFilterDefinition = {
    column: string;
    label: string;
    editor?: Snippet<
        [
            {
                value: unknown;
                setValue: (value: unknown) => void;
            }
        ]
    >;
} & (
    | {
          type: 'text';
          placeholder?: string;
      }
    | {
          type: 'select';
          options: readonly {
              value: string;
              label: string;
          }[];
      }
    | {
          type: 'number';
          min?: number;
          max?: number;
          step?: number;
      }
    | { type: 'date' }
);
export type DataTableFiltersProps<TFeatures extends TableFeatures, TData extends RowData> = {
    table: Table<TFeatures, TData>;
    filters: readonly DataTableFilterDefinition[];
    children?: Snippet;
    class?: string;
};
export type DataTableFacetProps<TFeatures extends TableFeatures, TData extends RowData> = {
    table: Table<TFeatures, TData>;
    filter: DataTableFilterDefinition;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    onRemove?: () => void;
    class?: string;
};
export type DataTableSortProps<TFeatures extends TableFeatures, TData extends RowData> = {
    table: Table<TFeatures, TData>;
    columns?: readonly {
        id: string;
        label: string;
    }[];
    class?: string;
};
export type DataTableColumnHeaderProps<TFeatures extends TableFeatures, TData extends RowData> = {
    header: Header<TFeatures, TData, unknown>;
    class?: string;
};
export { default as ColumnHeader } from './data-table-column-header.svelte';
export { default as Facet } from './data-table-facet.svelte';
export { default as Filters } from './data-table-filters.svelte';
export { default as Sort } from './data-table-sort.svelte';
export { dataTableFilter } from './filter';
~~~~

## Examples

### Controlled

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import * as DataTable from '@mielui/svelte/components/data-table';
    import { createTable, createTableState, type SortingState } from '@tanstack/svelte-table';
    import { columns, features, members } from './data';

    const [sorting, setSorting] = createTableState<SortingState>([{ id: 'name', desc: false }]);
    let data = $state(members.slice(0, 3));
    const table = createTable({
        features,
        columns,
        get data() {
            return data;
        },
        getRowId: (member) => member.id,
        state: {
            get sorting() {
                return sorting();
            }
        },
        onSortingChange: setSorting
    });
</script>
<DataTable.Root {table} class="w-full">
    {#snippet children({ total })}
        <DataTable.Toolbar>
            <p class="text-sm font-medium">
                <span use:numberShuffle={{ value: total }}>{total}</span> team members
            </p>
            <Button variant="secondary" size="sm" onclick={() => { data = members; }}>
                Show all members
            </Button>
        </DataTable.Toolbar>
        <DataTable.View {table} caption="Team members" />
        <DataTable.Summary {table}>
            {#snippet children({ selected })}
                {selected} selected · Pagination omitted in this composition
            {/snippet}
        </DataTable.Summary>
    {/snippet}
</DataTable.Root>
~~~~

### Empty

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as DataTable from '@mielui/svelte/components/data-table';
    import { createTable } from '@tanstack/svelte-table';
    import { columns, features, members } from './data';

    let loading = $state(false);
    const table = createTable({
        features,
        columns,
        data: members,
        getRowId: (member) => member.id,
        initialState: { columnFilters: [{ id: 'name', value: 'No matching member' }] }
    });
</script>
<div class="flex w-full flex-col gap-4">
    <Button
        variant="secondary"
        size="sm"
        class="self-start"
        onclick={() => { loading = !loading; }}
    >
        {loading ? 'Show empty state' : 'Show loading state'}
    </Button>
    <DataTable.Root {table} {loading} caption="Filtered members" class="w-full">
        {#snippet empty({ loading })}
            <div class="flex flex-col items-center gap-3">
                <p>{loading ? 'Loading members…' : 'No members match this filter.'}</p>
                {#if !loading}
                    <Button
                        size="sm"
                        variant="secondary"
                        onclick={() => { table.resetColumnFilters(true); }}
                    >
                        Clear filter
                    </Button>
                {/if}
            </div>
        {/snippet}
    </DataTable.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import Badge from '@mielui/svelte/components/badge';
    import * as DataTable from '@mielui/svelte/components/data-table';
    import { createTable, FlexRender } from '@tanstack/svelte-table';
    import { columns, features, filters, members } from './data';

    const table = createTable({
        features,
        columns,
        data: members,
        getRowId: (member) => member.id,
        initialState: {
            columnVisibility: { joined: false },
            pagination: { pageIndex: 0, pageSize: 5 }
        }
    });
</script>
<DataTable.Root {table} class="w-full">
    {#snippet children()}
        <DataTable.Toolbar>
            <DataTable.Filters {table} {filters} class="min-w-0 flex-1">
                <DataTable.Filter
                    {table}
                    column="name"
                    label="Filter members by name"
                    placeholder="Filter members…"
                    class="min-w-0 flex-1"
                />
            </DataTable.Filters>
            <DataTable.Sort {table} class="ml-auto" />
        </DataTable.Toolbar>
        <DataTable.View
            {table}
            selectable
            caption="Workspace members"
            rowLabel={(row) => row.original.name}
        >
            {#snippet cell(cell)}
                {#if cell.column.id === 'role'}
                    <Badge variant="secondary">{String(cell.getValue())}</Badge>
                {:else if cell.column.id === 'projects'}
                    <span class="tabular-nums">{String(cell.getValue())}</span>
                {:else}
                    <FlexRender {cell} />
                {/if}
            {/snippet}
        </DataTable.View>
        <div class="flex flex-wrap items-center justify-between gap-3">
            <DataTable.Summary {table} />
            <DataTable.Pagination {table} />
        </div>
    {/snippet}
</DataTable.Root>
~~~~

### Inset

~~~~svelte
<script lang="ts">
    import Badge from '@mielui/svelte/components/badge';
    import * as DataTable from '@mielui/svelte/components/data-table';
    import { createTable, FlexRender } from '@tanstack/svelte-table';
    import { columns, features, filters, members } from './data';

    const table = createTable({
        features,
        columns,
        data: members,
        getRowId: (member) => member.id,
        initialState: {
            columnVisibility: { joined: false },
            pagination: { pageIndex: 0, pageSize: 5 }
        }
    });
</script>
<DataTable.Root {table} variant="inset" class="w-full">
    {#snippet children()}
        <DataTable.Toolbar>
            <DataTable.Filters {table} {filters} class="min-w-0 flex-1">
                <DataTable.Filter
                    {table}
                    column="name"
                    label="Filter members by name"
                    placeholder="Filter members…"
                    class="min-w-0 flex-1"
                />
            </DataTable.Filters>
            <DataTable.Sort {table} class="ml-auto" />
        </DataTable.Toolbar>
        <DataTable.View
            {table}
            selectable
            caption="Workspace members"
            rowLabel={(row) => row.original.name}
        >
            {#snippet cell(cell)}
                {#if cell.column.id === 'role'}
                    <Badge variant="secondary">{String(cell.getValue())}</Badge>
                {:else if cell.column.id === 'projects'}
                    <span class="tabular-nums">{String(cell.getValue())}</span>
                {:else}
                    <FlexRender {cell} />
                {/if}
            {/snippet}
        </DataTable.View>
        <div data-ui="data-table-footer" class="flex flex-wrap items-center justify-between gap-3">
            <DataTable.Summary {table} />
            <DataTable.Pagination {table} />
        </div>
    {/snippet}
</DataTable.Root>
~~~~

For the rendered reference, visit [/docs/components/data-table](/docs/components/data-table).


---

Source: http://sveltekit-prerender/docs/components/file-diff.md

# File Diff

Unified file diff with a path top bar, addition/deletion counts, dual line-number gutters, and per-row syntax highlighting via highlight.js with a built-in GitHub palette; theme="custom" skips the token colors for any highlight.js theme stylesheet.

- Package: `@mielui/svelte`
- Component version: `1.3.0`
- Depends on Mielui components: _internal/utils, _internal/highlight
- Shared utilities: components/_internal/inset-layout, hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add file-diff
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Filename

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| file | string \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### LineNumber

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | number \| null \| undefined | — | No | No |
| tone | FileDiffChangeType \| undefined | 'context' | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### PlusMinus

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| additions | number \| undefined | — | No | No |
| deletions | number \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| file | string \| undefined | '' | No | No |
| lang | string \| undefined | '' | No | No |
| additions | number \| undefined | — | No | No |
| deletions | number \| undefined | — | No | No |
| diff | FileDiffLine[] \| undefined | — | No | No |
| showLineNumbers | boolean \| undefined | true | No | No |
| theme | FileDiffTheme \| undefined | 'mielui' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Row

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| type | FileDiffChangeType \| undefined | 'context' | No | No |
| oldLine | number \| null \| undefined | — | No | No |
| newLine | number \| null \| undefined | — | No | No |
| code | string \| undefined | '' | No | No |
| lang | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### TopBar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| file | string \| undefined | — | No | No |
| additions | number \| undefined | — | No | No |
| deletions | number \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';

import Root from './file-diff.svelte';
import Content from './file-diff-content.svelte';
import Filename from './file-diff-filename.svelte';
import LineNumber from './file-diff-line-number.svelte';
import PlusMinus from './file-diff-plus-minus.svelte';
import Row from './file-diff-row.svelte';
import TopBar from './file-diff-top-bar.svelte';

export type FileDiffChangeType = 'context' | 'add' | 'remove';

export type FileDiffLine = {
    type: FileDiffChangeType;
    oldLineNumber?: number | null;
    newLineNumber?: number | null;
    content: string;
};

/**
 * Syntax paint for the highlighted row tokens.
 * - `mielui`: the built-in GitHub palette (light in light mode, dark in dark mode).
 * - `custom`: no token colors; load any `highlight.js/styles/*` theme instead.
 */
export type FileDiffTheme = 'mielui' | 'custom';

export type FileDiffContext = {
    lang: string;
    showLineNumbers: boolean;
    file: string;
    additions: number;
    deletions: number;
    /** Token paint; `custom` skips the built-in colors for a stock theme stylesheet. */
    theme: FileDiffTheme;
};

export type FileDiffRootProps = {
    /** File path shown in the top bar, e.g. "src/auth.ts". */
    file?: string;
    /** Highlight.js language id used for every row unless a row overrides it. */
    lang?: string;
    /** Addition count. Defaults to the number of `add` lines in `diff`. */
    additions?: number;
    /** Deletion count. Defaults to the number of `remove` lines in `diff`. */
    deletions?: number;
    /** High-level unified lines. When set, Root renders TopBar and Content itself. */
    diff?: FileDiffLine[];
    /** Render the old/new line-number gutters. */
    showLineNumbers?: boolean;
    /**
     * Syntax paint:
     * - `mielui` (default): the built-in GitHub palette.
     * - `custom`: no token colors; load any `highlight.js/styles/*` theme instead.
     */
    theme?: FileDiffTheme;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type FileDiffTopBarProps = {
    /** File path. Falls back to the Root `file` when omitted. */
    file?: string;
    /** Addition count. Falls back to the Root count when omitted. */
    additions?: number;
    /** Deletion count. Falls back to the Root count when omitted. */
    deletions?: number;
    /**
     * Trailing actions, pinned to the right edge. Passing children takes
     * over the row: the default filename and counts are omitted, so compose
     * them back explicitly with `Filename` and `PlusMinus` as needed.
     */
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type FileDiffFilenameProps = {
    /** File path. Falls back to the Root `file` when omitted. */
    file?: string;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type FileDiffPlusMinusProps = {
    /** Addition count. Falls back to the Root count when omitted. */
    additions?: number;
    /** Deletion count. Falls back to the Root count when omitted. */
    deletions?: number;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type FileDiffContentProps = {
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type FileDiffRowProps = {
    /** Row kind. Drives the tint, gutter bar, and sign. */
    type?: FileDiffChangeType;
    /** Old-file line number. Empty when nullish. */
    oldLine?: number | null;
    /** New-file line number. Empty when nullish. */
    newLine?: number | null;
    /** Raw source for the row. Highlighted with the Root (or row) language. */
    code?: string;
    /** Row-level language override. */
    lang?: string;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type FileDiffLineNumberProps = {
    /** Line number. Renders an empty gutter cell when nullish. */
    value?: number | null;
    /** Number tone. Rows pass their own type; standalone use defaults to context. */
    tone?: FileDiffChangeType;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;

export { Content, Filename, LineNumber, PlusMinus, Root, Row, TopBar };
export default Root;
~~~~

## Examples

### Compound

~~~~svelte
<script lang="ts">
    import { ArrowExpandIcon as Expand } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as FileDiff from '@mielui/svelte/components/file-diff';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<FileDiff.Root file="src/auth.ts" lang="ts" additions={3} deletions={1} class="max-w-2xl">
    <FileDiff.TopBar>
        <FileDiff.Filename />
        <FileDiff.PlusMinus />
        <Button variant="ghost" size="icon" class="size-7" aria-label="Expand diff">
            <HugeiconsIcon icon={Expand} size={14} />
        </Button>
    </FileDiff.TopBar>
    <FileDiff.Content>
        <FileDiff.Row
            type="context"
            oldLine={12}
            newLine={12}
            code={'export function getToken() {'}
        />
        <FileDiff.Row type="remove" oldLine={13} code="  return localStorage.token;" />
        <FileDiff.Row type="add" newLine={13} code={'  const t = cookies.get("session");'} />
        <FileDiff.Row type="add" newLine={14} code={'  if (!t) throw new Error("no session");'} />
        <FileDiff.Row type="add" newLine={15} code="  return t;" />
        <FileDiff.Row type="context" oldLine={14} newLine={16} code={'}'} />
    </FileDiff.Content>
</FileDiff.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import type { FileDiffLine } from '@mielui/svelte/components/file-diff';
    import * as FileDiff from '@mielui/svelte/components/file-diff';

    const diff: FileDiffLine[] = [
        {
            type: 'context',
            oldLineNumber: 12,
            newLineNumber: 12,
            content: 'export function getToken() {'
        },
        {
            type: 'remove',
            oldLineNumber: 13,
            content: '  return localStorage.token;'
        },
        {
            type: 'add',
            newLineNumber: 13,
            content: '  const t = cookies.get("session");'
        },
        {
            type: 'add',
            newLineNumber: 14,
            content: '  if (!t) throw new Error("no session");'
        },
        {
            type: 'add',
            newLineNumber: 15,
            content: '  return t;'
        },
        {
            type: 'context',
            oldLineNumber: 14,
            newLineNumber: 16,
            content: '}'
        }
    ];
</script>

<FileDiff.Root file="src/auth.ts" lang="ts" {diff} class="max-w-2xl" />
~~~~

### Live

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import type { FileDiffLine } from '@mielui/svelte/components/file-diff';
    import * as FileDiff from '@mielui/svelte/components/file-diff';

    let revised = $state(false);
    const diff = $derived<FileDiffLine[]>(
        revised
            ? [
                  { type: 'remove', oldLineNumber: 1, content: 'const retries = 1;' },
                  { type: 'add', newLineNumber: 1, content: 'const retries = 3;' }
              ]
            : [{ type: 'add', newLineNumber: 1, content: 'const retries = 1;' }]
    );
</script>

<div class="flex w-full max-w-2xl flex-col gap-4">
    <Button variant="outline" class="w-fit" onclick={() => { revised = !revised; }}>
        {revised ? 'Show original patch' : 'Revise patch'}
    </Button>
    <FileDiff.Root file="src/config.ts" lang="ts" {diff} />
</div>
~~~~

### Stacked

~~~~svelte
<script lang="ts">
    import type { FileDiffLine } from '@mielui/svelte/components/file-diff';
    import * as FileDiff from '@mielui/svelte/components/file-diff';

    const authDiff: FileDiffLine[] = [
        {
            type: 'context',
            oldLineNumber: 12,
            newLineNumber: 12,
            content: 'export function getToken() {'
        },
        {
            type: 'remove',
            oldLineNumber: 13,
            content: '  return localStorage.token;'
        },
        {
            type: 'add',
            newLineNumber: 13,
            content: '  const t = cookies.get("session");'
        },
        {
            type: 'add',
            newLineNumber: 14,
            content: '  if (!t) throw new Error("no session");'
        },
        {
            type: 'add',
            newLineNumber: 15,
            content: '  return t;'
        },
        {
            type: 'context',
            oldLineNumber: 14,
            newLineNumber: 16,
            content: '}'
        }
    ];

    const stylesDiff: FileDiffLine[] = [
        {
            type: 'context',
            oldLineNumber: 4,
            newLineNumber: 4,
            content: '  color: var(--color-foreground);'
        },
        {
            type: 'remove',
            oldLineNumber: 5,
            content: '  background: #f4f4f0;'
        },
        {
            type: 'add',
            newLineNumber: 5,
            content: '  background: var(--color-card);'
        },
        {
            type: 'context',
            oldLineNumber: 6,
            newLineNumber: 6,
            content: '  border: 1px solid var(--color-border);'
        }
    ];
</script>

<div class="flex w-full max-w-2xl flex-col gap-4">
    <FileDiff.Root file="src/auth.ts" lang="ts" diff={authDiff} />
    <FileDiff.Root file="src/styles.css" lang="css" diff={stylesDiff} />
</div>
~~~~

### Without Line Numbers

~~~~svelte
<script lang="ts">
    import type { FileDiffLine } from '@mielui/svelte/components/file-diff';
    import * as FileDiff from '@mielui/svelte/components/file-diff';

    const diff: FileDiffLine[] = [
        {
            type: 'context',
            oldLineNumber: 4,
            newLineNumber: 4,
            content: '  color: var(--color-foreground);'
        },
        {
            type: 'remove',
            oldLineNumber: 5,
            content: '  background: #f4f4f0;'
        },
        {
            type: 'add',
            newLineNumber: 5,
            content: '  background: var(--color-card);'
        },
        {
            type: 'context',
            oldLineNumber: 6,
            newLineNumber: 6,
            content: '  border: 1px solid var(--color-border);'
        }
    ];
</script>

<FileDiff.Root file="src/styles.css" lang="css" {diff} showLineNumbers={false} class="max-w-2xl" />
~~~~

For the rendered reference, visit [/docs/components/file-diff](/docs/components/file-diff).


---

Source: http://sveltekit-prerender/docs/components/markdown.md

# Markdown

Safe GFM markdown renderer for dense agent output, with token-based rendering and Mielui code blocks.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils, code-block, typography
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add markdown
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Markdown

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| content | string | — | Yes | No |
| streaming | boolean \| undefined | false | No | No |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { HTMLAttributes } from 'svelte/elements';
import Markdown from './markdown.svelte';

export type MarkdownProps = {
    /** Markdown source parsed with marked's GFM tokenizer. Raw HTML is rendered as text. */
    content: string;
    /** Marks an in-progress response as busy and shows a restrained visual caret. */
    streaming?: boolean;
    class?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export { Markdown };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { Markdown } from '@mielui/svelte/components/markdown';

    const report = [
        '## Edge cache rollout review',
        '',
        'The canary reduced origin traffic by **38%** while keeping `cache_hit_age` within the expected range. [Open the rollout runbook](https://example.com/runbooks/edge-cache) for the full procedure.',
        '',
        '> Recommendation: continue to 50% traffic, but keep image transforms outside the cache until the key audit is complete.',
        '',
        '### Regional health',
        '',
        '| Region | Hit rate | p95 |',
        '| :--- | ---: | ---: |',
        '| iad1 | 91% | 142 ms |',
        '| fra1 | 88% | 156 ms |',
        '| sin1 | 86% | 171 ms |',
        '',
        '### Rollout tasks',
        '',
        '- [x] Confirm cache headers at the edge',
        '- [x] Compare origin error rates',
        '- [ ] Audit image transformation keys',
        '',
        '```ts',
        'const rollout = await edgeCache.promote({',
        '  traffic: 0.5,',
        "  regions: ['iad1', 'fra1', 'sin1']",
        '});',
        '```'
    ].join('\n');
</script>

<Markdown content={report} class="w-full max-w-2xl" />
~~~~

### Safe Html

~~~~svelte
<script lang="ts">
    import { ShieldCheckIcon as ShieldCheck } from '@hugeicons/core-free-icons';
    import { Markdown } from '@mielui/svelte/components/markdown';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const untrustedOutput = [
        '## Imported model output',
        '',
        `<script>document.body.textContent = "changed";<${'/'}script>`,
        '',
        '<button onclick="sendSecrets()">Approve access</button>',
        '',
        '[Open internal report](javascript:sendSecrets())'
    ].join('\n');
</script>

<div class="w-full max-w-2xl rounded-[var(--radius-xl)] border border-border bg-panel p-5 sm:p-6">
    <div class="mb-5 flex items-start gap-3 border-b border-border pb-4">
        <div
            class="flex size-8 shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-secondary text-foreground-muted"
        >
            <HugeiconsIcon icon={ShieldCheck} size={16} strokeWidth={1.8} aria-hidden="true" />
        </div>
        <div>
            <p class="font-[var(--font-weight-label)] text-foreground">
                Untrusted content stays inert
            </p>
            <p class="mt-1 text-sm leading-6 text-foreground-muted">
                HTML is shown as source text. Unsafe URL schemes are not turned into links.
            </p>
        </div>
    </div>
    <Markdown content={untrustedOutput} />
</div>
~~~~

### Streaming

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Markdown } from '@mielui/svelte/components/markdown';
    import { onDestroy } from 'svelte';

    const response = `## Incident update

The elevated error rate is isolated to image transformations in \`fra1\`. Cached images remain available, and requests in other regions are healthy.

### What we checked

- Cache hit rate remains above **98%**.
- Origin latency is within the normal range.
- Transformation workers restart when memory reaches their limit.

| Signal | Before | Current |
| --- | --- | --- |
| Error rate | 4.2% | 0.8% |
| Worker concurrency | 12 | 8 |
| Queue age | 42 seconds | 9 seconds |

### Apply the change

\`\`\`ts
const worker = {
    concurrency: 8,
    retries: 2,
    timeout: 30_000
};
\`\`\`

> Keep the previous configuration available until the queue has drained.

### Next checks

1. Compare the next five minutes against the baseline.
2. Confirm that worker restarts have stopped.
3. Restore concurrency gradually after memory use stabilizes.

**Owner:** Platform team. The incident stays open until the error rate is back below 0.1%.
    `;
    let content = $state('');
    let streaming = $state(false);
    let timer: ReturnType<typeof setInterval> | undefined;

    function stop() {
        clearInterval(timer);
        streaming = false;
    }

    function start() {
        stop();
        content = '';
        streaming = true;
        timer = setInterval(() => {
            content = response.slice(0, content.length + 28);
            if (content.length === response.length) {
                stop();
            }
        }, 45);
    }

    onDestroy(stop);
</script>

<div class="w-full max-w-2xl space-y-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <p role="status" class="text-sm text-foreground-muted">
            {streaming ? 'Receiving response' : content.length === response.length ? 'Response complete' : content ? 'Stream stopped' : 'Start a response to watch Markdown arrive'}
        </p>
        <Button variant="secondary" onclick={streaming ? stop : start}>
            {streaming ? 'Stop stream' : content ? 'Replay response' : 'Start response'}
        </Button>
    </div>
    <div
        class="max-h-112 min-h-52 overflow-y-auto rounded-[var(--radius-xl)] border-[length:var(--border-size)] border-border bg-card p-5"
    >
        <Markdown {content} {streaming} />
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/markdown](/docs/components/markdown).


---

Source: http://sveltekit-prerender/docs/components/notch.md

# Notch

A nonmodal panel attached to a viewport edge, with spring motion and composable content.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button, typography
- Shared utilities: utils.cn, utils.createContext, transition, components/_internal/surface, components/_internal/button-attributes

## Install

~~~~sh
pnpm dlx @mielui/svelte add notch
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Accessory

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Close

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Peek

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |



### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| open | boolean \| undefined | false | No | Yes |
| mode | "triggered" \| "peek" \| undefined | 'triggered' | No | No |
| duration | number \| undefined | 5000 | No | No |
| side | "left" \| "right" \| "top" \| "bottom" \| undefined | 'top' | No | No |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### SideAction

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| disabled | boolean \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | 'panel' | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | 'icon' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| unstyled | boolean \| undefined | — | No | No |
| status | ButtonStatus \| undefined | — | No | No |
| loading | boolean \| undefined | — | No | No |
| loadingLabel | string \| undefined | — | No | No |
| successLabel | string \| undefined | — | No | No |
| errorLabel | string \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| onkeydown | ((event: KeyboardEvent) => void) \| undefined | — | No | No |
| href | string \| undefined | — | No | No |
| side | "start" \| "end" \| undefined | 'end' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| level | HeadingLevel \| undefined | 2 | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import type { ButtonProps } from '../../components/button';
import type { HeadingLevel } from '../../components/typography';
import Root from './notch.svelte';
import Accessory from './notch-accessory.svelte';
import Actions from './notch-actions.svelte';
import Close from './notch-close.svelte';
import Content from './notch-content.svelte';
import Description from './notch-description.svelte';
import Header from './notch-header.svelte';
import Peek from './notch-peek.svelte';
import SideAction from './notch-side-action.svelte';
import Title from './notch-title.svelte';

export type NotchProps = {
    open?: boolean;
    mode?: 'triggered' | 'peek';
    duration?: number;
    side?: 'top' | 'bottom' | 'left' | 'right';
    surface?: 'solid' | 'glass';
    children?: Snippet;
};
export type NotchSideActionProps = ButtonProps & { side?: 'start' | 'end' };
export type NotchPeekProps = {
    children?: Snippet;
};
export type NotchContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'popover'>;
export type NotchHeaderProps = HTMLAttributes<HTMLDivElement>;
export type NotchTitleProps = HTMLAttributes<HTMLHeadingElement> & {
    level?: HeadingLevel;
};
export type NotchDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
export type NotchAccessoryProps = HTMLAttributes<HTMLDivElement>;
export type NotchActionsProps = HTMLAttributes<HTMLDivElement>;
export type NotchCloseProps = HTMLButtonAttributes;
export { Accessory, Actions, Close, Content, Description, Header, Peek, Root, SideAction, Title };
~~~~

## Examples

### Activity

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import * as Notch from '@mielui/svelte/components/notch';

    let open = $state(false);
    let expanded = $state(false);
    const files = [
        { name: 'Revenue.csv', size: '42 KB' },
        { name: 'Subscribers.csv', size: '18 KB' },
        { name: 'Summary.pdf', size: '96 KB' }
    ];

    function openActivity() {
        open = true;
    }

    function toggleExpanded() {
        expanded = !expanded;
    }
</script>
<Button class="mt-24" onclick={openActivity}>Show export activity</Button>
<Notch.Root bind:open side="top" duration={0}>
    <Notch.SideAction
        side="end"
        aria-label={expanded ? 'Hide export files' : 'Show export files'}
        aria-expanded={expanded}
        onclick={toggleExpanded}
    >
        <svg
            aria-hidden="true"
            viewBox="0 0 24 24"
            class="size-4"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
        >
            <path d={expanded ? 'M5 12h14' : 'M5 12h14M12 5v14'} />
        </svg>
    </Notch.SideAction>
    <Notch.Content aria-label="Export activity" class={expanded ? 'w-112 gap-4' : 'w-84 gap-3'}>
        <div class="flex items-center gap-3">
            <Gauge value={100} size={36} tone="success" label="Export complete" />
            <Notch.Header class="min-w-0 flex-1 gap-0.5 pr-0">
                <Notch.Title class="text-sm">Export ready</Notch.Title>
                <Notch.Description class="text-xs">3 reports · 156 KB</Notch.Description>
            </Notch.Header>
        </div>
        {#if expanded}
            <ul class="divide-y divide-border text-sm">
                {#each files as file (file.name)}
                    <li class="flex items-center justify-between gap-4 py-2">
                        <span>{file.name}</span>
                        <span class="text-xs tabular-nums text-foreground-muted">{file.size}</span>
                    </li>
                {/each}
            </ul>
        {/if}
    </Notch.Content>
    <Notch.Accessory
        class="rounded-full bg-card px-2 py-1 text-xs tabular-nums text-foreground-muted shadow-[var(--elevation-control-edge)]"
        aria-label="3 of 3 files exported"
    >
        3 of 3
    </Notch.Accessory>
</Notch.Root>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import * as Notch from '@mielui/svelte/components/notch';

    let open = $state(false);
    function showGlass() {
        open = true;
    }
</script>
<Button variant="secondary" onclick={showGlass}>Show glass notch</Button>
<Notch.Root bind:open surface="glass" side="top">
    <Notch.Content
        aria-label="Workspace usage"
        class="w-80 flex-row items-center justify-between gap-4 px-8 py-5"
    >
        <Notch.Header class="gap-1 pr-0">
            <Notch.Title class="text-xs text-foreground-muted">Usage</Notch.Title>
        </Notch.Header>
        <Gauge value={41} size={40} label="Storage used" />
        <Notch.Description class="text-xs">Storage</Notch.Description>
    </Notch.Content>
</Notch.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import * as Notch from '@mielui/svelte/components/notch';

    let open = $state(false);
    let side = $state<'top' | 'bottom' | 'left' | 'right'>('top');
    const sides = ['top', 'bottom', 'left', 'right'] as const;
    const lateral = $derived(side === 'left' || side === 'right');

    function show(value: typeof side) {
        side = value;
        open = true;
    }
</script>

<div class="flex flex-wrap justify-center gap-2">
    {#each sides as position (position)}
        <Button variant="secondary" onclick={() => show(position)}>
            {position[0].toUpperCase() + position.slice(1)}
        </Button>
    {/each}
</div>
<Notch.Root bind:open {side}>
    <Notch.Content
        aria-label="Files synchronized"
        class={lateral ? 'w-28 min-h-64 items-center justify-center gap-5 px-4 py-7 text-center' : 'w-80 flex-row items-center gap-3 px-7 py-4'}
    >
        <Gauge value={100} size={36} tone="success" label="Sync complete" />
        <Notch.Header class={lateral ? 'gap-0.5 pr-0' : 'min-w-0 flex-1 gap-0.5 pr-6'}>
            <Notch.Title class="text-sm">{lateral ? 'Synced' : 'All synced'}</Notch.Title>
            <Notch.Description class="text-xs">Just now</Notch.Description>
        </Notch.Header>
        {#if lateral}
            <div class="flex flex-col items-center gap-2">
                <Gauge value={41} size={36} label="Storage used" />
                <span class="text-xs text-foreground-muted">Storage</span>
            </div>
        {/if}
    </Notch.Content>
</Notch.Root>
~~~~

### Peek

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import * as Notch from '@mielui/svelte/components/notch';

    let enabled = $state(false);
    function togglePeek() {
        enabled = !enabled;
    }
</script>

<Button variant="secondary" onclick={togglePeek}>
    {enabled ? 'Remove activity rail' : 'Pin activity rail'}
</Button>
{#if enabled}
    <Notch.Root mode="peek" side="bottom">
        <Notch.Content
            aria-label="Workspace activity"
            class="w-80 flex-row items-center justify-around gap-8 px-8 py-5 text-center"
        >
            <div class="flex flex-col items-center gap-2">
                <Gauge value={72} size={40} label="Upload progress" />
                <span class="text-xs text-foreground-muted">Uploads</span>
            </div>
            <div class="flex flex-col items-center gap-2">
                <Gauge value={41} size={40} label="Storage used" tone="success" />
                <span class="text-xs text-foreground-muted">Storage</span>
            </div>
        </Notch.Content>
    </Notch.Root>
{/if}
~~~~

For the rendered reference, visit [/docs/components/notch](/docs/components/notch).


---

Source: http://sveltekit-prerender/docs/components/reorder-list.md

# Reorder List

Accessible sortable list with pointer dragging, keyboard grab and move, cancellation, and commit announcements.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add reorder-list
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Handle

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| id | string | — | Yes | No |
| label | string | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### ReorderList

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| items | unknown[] | — | Yes | Yes |
| getId | (item: unknown) => string | — | Yes | No |
| getLabel | (item: unknown) => string | — | Yes | No |
| children | Snippet<[unknown]> \| undefined | — | No | No |
| row | Snippet<[unknown]> \| undefined | — | No | No |
| label | string | — | Yes | No |
| disabled | boolean \| undefined | false | No | No |
| onReorder | ((items: unknown[]) => void) \| undefined | — | No | No |
| onCommit | ((items: unknown[]) => void) \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import ReorderList from './reorder-list.svelte';
import Content from './reorder-list-content.svelte';
import Handle from './reorder-list-handle.svelte';
import Item from './reorder-list-item.svelte';

export type ReorderListProps<T> = {
    items: T[];
    getId: (item: T) => string;
    getLabel: (item: T) => string;
    children?: Snippet<[T]>;
    row?: Snippet<[T]>;
    label: string;
    disabled?: boolean;
    onReorder?: (items: T[]) => void;
    onCommit?: (items: T[]) => void;
    class?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ReorderListItemProps = HTMLAttributes<HTMLDivElement> & {
    id: string;
    label: string;
};
export type ReorderListHandleProps = Omit<HTMLButtonAttributes, 'type'>;
export type ReorderListContentProps = HTMLAttributes<HTMLDivElement>;
export { Content, Handle, Item, ReorderList, ReorderList as Root };
export default ReorderList;
~~~~

## Examples

### Handles

~~~~svelte
<script lang="ts">
    import * as ReorderList from '@mielui/svelte/components/reorder-list';

    let items = $state([
        { id: 'brief', name: 'Project brief' },
        { id: 'design', name: 'Design review' },
        { id: 'release', name: 'Release notes' }
    ]);
</script>
<ReorderList.Root
    bind:items
    getId={(item) => item.id}
    getLabel={(item) => item.name}
    label="Project documents"
    class="w-full max-w-sm"
>
    {#snippet row(item)}
        <ReorderList.Item id={item.id} label={item.name}>
            <ReorderList.Content>{item.name}</ReorderList.Content>
            <ReorderList.Handle />
        </ReorderList.Item>
    {/snippet}
</ReorderList.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { ReorderList } from '@mielui/svelte/components/reorder-list';

    type AgendaItem = { id: string; name: string; duration: string };
    const initial: AgendaItem[] = [
        { id: 'opening', name: 'Opening remarks', duration: '5 min' },
        { id: 'roadmap', name: 'Roadmap review', duration: '15 min' },
        { id: 'critique', name: 'Design critique', duration: '20 min' },
        { id: 'questions', name: 'Open questions', duration: '10 min' }
    ];
    let items = $state([...initial]);
</script>

<div class="w-full max-w-md">
    <div class="mb-3 flex justify-end">
        <Button size="md" variant="ghost" onclick={() => (items = [...initial])}>Reset</Button>
    </div>
    <ReorderList
        bind:items
        getId={(item) => item.id}
        getLabel={(item) => item.name}
        label="Meeting agenda"
    >
        {#snippet children(item)}
            <span class="flex min-w-0 items-center justify-between gap-4">
                <span class="truncate text-sm font-medium">{item.name}</span>
                <span class="shrink-0 text-xs tabular-nums text-foreground-muted">
                    {item.duration}
                </span>
            </span>
        {/snippet}
    </ReorderList>
    <p class="mt-3 text-xs leading-relaxed text-foreground-muted">
        Drag a row, or focus it and press Space to grab it. Arrow keys move; Escape cancels.
    </p>
</div>
~~~~

For the rendered reference, visit [/docs/components/reorder-list](/docs/components/reorder-list).


---

Source: http://sveltekit-prerender/docs/components/show-more.md

# Show More

Clips text or composes separate preview, full-content, and trigger snippets for an accessible disclosure.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add show-more
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### ShowMore

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| lines | number \| undefined | 3 | No | No |
| maxHeight | number \| undefined | 320 | No | No |
| defaultExpanded | boolean \| undefined | false | No | No |
| expanded | boolean \| undefined | defaultExpanded | No | Yes |
| moreLabel | string \| undefined | 'Show more' | No | No |
| lessLabel | string \| undefined | 'Show less' | No | No |
| label | string \| undefined | 'Details' | No | No |
| onExpandedChange | ((expanded: boolean) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| preview | Snippet<[]> \| undefined | — | No | No |
| trigger | Snippet<[{ expanded: boolean; props: Pick<HTMLButtonAttributes, "id" \| "aria-controls" \| "aria-expanded" \| "onclick" \| "type">; }]> \| undefined | — | No | No |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import ShowMore from './show-more.svelte';

export type ShowMoreProps = {
    /** Number of visible text lines while collapsed. */
    lines?: number;
    /** Maximum expanded height before the content becomes scrollable. */
    maxHeight?: number;
    /** Initial expanded state when `expanded` is not bound. */
    defaultExpanded?: boolean;
    /** Bindable disclosure state. */
    expanded?: boolean;
    moreLabel?: string;
    lessLabel?: string;
    /** Accessible name for the expanded scroll region when the content is capped. */
    label?: string;
    onExpandedChange?: (expanded: boolean) => void;
    /** Full content. With preview, this subtree is hidden and inert while collapsed. */
    children?: Snippet;
    /** Separate collapsed content for disclosures containing interactive controls. */
    preview?: Snippet;
    /** Custom control. Forward props to its native button to preserve disclosure semantics. */
    trigger?: Snippet<
        [
            {
                expanded: boolean;
                props: Pick<
                    HTMLButtonAttributes,
                    'type' | 'id' | 'aria-expanded' | 'aria-controls' | 'onclick'
                >;
            }
        ]
    >;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export { ShowMore };
export default ShowMore;
~~~~

## Examples

### Capped

~~~~svelte
<script lang="ts">
    import { ShowMore } from '@mielui/svelte/components/show-more';

    const entries = [
        '09:00 — Paused scheduled reports and confirmed the latest backup.',
        '09:03 — Copied project records into the new workspace.',
        '09:06 — Verified uploaded files against their stored checksums.',
        '09:08 — Restored team roles and notification preferences.',
        '09:11 — Ran a sample export and checked the downloaded report.',
        '09:14 — Resumed scheduled jobs. Workspace owners can continue editing.'
    ];
</script>

<ShowMore lines={2} maxHeight={112} label="Migration activity">
    <div class="flex flex-col gap-2">
        {#each entries as entry (entry)}
            <p>{entry}</p>
        {/each}
    </div>
</ShowMore>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { ShowMore } from '@mielui/svelte/components/show-more';

    const paragraphs = [
        'The workspace migration is scheduled for Tuesday at 09:00 UTC. Your projects, comments, and uploaded files will move together. Read-only access remains available during the transfer.',
        'Before the migration, export any reports needed for the morning meeting. Scheduled jobs will pause for up to fifteen minutes and resume after the new workspace passes its health checks.',
        'If a check fails, the team will restore the previous workspace and notify its owners. Existing links will continue to work after the transfer.'
    ];
</script>

<div class="w-full max-w-md">
    <ShowMore lines={2} label="Migration details">
        <div class="flex flex-col gap-2">
            {#each paragraphs as paragraph (paragraph)}
                <p>{paragraph}</p>
            {/each}
        </div>
    </ShowMore>
</div>
~~~~

### Interactive

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { ShowMore } from '@mielui/svelte/components/show-more';
</script>

<ShowMore label="Project details" class="w-full max-w-lg">
    {#snippet preview()}
        <p>Project details include the setup guide and support contact.</p>
    {/snippet}
    {#snippet trigger({ expanded, props })}
        <Button
            {...props}
            onclick={(event) => {
                if (event.currentTarget instanceof HTMLButtonElement) {
                    props.onclick?.(event as MouseEvent & { currentTarget: HTMLButtonElement });
                }
            }}
            variant="outline"
            class="mt-3"
        >
            {expanded ? 'Hide project details' : 'View project details'}
        </Button>
    {/snippet}
    <div class="flex flex-col gap-3">
        <p>
            Use the setup guide to configure your workspace, then contact support if you need help.
        </p>
        <div class="flex flex-wrap gap-2">
            <Button href="/docs/installation" variant="outline">Setup guide</Button>
            <Button href="mailto:support@example.com" variant="ghost">Contact support</Button>
        </div>
    </div>
</ShowMore>
~~~~

For the rendered reference, visit [/docs/components/show-more](/docs/components/show-more).


---

Source: http://sveltekit-prerender/docs/components/task-steps.md

# Task Steps

Ordered task progress with pending, active, completed, and failed states plus settled screen-reader announcements.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, spinner
- Shared utilities: utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add task-steps
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Indicator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| status | TaskStepStatus \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| status | TaskStepStatus \| undefined | 'pending' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### List

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Meta

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Summary

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[TaskStepsState]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### TaskSteps

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[TaskStepsState]> \| undefined | — | No | No |
| steps | TaskStep[] | — | Yes | No |
| current | number | — | Yes | No |
| failed | boolean \| undefined | false | No | No |
| label | string \| undefined | 'Task progress' | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import TaskSteps from './task-steps.svelte';
import Indicator from './task-steps-indicator.svelte';
import Item from './task-steps-item.svelte';
import Label from './task-steps-label.svelte';
import List from './task-steps-list.svelte';
import Meta from './task-steps-meta.svelte';
import Summary from './task-steps-summary.svelte';

export type TaskStep = {
    id: string;
    label: string;
    meta?: string;
};

export type TaskStepStatus = 'pending' | 'active' | 'done' | 'error';

export type TaskStepsProps = {
    children?: Snippet<[TaskStepsState]>;
    steps: TaskStep[];
    current: number;
    failed?: boolean;
    label?: string;
    class?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type TaskStepsState = {
    rows: (TaskStep & { status: TaskStepStatus })[];
    current: number;
    completed: number;
    total: number;
    failed: boolean;
    complete: boolean;
    sentence: string;
};
export type TaskStepsListProps = HTMLAttributes<HTMLOListElement>;
export type TaskStepsItemProps = HTMLAttributes<HTMLLIElement> & { status?: TaskStepStatus };
export type TaskStepsIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
    status?: TaskStepStatus;
};
export type TaskStepsLabelProps = HTMLAttributes<HTMLSpanElement>;
export type TaskStepsMetaProps = HTMLAttributes<HTMLSpanElement>;
export type TaskStepsSummaryProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
    children?: Snippet<[TaskStepsState]>;
};
export { Indicator, Item, Label, List, Meta, Summary, TaskSteps, TaskSteps as Root };
export default TaskSteps;
~~~~

## Examples

### Bare

~~~~svelte
<script lang="ts">
    import { type TaskStep, TaskSteps } from '@mielui/svelte/components/task-steps';

    const steps: TaskStep[] = [
        { id: 'queue', label: 'Queued', meta: '0.2s' },
        { id: 'build', label: 'Building', meta: '8.1s' },
        { id: 'checks', label: 'Running checks', meta: '3.4s' },
        { id: 'deploy', label: 'Deploying', meta: '5.0s' }
    ];
</script>

<div class="w-full max-w-sm">
    <TaskSteps {steps} current={2} label="Deploy progress" />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Card from '@mielui/svelte/components/card';
    import { type TaskStep, TaskSteps } from '@mielui/svelte/components/task-steps';
    import { onMount } from 'svelte';

    const steps: TaskStep[] = [
        { id: 'queue', label: 'Queued', meta: '0.2s' },
        { id: 'build', label: 'Building', meta: '8.1s' },
        { id: 'checks', label: 'Running checks', meta: '3.4s' },
        { id: 'deploy', label: 'Deploying', meta: '5.0s' }
    ];
    let current = $state(0);
    let timer: ReturnType<typeof setInterval> | undefined;

    onMount(() => {
        timer = setInterval(() => {
            current += 1;
            if (current >= steps.length) {
                clearInterval(timer);
            }
        }, 900);
        return () => clearInterval(timer);
    });
</script>

<Card.Root class="w-full max-w-sm">
    <Card.Header>
        <Card.Title>Deploy release</Card.Title>
    </Card.Header>
    <Card.Content>
        <TaskSteps {steps} {current} label="Deploy progress" />
    </Card.Content>
</Card.Root>
~~~~

### Retry

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { TaskSteps } from '@mielui/svelte/components/task-steps';

    const steps = [
        { id: 'upload', label: 'Upload files' },
        { id: 'validate', label: 'Validate records' },
        { id: 'publish', label: 'Publish report' }
    ];
    let current = $state(1);
    let failed = $state(true);

    function advance() {
        if (failed) {
            failed = false;
        } else {
            current = Math.min(current + 1, steps.length);
        }
    }
</script>
<div class="w-full max-w-sm space-y-4">
    <TaskSteps {steps} {current} {failed} label="Report import" />
    <p role="status" class="text-sm text-foreground-muted">
        {failed ? 'Validation failed. Correct the source file, then retry this step.' : current === steps.length ? 'Report published.' : 'Validation can continue.'}
    </p>
    <div class="flex gap-2">
        <Button onclick={advance} disabled={current === steps.length}>
            {failed ? 'Retry validation' : 'Complete step'}
        </Button>
        <Button variant="secondary" onclick={() => { current = 1; failed = true; }}>Reset</Button>
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/task-steps](/docs/components/task-steps).


---

Source: http://sveltekit-prerender/docs/components/toast.md

# Toast

Toast notification system with body-portaled Toaster, free-function toast() API, and a shared client stack (SSR-safe).

- Package: `@mielui/svelte`
- Component version: `3.0.0`
- Depends on Mielui components: _internal/utils, button, notch
- Shared utilities: components/_internal/inset-layout, components/_internal/button-attributes, components/_internal/surface, hugeicons-icon, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add toast
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Action

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| action | ToastAction | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Close

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Icon

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| toast | Toast | — | Yes | No |
| surface | "solid" \| "glass" \| undefined | toast.surface | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Toaster

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "default" \| "notch" \| undefined | 'default' | No | No |
| side | "left" \| "right" \| "top" \| "bottom" \| undefined | 'top' | No | No |



### Public types

~~~~ts
import { getToastUIState, toast } from './lib.svelte';
import * as Toast from './parts';
import Toaster from './toaster.svelte';

export type {
    Toast as ToastType,
    ToastAction,
    ToastFn,
    ToastState,
    ToastUIState
} from './lib.svelte';
export { Action, Actions, Close, Content, Footer, Icon, Root, Title } from './parts';
export { getToastUIState, Toast, Toaster, toast };
~~~~

## Examples

### Actions

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { toast } from '@mielui/svelte/components/toast';
</script>

<Button
    onclick={() => {
    toast({
        title: 'Changes ready',
        description: 'Your theme is saved as a draft. Apply it to the workspace when you are ready.',
        persistent: true,
        actions: [
            { label: 'Discard', callback: () => {
                toast.info('Draft discarded');
            } },
            { label: 'Apply', variant: 'primary', callback: () => {
                toast.success('Theme applied');
            } }
        ]
    });
}}
>
    Show action toast
</Button>
~~~~

### All Types

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { toast } from '@mielui/svelte/components/toast';
</script>

<div class="flex flex-wrap gap-2">
    <Button
        onclick={() =>
            toast({ title: 'Heads up', description: 'A neutral toast.', type: 'default' })}
    >
        Default
    </Button>
    <Button
        onclick={() =>
            toast.success('Profile updated', { description: 'Your changes have been saved.' })}
    >
        Success
    </Button>
    <Button
        onclick={() =>
            toast.error('Request failed', { description: 'Could not connect to the server.' })}
    >
        Error
    </Button>
    <Button
        onclick={() =>
            toast.warning('Storage almost full', { description: 'You have 200 MB remaining.' })}
    >
        Warning
    </Button>
    <Button onclick={() => toast.info('New version', { description: 'Refresh to update.' })}>
        Info
    </Button>
</div>
~~~~

### Composition

~~~~svelte
<script lang="ts">
    import { Toast } from '@mielui/svelte/components/toast';
</script>

<div class="w-full max-w-sm">
    <Toast.Root toast={{ title: 'Draft saved', type: 'success' }}>
        <Toast.Content>
            Your theme is saved locally. You can keep editing before publishing.
        </Toast.Content>
        <Toast.Footer>
            <Toast.Icon />
            <Toast.Title />
        </Toast.Footer>
    </Toast.Root>
</div>
~~~~

### Glass

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { toast } from '@mielui/svelte/components/toast';
</script>

<div class="flex items-center justify-center">
    <Button
        onclick={() =>
            toast.success('Deployment ready', {
                surface: 'glass',
                description: 'The preview build completed successfully.',
                actions: [
                    {
                        label: 'View details',
                        callback: () => {
                            toast.info('Deployment details', { description: 'Preview build completed with no errors.' });
                        }
                    }
                ]
            })}
    >
        Deploy
    </Button>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { toast } from '@mielui/svelte/components/toast';
</script>

<div class="flex items-center justify-center">
    <Button
        onclick={() =>
            toast.success('Deployment ready', {
                description: 'The preview build completed successfully.',
                actions: [
                    {
                        label: 'View details',
                        callback: () => {
                            toast.info('Deployment details', { description: 'Preview build completed with no errors.' });
                        }
                    }
                ]
            })}
    >
        Deploy
    </Button>
</div>
~~~~

### Notch

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Toaster, toast } from '@mielui/svelte/components/toast';

    let count = 0;
    function notify() {
        count += 1;
        toast.success(`Export ${count} ready`, {
            description: 'Your workspace export is ready to download.',
            duration: 12000
        });
    }
    function activity() {
        toast.loading('Syncing workspace', {
            description: 'This activity stays until you dismiss it.'
        });
    }
</script>

<Toaster variant="notch" side="top" />
<div class="flex flex-wrap justify-center gap-2">
    <Button variant="secondary" onclick={notify}>Add notification</Button>
    <Button variant="secondary" onclick={activity}>Add ongoing activity</Button>
</div>
~~~~

### Promise

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Switch } from '@mielui/svelte/components/switch';
    import { toast } from '@mielui/svelte/components/toast';

    import { onDestroy } from 'svelte';

    let timer: ReturnType<typeof setTimeout> | undefined;
    let notification: ReturnType<typeof toast.promise> | undefined;
    onDestroy(() => {
        clearTimeout(timer);
        notification?.exit?.();
    });

    let fail = $state(false);
    let pending = $state(false);

    function save() {
        const shouldFail = fail;
        pending = true;
        const request = new Promise<string>((resolve, reject) => {
            timer = setTimeout(() => {
                pending = false;
                if (shouldFail) {
                    reject(new Error('The server could not save your changes.'));
                } else {
                    resolve('Profile');
                }
            }, 1600);
        });
        notification = toast.promise(request, {
            loading: 'Saving profile…',
            success: (name) => `${name} saved`,
            error: 'Could not save profile',
            errorDescription: 'Your changes are still here. Try again.'
        });
    }
</script>

<div class="flex flex-wrap items-center gap-4">
    <Button onclick={save} disabled={pending}>Save profile</Button>
    <Switch bind:checked={fail} label="Simulate failure" />
</div>
~~~~

For the rendered reference, visit [/docs/components/toast](/docs/components/toast).


---

Source: http://sveltekit-prerender/docs/components/toolbar.md

# Toolbar

Composable keyboard toolbar with buttons, links, and selectable groups.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button, separator
- Shared utilities: utils.cn, utils.pressable

## Install

~~~~sh
pnpm dlx @mielui/svelte add toolbar
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Button

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| null \| undefined | — | No | No |
| element | HTMLButtonElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Group

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| undefined | — | No | No |
| type | "single" \| "multiple" | — | Yes | No |
| value | string \| undefined \| string[] \| undefined | — | No | Yes |
| onValueChange | ((value: string) => void) \| undefined \| ((value: string[]) => void) \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[ToggleGroupItemSnippetProps]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| disabled | boolean \| null \| undefined | — | No | No |
| value | string | — | Yes | No |
| element | HTMLButtonElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Link

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| element | HTMLAnchorElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| loop | boolean \| undefined | — | No | No |
| orientation | Orientation \| undefined | 'horizontal' | No | No |
| variant | "default" \| "depth" \| undefined | 'default' | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Separator

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| id | string \| undefined | — | No | No |
| style | string \| StyleProperties \| null \| undefined | — | No | No |
| orientation | Orientation \| undefined | — | No | No |
| decorative | boolean \| undefined | — | No | No |
| element | HTMLDivElement \| null \| undefined | null | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Toolbar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Toolbar as Primitive } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
import Toolbar from './toolbar.svelte';

export type ToolbarProps = DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;

export { default as Button } from './toolbar-button.svelte';
export { default as Group } from './toolbar-group.svelte';
export { default as Item } from './toolbar-item.svelte';
export { default as Link } from './toolbar-link.svelte';
export { default as Root } from './toolbar-root.svelte';
export { default as Separator } from './toolbar-separator.svelte';
export { Toolbar };
export type ToolbarRootProps = Omit<Primitive.RootProps, 'child' | 'ref'> & {
    variant?: 'default' | 'depth';
    element?: HTMLDivElement | null;
};
export type ToolbarButtonProps = Omit<Primitive.ButtonProps, 'child' | 'ref'> & {
    element?: HTMLButtonElement | null;
};
export type ToolbarLinkProps = Omit<Primitive.LinkProps, 'child' | 'ref'> & {
    element?: HTMLAnchorElement | null;
};
export type ToolbarGroupProps = Omit<
    Primitive.GroupProps,
    'type' | 'value' | 'onValueChange' | 'child' | 'ref'
> &
    (
        | {
              type: 'single';
              value?: string;
              onValueChange?: (value: string) => void;
          }
        | {
              type: 'multiple';
              value?: string[];
              onValueChange?: (value: string[]) => void;
          }
    ) & {
        element?: HTMLDivElement | null;
    };
export type ToolbarItemProps = Omit<Primitive.GroupItemProps, 'child' | 'ref'> & {
    element?: HTMLButtonElement | null;
};
~~~~

## Examples

### Depth

~~~~svelte
<script lang="ts">
    import {
        BubbleChatIcon,
        FrameIcon,
        MinusSignIcon,
        MousePointer01Icon,
        PenTool01Icon,
        PlusSignIcon,
        SquareIcon,
        TextFontIcon
    } from '@hugeicons/core-free-icons';
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import Kbd from '@mielui/svelte/components/kbd';
    import * as Toolbar from '@mielui/svelte/components/toolbar';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let activeTool = $state('move');
    let zoom = $state(100);
    function zoomOut() {
        zoom = Math.max(25, zoom - 25);
    }

    function zoomIn() {
        zoom = Math.min(200, zoom + 25);
    }

    function resetZoom() {
        zoom = 100;
    }

    const tools = [
        { id: 'move', label: 'Move', shortcut: 'V', icon: MousePointer01Icon },
        { id: 'frame', label: 'Frame', shortcut: 'F', icon: FrameIcon },
        { id: 'rectangle', label: 'Rectangle', shortcut: 'R', icon: SquareIcon },
        { id: 'pen', label: 'Pen', shortcut: 'P', icon: PenTool01Icon },
        { id: 'text', label: 'Text', shortcut: 'T', icon: TextFontIcon },
        { id: 'comment', label: 'Comment', shortcut: 'C', icon: BubbleChatIcon }
    ];
</script>

<div class="@container flex w-full flex-col items-center gap-3">
    <Toolbar.Root
        variant="depth"
        aria-label="Design tools"
        class="max-w-full flex-wrap justify-center gap-2 p-1"
    >
        <Toolbar.Group
            type="single"
            bind:value={activeTool}
            aria-label="Active tool"
            class="flex-wrap justify-center gap-1"
        >
            {#each tools as tool (tool.id)}
                <Tooltip.Root placement="top" delay={300}>
                    <Tooltip.Trigger>
                        <Toolbar.Item
                            value={tool.id}
                            aria-label={tool.label}
                            class="relative size-8 shrink-0 p-0"
                        >
                            <HugeiconsIcon
                                icon={tool.icon}
                                size={16}
                                class="size-4"
                                aria-hidden="true"
                            />
                            <span class="sr-only"><Kbd shortcut={tool.shortcut} /></span>
                            {#if activeTool === tool.id}
                                <span
                                    class="absolute end-1 top-1 size-1 rounded-full bg-primary"
                                    aria-hidden="true"
                                ></span>
                            {/if}
                        </Toolbar.Item>
                    </Tooltip.Trigger>
                    <Tooltip.Content
                        rich
                        surface="solid"
                        class="bg-[var(--color-field)] text-[var(--color-field-foreground)]"
                    >
                        <span class="flex items-center gap-2">
                            {tool.label}
                            <Kbd
                                shortcut={tool.shortcut}
                                class="border-current/15 bg-current/10 text-inherit shadow-none"
                            />
                        </span>
                    </Tooltip.Content>
                </Tooltip.Root>
            {/each}
        </Toolbar.Group>
        <Toolbar.Separator class="hidden h-7 @min-[32rem]:block" />
        <div class="flex items-center gap-1">
            <Toolbar.Button
                aria-label="Zoom out"
                disabled={zoom <= 25}
                class="size-8 p-0"
                onclick={zoomOut}
            >
                <HugeiconsIcon icon={MinusSignIcon} size={16} class="size-4" aria-hidden="true" />
            </Toolbar.Button>
            <Toolbar.Button
                aria-label="Reset zoom"
                class="h-8 min-w-16 bg-none bg-background font-mono text-xs tabular-nums shadow-[var(--mielui-toolbar-pressed)]"
                onclick={resetZoom}
            >
                <span use:numberShuffle={{ value: zoom, format: (value) => `${value}%` }}>
                    {`${zoom}%`}
                </span>
            </Toolbar.Button>
            <Toolbar.Button
                aria-label="Zoom in"
                disabled={zoom >= 200}
                class="size-8 p-0"
                onclick={zoomIn}
            >
                <HugeiconsIcon icon={PlusSignIcon} size={16} class="size-4" aria-hidden="true" />
            </Toolbar.Button>
        </div>
    </Toolbar.Root>
    <p role="status" class="text-sm text-foreground-muted">
        {`${tools.find((tool) => tool.id === activeTool)?.label ?? 'No tool'} selected · `}
        <span use:numberShuffle={{ value: zoom, format: (value) => `${value}%` }}>{zoom}%</span>
        {' zoom'}
    </p>
</div>
~~~~

### Formatting

~~~~svelte
<script lang="ts">
    import * as Toolbar from '@mielui/svelte/components/toolbar';

    let formats = $state<string[]>(['bold']);
</script>
<div class="flex flex-col items-center gap-4">
    <Toolbar.Root aria-label="Text formatting">
        <Toolbar.Group type="multiple" bind:value={formats} aria-label="Text styles">
            <Toolbar.Item value="bold">Bold</Toolbar.Item>
            <Toolbar.Item value="italic">Italic</Toolbar.Item>
            <Toolbar.Item value="underline">Underline</Toolbar.Item>
        </Toolbar.Group>
        <Toolbar.Separator />
        <Toolbar.Button
            onclick={() => {
                formats = [];
            }}
        >
            Clear
        </Toolbar.Button>
    </Toolbar.Root>
    <p
        class="text-sm"
        class:font-bold={formats.includes('bold')}
        class:italic={formats.includes('italic')}
        class:underline={formats.includes('underline')}
    >
        A note for the team.
    </p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        BubbleChatIcon,
        FrameIcon,
        MinusSignIcon,
        MousePointer01Icon,
        PenTool01Icon,
        PlusSignIcon,
        SquareIcon,
        TextFontIcon
    } from '@hugeicons/core-free-icons';
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import Kbd from '@mielui/svelte/components/kbd';
    import * as Toolbar from '@mielui/svelte/components/toolbar';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let activeTool = $state('move');
    let zoom = $state(100);
    function zoomOut() {
        zoom = Math.max(25, zoom - 25);
    }

    function zoomIn() {
        zoom = Math.min(200, zoom + 25);
    }

    function resetZoom() {
        zoom = 100;
    }

    const tools = [
        { id: 'move', label: 'Move', shortcut: 'V', icon: MousePointer01Icon },
        { id: 'frame', label: 'Frame', shortcut: 'F', icon: FrameIcon },
        { id: 'rectangle', label: 'Rectangle', shortcut: 'R', icon: SquareIcon },
        { id: 'pen', label: 'Pen', shortcut: 'P', icon: PenTool01Icon },
        { id: 'text', label: 'Text', shortcut: 'T', icon: TextFontIcon },
        { id: 'comment', label: 'Comment', shortcut: 'C', icon: BubbleChatIcon }
    ];
</script>

<div class="@container flex w-full flex-col items-center gap-3">
    <Toolbar.Root
        aria-label="Design tools"
        class="max-w-full flex-wrap justify-center gap-2 border border-border bg-card p-1"
    >
        <Toolbar.Group
            type="single"
            bind:value={activeTool}
            aria-label="Active tool"
            class="flex-wrap justify-center gap-1"
        >
            {#each tools as tool (tool.id)}
                <Tooltip.Root placement="top" delay={300}>
                    <Tooltip.Trigger>
                        <Toolbar.Item
                            value={tool.id}
                            aria-label={tool.label}
                            class="relative size-8 shrink-0 p-0"
                        >
                            <HugeiconsIcon
                                icon={tool.icon}
                                size={16}
                                class="size-4"
                                aria-hidden="true"
                            />
                            <span class="sr-only"><Kbd shortcut={tool.shortcut} /></span>
                            {#if activeTool === tool.id}
                                <span
                                    class="absolute end-1 top-1 size-1 rounded-full bg-primary"
                                    aria-hidden="true"
                                ></span>
                            {/if}
                        </Toolbar.Item>
                    </Tooltip.Trigger>
                    <Tooltip.Content
                        rich
                        surface="solid"
                        class="bg-[var(--color-field)] text-[var(--color-field-foreground)]"
                    >
                        <span class="flex items-center gap-2">
                            {tool.label}
                            <Kbd
                                shortcut={tool.shortcut}
                                class="border-current/15 bg-current/10 text-inherit shadow-none"
                            />
                        </span>
                    </Tooltip.Content>
                </Tooltip.Root>
            {/each}
        </Toolbar.Group>
        <Toolbar.Separator class="hidden h-7 @min-[32rem]:block" />
        <div class="flex items-center gap-1">
            <Toolbar.Button
                aria-label="Zoom out"
                disabled={zoom <= 25}
                class="size-8 p-0"
                onclick={zoomOut}
            >
                <HugeiconsIcon icon={MinusSignIcon} size={16} class="size-4" aria-hidden="true" />
            </Toolbar.Button>
            <Toolbar.Button
                aria-label="Reset zoom"
                class="h-8 min-w-16 bg-none bg-background font-mono text-xs tabular-nums shadow-[var(--elevation-control)]"
                onclick={resetZoom}
            >
                <span use:numberShuffle={{ value: zoom, format: (value) => `${value}%` }}>
                    {`${zoom}%`}
                </span>
            </Toolbar.Button>
            <Toolbar.Button
                aria-label="Zoom in"
                disabled={zoom >= 200}
                class="size-8 p-0"
                onclick={zoomIn}
            >
                <HugeiconsIcon icon={PlusSignIcon} size={16} class="size-4" aria-hidden="true" />
            </Toolbar.Button>
        </div>
    </Toolbar.Root>
    <p role="status" class="text-sm text-foreground-muted">
        {`${tools.find((tool) => tool.id === activeTool)?.label ?? 'No tool'} selected · `}
        <span use:numberShuffle={{ value: zoom, format: (value) => `${value}%` }}>{zoom}%</span>
        {' zoom'}
    </p>
</div>
~~~~

### Reply

~~~~svelte
<script lang="ts">
    import {
        ArrowUp02Icon as ArrowUp,
        AtIcon as AtSign,
        ImageAdd01Icon as ImagePlus,
        SmileIcon as SmilePlus
    } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import { Textarea } from '@mielui/svelte/components/textarea';
    import { Toolbar } from '@mielui/svelte/components/toolbar';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="w-full max-w-xl">
    <Textarea aria-label="Reply to issue" placeholder="Reply to mielsense's comment..." autoresize>
        <Toolbar aria-label="Reply actions">
            <div class="flex items-center gap-1">
                <Button
                    variant="ghost"
                    size="md"
                    class="size-7 rounded-[var(--radius-md)] p-0"
                    aria-label="Mention someone"
                >
                    <HugeiconsIcon icon={AtSign} size={14} />
                </Button>
                <Button
                    variant="ghost"
                    size="md"
                    class="size-7 rounded-[var(--radius-md)] p-0"
                    aria-label="Add image"
                >
                    <HugeiconsIcon icon={ImagePlus} size={14} />
                </Button>
                <DropdownMenu.Root>
                    <DropdownMenu.Trigger
                        variant="ghost"
                        size="md"
                        class="size-7 rounded-[var(--radius-md)] p-0"
                        aria-label="Add reaction"
                    >
                        <HugeiconsIcon icon={SmilePlus} size={14} />
                    </DropdownMenu.Trigger>
                    <DropdownMenu.Content class="min-w-40">
                        <DropdownMenu.Label>Quick reactions</DropdownMenu.Label>
                        <DropdownMenu.Item>Thumbs up</DropdownMenu.Item>
                        <DropdownMenu.Item>Eyes</DropdownMenu.Item>
                        <DropdownMenu.Item>Celebrate</DropdownMenu.Item>
                    </DropdownMenu.Content>
                </DropdownMenu.Root>
            </div>
            <Button type="button" size="md" class="size-7 rounded-full p-0" aria-label="Reply">
                <HugeiconsIcon icon={ArrowUp} size={14} />
            </Button>
        </Toolbar>
    </Textarea>
</div>
~~~~

### Support Note

~~~~svelte
<script lang="ts">
    import {
        ArrowUp02Icon as ArrowUp,
        BookOpen01Icon as BookOpen,
        Attachment01Icon as Paperclip
    } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import { Textarea } from '@mielui/svelte/components/textarea';
    import { Toolbar } from '@mielui/svelte/components/toolbar';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="w-full max-w-xl">
    <div class="border-b border-border px-3 py-2 text-sm text-foreground-muted">
        Replying to Nora about her billing question
    </div>
    <Textarea aria-label="Support reply" placeholder="Write a helpful response..." autoresize>
        <Toolbar aria-label="Support reply actions">
            <div class="flex items-center gap-1">
                <Button
                    variant="ghost"
                    size="md"
                    class="size-7 rounded-[var(--radius-md)] p-0"
                    aria-label="Attach a file"
                >
                    <HugeiconsIcon icon={Paperclip} size={14} />
                </Button>
                <Button
                    variant="ghost"
                    size="md"
                    class="size-7 rounded-[var(--radius-md)] p-0"
                    aria-label="Insert an article"
                >
                    <HugeiconsIcon icon={BookOpen} size={14} />
                </Button>
            </div>
            <Button type="button" size="md" class="size-7 rounded-full p-0" aria-label="Send reply">
                <HugeiconsIcon icon={ArrowUp} size={14} />
            </Button>
        </Toolbar>
    </Textarea>
</div>
~~~~

For the rendered reference, visit [/docs/components/toolbar](/docs/components/toolbar).


---

Source: http://sveltekit-prerender/docs/components/attachment.md

# Attachment

Validated local-file picker with drag and drop, previews, status, and progress display.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button
- Shared utilities: components/_internal/button-attributes, hugeicons-icon, utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add attachment
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| file | File | — | Yes | No |
| status | AttachmentStatus \| undefined | 'ready' | No | No |
| progress | number \| undefined | — | No | No |
| error | string \| undefined | — | No | No |
| onRemove | ((file: File) => void) \| undefined | — | No | No |
| removable | boolean \| undefined | true | No | No |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### List

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Attachments' | No | No |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| files | File[] \| undefined | [] | No | Yes |
| accept | string \| undefined | — | No | No |
| multiple | boolean \| undefined | true | No | No |
| maxFiles | number \| undefined | — | No | No |
| maxSize | number \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| onReject | ((rejections: AttachmentRejection[]) => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| variant | ButtonVariant \| undefined | 'ghost' | No | No |
| size | "sm" \| "md" \| "lg" \| "icon" \| undefined | children ? 'md' : 'icon' | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { ButtonProps } from '@mielui/svelte/components/button';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import Root from './attachment.svelte';
import Item from './attachment-item.svelte';
import List from './attachment-list.svelte';
import Trigger from './attachment-trigger.svelte';

export type AttachmentRejectionCode =
    | 'duplicate-file'
    | 'file-invalid-type'
    | 'file-too-large'
    | 'too-many-files';

export type AttachmentRejection = {
    file: File;
    code: AttachmentRejectionCode;
    reason: string;
};

export type AttachmentStatus = 'ready' | 'uploading' | 'complete' | 'error';

export type AttachmentProps = {
    files?: File[];
    accept?: string;
    multiple?: boolean;
    maxFiles?: number;
    maxSize?: number;
    disabled?: boolean;
    onReject?: (rejections: AttachmentRejection[]) => void;
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export type AttachmentTriggerProps = {
    class?: string;
    children?: Snippet;
    element?: HTMLButtonElement | HTMLAnchorElement;
    onclick?: (event: MouseEvent) => void;
    variant?: ButtonProps['variant'];
    size?: ButtonProps['size'];
} & Omit<HTMLButtonAttributes, 'children' | 'class' | 'type' | 'onclick'>;

export type AttachmentListProps = {
    label?: string;
    class?: string;
} & Omit<HTMLAttributes<HTMLUListElement>, 'children' | 'class'>;

export type AttachmentItemProps = {
    file: File;
    status?: AttachmentStatus;
    progress?: number;
    error?: string;
    onRemove?: (file: File) => void;
    removable?: boolean;
    class?: string;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export { Item, List, Root, Trigger };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Attachment from '@mielui/svelte/components/attachment';

    let files = $state<File[]>([]);
    let rejected = $state<Attachment.AttachmentRejection[]>([]);
</script>

<Attachment.Root
    bind:files
    onReject={(rejections) => {
        rejected = rejections;
    }}
    accept="image/png,image/jpeg,.pdf"
    maxFiles={3}
    maxSize={5 * 1024 * 1024}
    class="mx-auto flex w-full max-w-xl flex-col items-center gap-2"
>
    <Attachment.Trigger variant="outline" size="md">Choose files</Attachment.Trigger>
    <p class="text-sm text-foreground-muted">PNG, JPEG, or PDF. Up to 3 files, 5 MB each.</p>
    <Attachment.List class="self-stretch items-center sm:justify-center" />
    {#each rejected as rejection}
        <Attachment.Item
            file={rejection.file}
            status="error"
            error={rejection.reason}
            class="w-fit max-w-full"
            onRemove={() => {
                rejected = rejected.filter((item) => item !== rejection);
            }}
        />
    {/each}
</Attachment.Root>
~~~~

### Status Variants

~~~~svelte
<script lang="ts">
    import type { AttachmentStatus } from '@mielui/svelte/components/attachment';
    import * as Attachment from '@mielui/svelte/components/attachment';
    import { onMount } from 'svelte';

    type Example = {
        file: File;
        status: AttachmentStatus;
        progress?: number;
        error?: string;
    };

    let examples = $state.raw<Example[]>([]);

    onMount(() => {
        examples = [
            {
                file: new File([new Uint8Array(48_000)], 'release-notes.md', {
                    type: 'text/markdown'
                }),
                status: 'ready'
            },
            {
                file: new File([new Uint8Array(620_000)], 'architecture.pdf', {
                    type: 'application/pdf'
                }),
                status: 'uploading',
                progress: 64
            },
            {
                file: new File([new Uint8Array(384_000)], 'audit-log.csv', { type: 'text/csv' }),
                status: 'complete'
            },
            {
                file: new File([new Uint8Array(112_000)], 'secrets.env', { type: 'text/plain' }),
                status: 'error',
                error: 'Blocked by policy'
            }
        ];
    });
</script>

<div class="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
    {#each examples as example (example.file.name)}
        <Attachment.Item
            file={example.file}
            status={example.status}
            progress={example.progress}
            error={example.error}
            removable={false}
        />
    {/each}
</div>
~~~~

For the rendered reference, visit [/docs/components/attachment](/docs/components/attachment).


---

Source: http://sveltekit-prerender/docs/components/composer.md

# Composer

Controlled agent-message form with autoresizing input, toolbar, and send/stop action.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, button, spinner, toolbar
- Shared utilities: components/_internal/inset-layout, components/_internal/button-attributes, components/_internal/submission.svelte, components/_internal/surface, hugeicons-icon, utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add composer
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| submitOnEnter | boolean \| undefined | true | No | No |
| element | HTMLTextAreaElement \| undefined | — | No | Yes |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| surface | "solid" \| "glass" \| undefined | — | No | No |
| value | string \| undefined | '' | No | Yes |
| status | ComposerStatus \| undefined | 'idle' | No | No |
| generating | boolean \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| allowEmpty | boolean \| undefined | false | No | No |
| onSubmit | (value: string, event: SubmitEvent) => void \| Promise<void> | — | Yes | No |
| errorMessage | string \| undefined | 'Message could not be sent.' | No | No |
| onError | ((error: unknown) => void) \| undefined | — | No | No |
| onStop | (() => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Submit

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Send' | No | No |
| queueLabel | string \| undefined | 'Queue message' | No | No |
| stopLabel | string \| undefined | 'Stop response' | No | No |
| loadingLabel | string \| undefined | 'Sending' | No | No |
| children | Snippet<[Readonly<{ action: ComposerSubmitAction; generating: boolean; empty: boolean; }>]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Toolbar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "chrome" \| "inset" \| undefined | 'chrome' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type {
    HTMLAttributes,
    HTMLButtonAttributes,
    HTMLFormAttributes,
    HTMLTextareaAttributes
} from 'svelte/elements';
import Root from './composer.svelte';
import Actions from './composer-actions.svelte';
import Input from './composer-input.svelte';
import Submit from './composer-submit.svelte';
import Toolbar from './composer-toolbar.svelte';

export type ComposerStatus = 'idle' | 'submitting' | 'error';

export type ComposerProps = {
    surface?: 'solid' | 'glass';
    value?: string;
    status?: ComposerStatus;
    /** Whether a response is being generated independently of submission state. */
    generating?: boolean;
    disabled?: boolean;
    allowEmpty?: boolean;
    onSubmit: (value: string, event: SubmitEvent) => void | Promise<void>;
    errorMessage?: string;
    onError?: (error: unknown) => void;
    onStop?: () => void;
    class?: string;
    children?: Snippet;
} & Omit<
    HTMLFormAttributes,
    'children' | 'class' | 'onsubmit' | 'action' | 'method' | 'target' | 'enctype'
>;

export type ComposerInputProps = {
    submitOnEnter?: boolean;
    element?: HTMLTextAreaElement;
    class?: string;
} & Omit<HTMLTextareaAttributes, 'children' | 'class' | 'value'>;

export type ComposerToolbarProps = {
    variant?: 'chrome' | 'inset';
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role'>;

export type ComposerActionsProps = {
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export type ComposerSubmitProps = {
    label?: string;
    queueLabel?: string;
    stopLabel?: string;
    loadingLabel?: string;
    children?: Snippet<[ComposerSubmitState]>;
    element?: HTMLButtonElement | HTMLAnchorElement;
    onclick?: (event: MouseEvent) => void;
    class?: string;
} & Omit<DefaultProps, 'children'> &
    Omit<HTMLButtonAttributes, 'children' | 'class' | 'type' | 'onclick'>;

export type ComposerSubmitAction = 'send' | 'queue' | 'stop' | 'pending';

export type ComposerSubmitState = Readonly<{
    action: ComposerSubmitAction;
    generating: boolean;
    empty: boolean;
}>;

export { Actions, Input, Root, Submit, Toolbar };
~~~~

## Examples

### Glass

~~~~svelte
<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';

    let value = $state('What should we work on next?');
    function send() {
        value = '';
    }
</script>

<div class="w-full max-w-2xl">
    <Composer.Root surface="glass" bind:value onSubmit={send}>
        <Composer.Input aria-label="Message" />
        <Composer.Toolbar>
            <Composer.Actions>
                <span class="text-sm text-foreground-muted">Shift + Enter for a new line</span>
            </Composer.Actions>
            <Composer.Submit />
        </Composer.Toolbar>
    </Composer.Root>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        Tick02Icon as Check,
        ArrowDown01Icon as ChevronDown,
        ShieldCheckIcon as ShieldCheck,
        WorkflowSquare01Icon as Workflow
    } from '@hugeicons/core-free-icons';
    import * as Composer from '@mielui/svelte/components/composer';
    import * as DropdownMenu from '@mielui/svelte/components/dropdown-menu';
    import * as Select from '@mielui/svelte/components/select';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
    import { onDestroy } from 'svelte';

    const models = ['Mielui 3.1', 'Mielui Mini'];
    const modes = ['Plan', 'Build'];
    const permissions = ['Ask first', 'Auto approve'];
    const efforts = ['Low', 'Medium', 'High'];

    let value = $state('Review the release notes and call out any migration risks.');
    let model = $state(models[0]);
    let mode = $state(modes[0]);
    let permission = $state(permissions[0]);
    let effort = $state(efforts[2]);
    let timer: ReturnType<typeof setTimeout> | undefined;
    let settle: (() => void) | undefined;

    async function submitPrompt() {
        await new Promise<void>((resolve) => {
            settle = resolve;
            timer = setTimeout(() => {
                value = '';
                timer = undefined;
                settle = undefined;
                resolve();
            }, 1600);
        });
    }

    function stopSubmission() {
        if (timer) {
            clearTimeout(timer);
        }
        timer = undefined;
        const resolve = settle;
        settle = undefined;
        resolve?.();
    }

    onDestroy(() => {
        if (timer) {
            clearTimeout(timer);
        }
        settle?.();
    });
    function selectModel(option: string) {
        model = option;
    }

    function selectEffort(option: string) {
        effort = option;
    }
</script>

<div class="flex w-full max-w-2xl flex-col">
    <Composer.Root bind:value onSubmit={submitPrompt} onStop={stopSubmission}>
        <Composer.Input aria-label="Prompt" placeholder="Ask the agent..." />

        <Composer.Toolbar>
            <Composer.Actions>
                <Select.Root bind:value={mode}>
                    <Select.Trigger variant="ghost" class="w-auto max-w-32">
                        <HugeiconsIcon icon={Workflow} size={14} aria-hidden="true" />
                        <span class="truncate">{mode}</span>
                    </Select.Trigger>
                    <Select.Content dynamic>
                        <Select.Label>Mode</Select.Label>
                        {#each modes as option (option)}
                            <Select.Item value={option}>{option}</Select.Item>
                        {/each}
                    </Select.Content>
                </Select.Root>

                <Select.Root bind:value={permission}>
                    <Select.Trigger variant="ghost" class="w-auto max-w-44">
                        <HugeiconsIcon icon={ShieldCheck} size={14} aria-hidden="true" />
                        <span class="truncate">{permission}</span>
                    </Select.Trigger>
                    <Select.Content dynamic>
                        <Select.Label>Permission</Select.Label>
                        {#each permissions as option (option)}
                            <Select.Item value={option}>{option}</Select.Item>
                        {/each}
                    </Select.Content>
                </Select.Root>
            </Composer.Actions>

            <div class="ml-auto flex min-w-0 items-center gap-1">
                <DropdownMenu.Root>
                    <DropdownMenu.Trigger variant="ghost" class="w-auto max-w-52">
                        <span class="flex min-w-0 flex-1 items-center gap-1.5">
                            <span class="truncate">{model}</span>
                            <span class="text-foreground-muted">{effort}</span>
                        </span>
                        <HugeiconsIcon
                            icon={ChevronDown}
                            size={12}
                            class="ml-auto shrink-0 text-foreground-muted"
                            aria-hidden="true"
                        />
                    </DropdownMenu.Trigger>
                    <DropdownMenu.Content dynamic>
                        <DropdownMenu.Label>Configuration</DropdownMenu.Label>
                        <DropdownMenu.Sub>
                            <DropdownMenu.SubTrigger>Model</DropdownMenu.SubTrigger>
                            <DropdownMenu.SubContent dynamic>
                                {#each models as option (option)}
                                    <DropdownMenu.Item callback={() => selectModel(option)}>
                                        <span class="flex-1">{option}</span>
                                        {#if model === option}
                                            <HugeiconsIcon
                                                icon={Check}
                                                size={13}
                                                aria-hidden="true"
                                            />
                                        {/if}
                                    </DropdownMenu.Item>
                                {/each}
                            </DropdownMenu.SubContent>
                        </DropdownMenu.Sub>
                        <DropdownMenu.Sub>
                            <DropdownMenu.SubTrigger>Effort</DropdownMenu.SubTrigger>
                            <DropdownMenu.SubContent dynamic>
                                {#each efforts as option (option)}
                                    <DropdownMenu.Item callback={() => selectEffort(option)}>
                                        <span class="flex-1">{option}</span>
                                        {#if effort === option}
                                            <HugeiconsIcon
                                                icon={Check}
                                                size={13}
                                                aria-hidden="true"
                                            />
                                        {/if}
                                    </DropdownMenu.Item>
                                {/each}
                            </DropdownMenu.SubContent>
                        </DropdownMenu.Sub>
                    </DropdownMenu.Content>
                </DropdownMenu.Root>

                <Composer.Submit />
            </div>
        </Composer.Toolbar>
    </Composer.Root>
</div>
~~~~

### Idle

~~~~svelte
<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';

    let value = $state('Compare the two implementation options.');
    let submitted = $state('');

    function submit() {
        submitted = value;
        value = '';
    }
</script>

<div class="w-full max-w-2xl space-y-3">
    <Composer.Root bind:value onSubmit={submit}>
        <Composer.Input aria-label="Prompt" />
        <Composer.Toolbar><Composer.Submit /></Composer.Toolbar>
    </Composer.Root>
    <p class="min-h-5 text-sm text-foreground-muted" role="status">
        {submitted ? `Submitted: ${submitted}` : 'Enter sends. Shift + Enter adds a line.'}
    </p>
</div>
~~~~

### State Error

~~~~svelte
<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';
    import { Switch } from '@mielui/svelte/components/switch';

    let value = $state('Summarize the incident timeline.');
    let fail = $state(true);
    let result = $state('');

    async function submit() {
        result = '';
        if (fail) {
            throw new Error('The demo service is unavailable.');
        }
        result = `Submitted: ${value}`;
        value = '';
    }
</script>

<div class="w-full max-w-2xl space-y-4">
    <Switch bind:checked={fail} label="Simulate service failure" />
    <Composer.Root
        bind:value
        onSubmit={submit}
        errorMessage="Could not send. Turn off simulated failure, then retry."
    >
        <Composer.Input aria-label="Incident prompt" />
        <Composer.Toolbar><Composer.Submit /></Composer.Toolbar>
    </Composer.Root>
    <p class="min-h-5 text-sm text-foreground-muted" role="status">{result}</p>
</div>
~~~~

### Submitting

~~~~svelte
<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';
    import { onDestroy } from 'svelte';

    let value = $state('Check the deployment plan.');
    let result = $state('Send the prompt, then stop it before the demo finishes.');
    let timer: ReturnType<typeof setTimeout> | undefined;
    let status = $state<'idle' | 'submitting'>('idle');

    function stop() {
        clearTimeout(timer);
        timer = undefined;
        result = 'Stopped. Your prompt is still here.';
        status = 'idle';
    }

    function submit() {
        result = 'Checking the plan…';
        status = 'submitting';
        timer = setTimeout(() => {
            result = 'Plan checked. No blocking changes found.';
            value = '';
            timer = undefined;
            status = 'idle';
        }, 2400);
    }

    onDestroy(() => {
        clearTimeout(timer);
    });
</script>

<div class="w-full max-w-2xl space-y-3">
    <Composer.Root bind:value {status} onSubmit={submit} onStop={stop}>
        <Composer.Input aria-label="Deployment prompt" />
        <Composer.Toolbar><Composer.Submit /></Composer.Toolbar>
    </Composer.Root>
    <p class="min-h-5 text-sm text-foreground-muted" role="status">{result}</p>
</div>
~~~~

### Toolbar Inset

~~~~svelte
<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';

    let chrome = $state('Compare the two implementation options.');
    let inset = $state('Summarize the incident timeline.');
    let result = $state('');

    function sendChrome() {
        result = `Submitted: ${chrome}`;
        chrome = '';
    }

    function sendInset() {
        result = `Submitted: ${inset}`;
        inset = '';
    }
</script>

<div class="flex w-full max-w-2xl flex-col gap-6">
    <Composer.Root bind:value={chrome} onSubmit={sendChrome}>
        <Composer.Input aria-label="Chrome toolbar prompt" />
        <Composer.Toolbar>
            <Composer.Actions>
                <span class="px-2 text-xs text-foreground-muted">Mielui 3.1</span>
            </Composer.Actions>
            <Composer.Submit />
        </Composer.Toolbar>
    </Composer.Root>

    <Composer.Root bind:value={inset} onSubmit={sendInset}>
        <Composer.Input aria-label="Inset toolbar prompt" />
        <Composer.Toolbar variant="inset">
            <Composer.Actions>
                <span class="px-2 text-xs text-foreground-muted">Mielui 3.1</span>
            </Composer.Actions>
            <Composer.Submit />
        </Composer.Toolbar>
    </Composer.Root>
    <p class="min-h-5 text-sm text-foreground-muted" role="status">{result}</p>
</div>
~~~~

For the rendered reference, visit [/docs/components/composer](/docs/components/composer).


---

Source: http://sveltekit-prerender/docs/components/conversation.md

# Conversation

Auto-following conversation transcript with empty and jump-to-latest states.

- Package: `@mielui/svelte`
- Component version: `1.1.1`
- Depends on Mielui components: _internal/utils, scroll-area
- Shared utilities: transition, hugeicons-icon, utils.cn, utils.createContext, utils.pressable

## Install

~~~~sh
pnpm dlx @mielui/svelte add conversation
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| transcriptClass | string \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Empty

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| icon | Snippet<[]> \| undefined | — | No | No |
| title | string \| undefined | 'Start a conversation' | No | No |
| description | string \| undefined | 'Ask a question or share what you are working on.' | No | No |
| action | Snippet<[]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| follow | boolean \| undefined | true | No | Yes |
| threshold | number \| undefined | 80 | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### ScrollButton

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Scroll to latest message' | No | No |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import Root from './conversation.svelte';
import Content from './conversation-content.svelte';
import Empty from './conversation-empty.svelte';
import ScrollButton from './conversation-scroll-button.svelte';

export type ConversationRootProps = {
    /** Whether new content should keep the transcript pinned to its latest message. */
    follow?: boolean;
    /** Distance from the bottom, in pixels, that still counts as following. */
    threshold?: number;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ConversationContentProps = {
    /** Classes applied to the inner transcript stack rather than the scroll viewport. */
    transcriptClass?: string;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'aria-live' | 'aria-relevant'>;

export type ConversationEmptyProps = {
    icon?: Snippet;
    title?: string;
    description?: string;
    action?: Snippet;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ConversationScrollButtonProps = {
    label?: string;
    class?: string;
} & Omit<
    HTMLButtonAttributes,
    'children' | 'class' | 'aria-label' | 'disabled' | 'tabindex' | 'type'
>;

export { Content, Empty, Root, ScrollButton };
~~~~

## Examples

### Empty State

~~~~svelte
<script lang="ts">
    import { File01Icon as FileText } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Conversation from '@mielui/svelte/components/conversation';
    import * as Message from '@mielui/svelte/components/message';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let started = $state(false);
    function start() {
        started = true;
    }
</script>

{#snippet emptyIcon()}
    <HugeiconsIcon icon={FileText} size={18} strokeWidth={1.75} aria-hidden="true" />
{/snippet}

{#snippet startAction()}
    <Button size="md" onclick={start}>Draft a release plan</Button>
{/snippet}

<Conversation.Root
    class="h-[22rem] w-full max-w-2xl rounded-[var(--radius-xl)] border border-border bg-panel"
>
    <Conversation.Content aria-label="Release planning conversation">
        {#if started}
            <Message.Root from="user">
                <Message.Content>
                    Draft a release plan for the checkout reliability fix.
                </Message.Content>
            </Message.Root>
            <Message.Root from="assistant">
                <Message.Content>
                    I’ll start with the rollout stages, owners, health checks, and rollback
                    threshold.
                </Message.Content>
            </Message.Root>
        {:else}
            <Conversation.Empty
                icon={emptyIcon}
                title="Plan the next release"
                description="Turn an issue or change set into a staged rollout with clear checks."
                action={startAction}
            />
        {/if}
    </Conversation.Content>
</Conversation.Root>
~~~~

### Follow Output

~~~~svelte
<script lang="ts">
    import { Add01Icon as Plus } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Conversation from '@mielui/svelte/components/conversation';
    import * as Message from '@mielui/svelte/components/message';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let follow = $state(true);
    let output = $state([
        { id: 1, label: 'Queued release web-2419' },
        { id: 2, label: 'Built application bundle in 18.2s' },
        { id: 3, label: 'Uploaded 42 immutable assets' },
        { id: 4, label: 'Deployed canary to iad1' },
        { id: 5, label: 'Passed checkout smoke tests' },
        { id: 6, label: 'Shifted 10% of production traffic' },
        { id: 7, label: 'Observed p95 latency at 612 ms' }
    ]);

    const updates = [
        'Shifted 25% of production traffic',
        'Observed p95 latency at 584 ms',
        'Passed payment-provider health check',
        'Shifted 50% of production traffic'
    ];
    const followLabel = $derived(follow ? 'Following latest output' : 'Follow paused');

    function appendOutput() {
        const index = output.length - 7;
        output.push({
            id: output.length + 1,
            label: updates[index % updates.length]
        });
    }
</script>

<div class="w-full max-w-2xl space-y-3">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <p class="flex items-center gap-2 text-sm text-foreground-muted" role="status">
            <span class="size-1.5 rounded-full bg-primary" aria-hidden="true"></span>
            {followLabel}
        </p>
        <Button variant="ghost" size="md" onclick={appendOutput}>
            <HugeiconsIcon icon={Plus} size={14} aria-hidden="true" />
            Append output
        </Button>
    </div>

    <Conversation.Root
        bind:follow
        class="h-[22rem] rounded-[var(--radius-xl)] border border-border bg-panel"
    >
        <Conversation.Content aria-label="Live deployment output">
            {#each output as entry (entry.id)}
                <Message.Root from="assistant">
                    <Message.Content>{entry.label}</Message.Content>
                </Message.Root>
            {/each}
        </Conversation.Content>
        <Conversation.ScrollButton />
    </Conversation.Root>

    <p class="text-xs leading-5 text-foreground-muted">
        Scroll up to pause following. Append more output, then use the arrow to return to the latest
        step.
    </p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Conversation from '@mielui/svelte/components/conversation';
    import { Markdown } from '@mielui/svelte/components/markdown';
    import * as Message from '@mielui/svelte/components/message';
    import * as Reasoning from '@mielui/svelte/components/reasoning';

    const finding = [
        '### What changed',
        '',
        'The latency increase starts in `POST /checkout` immediately after release `web-2418`.',
        '',
        '- Address validation added **430 ms** at p95.',
        '- The provider timed out for 8% of non-US requests.',
        '- Database and inventory spans stayed within baseline.',
        '',
        '> Roll back the synchronous validation call, then keep the rule behind the existing review queue.'
    ].join('\n');

    const rollback = [
        'Use the targeted flag first:',
        '',
        '```ts',
        "await flags.disable('checkout.address-verification');",
        'await metrics.waitForRecovery({ window: "10m" });',
        '```',
        '',
        'This avoids reverting the unrelated tax fixes in the same release.'
    ].join('\n');
</script>

<Conversation.Root
    class="h-[30rem] w-full max-w-3xl rounded-[var(--radius-xl)] border border-border bg-panel"
>
    <Conversation.Content aria-label="Checkout incident conversation">
        <Message.Root from="user">
            <Message.Content>
                Investigate why checkout latency rose after 14:00 UTC. Focus on the latest release
                and give me a safe mitigation.
            </Message.Content>
        </Message.Root>

        <Message.Root from="assistant">
            <Message.Content class="space-y-4">
                <Reasoning.Root open>
                    <Reasoning.Trigger
                        title="Compared traces with the release timeline"
                        duration="4.8s"
                    />
                    <Reasoning.Content>
                        <p>
                            Separated provider, database, and inventory spans, then matched the
                            first regression to the release boundary.
                        </p>
                    </Reasoning.Content>
                </Reasoning.Root>
                <Markdown content={finding} />
            </Message.Content>
        </Message.Root>

        <Message.Root from="user">
            <Message.Content>Show me the smallest rollback and how to verify it.</Message.Content>
        </Message.Root>

        <Message.Root from="assistant">
            <Message.Content><Markdown content={rollback} /></Message.Content>
        </Message.Root>
    </Conversation.Content>
    <Conversation.ScrollButton />
</Conversation.Root>
~~~~

For the rendered reference, visit [/docs/components/conversation](/docs/components/conversation).


---

Source: http://sveltekit-prerender/docs/components/message.md

# Message

Role-aware conversation messages with readable content and contextual actions.

- Package: `@mielui/svelte`
- Component version: `1.0.1`
- Depends on Mielui components: _internal/utils, typography
- Shared utilities: utils.cn, utils.createContext

## Install

~~~~sh
pnpm dlx @mielui/svelte add message
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Avatar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Body

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Metadata

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Name

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| from | MessageFrom \| undefined | 'assistant' | No | No |
| status | MessageStatus \| undefined | 'idle' | No | No |
| name | string \| undefined | — | No | No |
| timestamp | string \| undefined | — | No | No |
| avatar | Snippet<[]> \| undefined | — | No | No |
| layout | Snippet<[]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Status

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Time

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Root from './message.svelte';
import Actions from './message-actions.svelte';
import Avatar from './message-avatar.svelte';
import Body from './message-body.svelte';
import Content from './message-content.svelte';
import Metadata from './message-metadata.svelte';
import Name from './message-name.svelte';
import Status from './message-status.svelte';
import Time from './message-time.svelte';

export type MessageFrom = 'assistant' | 'user' | 'system';
export type MessageStatus = 'idle' | 'streaming' | 'error';

export type MessageRootProps = {
    from?: MessageFrom;
    status?: MessageStatus;
    name?: string;
    timestamp?: string;
    avatar?: Snippet;
    layout?: Snippet;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children' | 'aria-busy'>;

export type MessageContentProps = DefaultProps & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type MessageActionsProps = DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;

export type MessageAvatarProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
export type MessageBodyProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
export type MessageMetadataProps = DefaultProps & HTMLAttributes<HTMLElement>;
export type MessageNameProps = DefaultProps & HTMLAttributes<HTMLSpanElement>;
export type MessageTimeProps = DefaultProps & import('svelte/elements').HTMLTimeAttributes;
export type MessageStatusProps = DefaultProps & HTMLAttributes<HTMLSpanElement>;
export { Actions, Avatar, Body, Content, Metadata, Name, Root, Status, Time };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import { ThumbsUpIcon as ThumbsUp } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import { CopyButton } from '@mielui/svelte/components/copy-button';
    import { Markdown } from '@mielui/svelte/components/markdown';
    import * as Message from '@mielui/svelte/components/message';
    import * as Reasoning from '@mielui/svelte/components/reasoning';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const response = [
        '### Billing API v2',
        '',
        'The release separates invoice adjustments from payment collection and replaces `account_id` with `customer_id`.',
        '',
        '- Update webhook handlers for `invoice.adjusted`.',
        '- Backfill `customer_id` before switching reads.',
        '- Keep v1 retries active during the seven-day overlap.',
        '',
        '> Main migration risk: consumers that infer payment state from invoice updates.'
    ].join('\n');

    let helpful = $state(false);
    let status = $state('');
    function reportCopy() {
        status = 'Response copied to clipboard.';
    }
    function toggleHelpful() {
        helpful = !helpful;
    }
</script>

<div class="w-full max-w-3xl space-y-7">
    <Message.Root from="user">
        <Message.Content>
            Summarize what changed in our billing API and flag the migration work.
        </Message.Content>
    </Message.Root>

    <Message.Root from="assistant">
        <Message.Content class="space-y-3">
            <Reasoning.Root>
                <Reasoning.Trigger
                    title="Reviewed the v2 changelog and migration guide"
                    duration="2.6s"
                />
                <Reasoning.Content>
                    <p>Compared the event model, identifier changes, and compatibility window.</p>
                </Reasoning.Content>
            </Reasoning.Root>
            <Markdown content={response} />
        </Message.Content>
        <Message.Actions aria-label="Assistant response actions">
            <CopyButton
                text={response}
                label="Copy response"
                copiedLabel="Response copied"
                variant="ghost"
                size="md"
                class="size-8 rounded-[var(--radius-md)] p-0"
                oncopy={reportCopy}
            />
            <Button
                variant="ghost"
                size="md"
                class="size-8 rounded-[var(--radius-md)] p-0"
                aria-label={helpful ? 'Remove helpful rating' : 'Mark response as helpful'}
                aria-pressed={helpful}
                onclick={toggleHelpful}
            >
                <HugeiconsIcon
                    icon={ThumbsUp}
                    size={15}
                    fill={helpful ? 'currentColor' : 'none'}
                    aria-hidden="true"
                />
            </Button>
        </Message.Actions>
    </Message.Root>

    <p class="sr-only" role="status">{status}</p>
</div>
~~~~

### Role Variants

~~~~svelte
<script lang="ts">
    import * as Message from '@mielui/svelte/components/message';
</script>

<div class="w-full max-w-2xl space-y-7">
    <Message.Root from="assistant">
        <Message.Content>
            The deployment is healthy. Error rate and p95 latency are both below the rollback
            threshold.
        </Message.Content>
    </Message.Root>

    <Message.Root from="user">
        <Message.Content>Keep monitoring until the 30-minute mark.</Message.Content>
    </Message.Root>

    <Message.Root from="system">
        <Message.Content>
            Context compacted after 18 messages. Deployment events and decisions were preserved.
        </Message.Content>
    </Message.Root>
</div>
~~~~

### States

~~~~svelte
<script lang="ts">
    import { RotateLeft01Icon as RotateCcw } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import { Markdown } from '@mielui/svelte/components/markdown';
    import * as Message from '@mielui/svelte/components/message';
    import { ResponseStream } from '@mielui/svelte/components/response-stream';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    import { onDestroy } from 'svelte';

    let streaming = $state(true);

    function finishResponse() {
        streaming = false;
    }

    let status = $state<'error' | 'streaming' | 'idle'>('error');
    let timer: ReturnType<typeof setTimeout> | undefined;

    function retry() {
        status = 'streaming';
        timer = setTimeout(() => {
            status = 'idle';
        }, 1200);
    }

    onDestroy(() => {
        clearTimeout(timer);
    });

    const partialResponse =
        'All four regions are healthy. Error rates and response times remain within the release baseline.';
</script>

<div class="w-full max-w-2xl space-y-8">
    <Message.Root from="assistant" status={streaming ? 'streaming' : 'idle'}>
        <Message.Content>
            <ResponseStream textStream={partialResponse} speed={45} onComplete={finishResponse} />
        </Message.Content>
    </Message.Root>

    <Message.Root from="assistant" {status}>
        <Message.Content>
            {#if status === 'streaming'}
                <Markdown
                    content="Reconnecting to the warehouse and rebuilding the query"
                    streaming
                />
            {:else if status === 'idle'}
                <p>All four regions are healthy. The query completed after reconnecting.</p>
            {:else}
                <p>
                    The warehouse connection closed before the query completed. Retry when the
                    connection is available.
                </p>
            {/if}
        </Message.Content>
        {#if status === 'error'}
            <Message.Actions aria-label="Failed response actions">
                <Button variant="ghost" size="md" onclick={retry}>
                    <HugeiconsIcon icon={RotateCcw} size={14} aria-hidden="true" />
                    Retry response
                </Button>
            </Message.Actions>
        {/if}
    </Message.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/message](/docs/components/message).


---

Source: http://sveltekit-prerender/docs/components/question.md

# Question

Inline agent question form with single-choice, multiple-choice, and free-text answers.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, card, button, spinner, textarea
- Shared utilities: components/_internal/button-attributes, components/_internal/submission.svelte, hugeicons-icon, utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add question
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Actions

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Cancel

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| onclick | ((event: MouseEvent) => void) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Description

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| submitOnEnter | boolean \| undefined | true | No | No |
| autoresize | boolean \| undefined | true | No | No |
| placeholder | string \| undefined | 'Type your answer...' | No | No |
| aria-label | string \| undefined | 'Answer' | No | No |
| rows | number \| undefined | 2 | No | No |
| disabled | boolean \| undefined | false | No | No |
| readonly | boolean \| undefined | false | No | No |
| element | HTMLTextAreaElement \| undefined | — | No | Yes |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Option

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | string | — | Yes | No |
| label | string | — | Yes | No |
| description | string \| undefined | — | No | No |
| disabled | boolean \| undefined | false | No | No |
| element | HTMLInputElement \| undefined | — | No | Yes |
| class | string \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Options

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| variant | "inset" \| "default" \| undefined | 'default' | No | No |
| status | QuestionStatus \| undefined | 'idle' | No | No |
| disabled | boolean \| undefined | false | No | No |
| required | boolean \| undefined | true | No | No |
| autofocus | boolean \| undefined | false | No | No |
| name | string \| undefined | 'answer' | No | No |
| errorMessage | string \| undefined | 'Answer could not be submitted.' | No | No |
| onError | ((error: unknown) => void) \| undefined | — | No | No |
| onCancel | ((event: MouseEvent) => void) \| undefined | — | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| type | "text" \| "single" \| undefined \| "multiple" | 'single' | No | No |
| value | string \| undefined \| string[] \| undefined | — | No | Yes |
| onSubmit | (answer: string, event: SubmitEvent) => void \| Promise<void> \| (answer: string[], event: SubmitEvent) => void \| Promise<void> | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Submit

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Submit answer' | No | No |
| loadingLabel | string \| undefined | 'Submitting...' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| element | HTMLButtonElement \| HTMLAnchorElement \| undefined | — | No | Yes |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type {
    HTMLAttributes,
    HTMLButtonAttributes,
    HTMLFieldsetAttributes,
    HTMLFormAttributes,
    HTMLInputAttributes,
    HTMLTextareaAttributes
} from 'svelte/elements';
import Root from './question.svelte';
import Actions from './question-actions.svelte';
import Cancel from './question-cancel.svelte';
import Content from './question-content.svelte';
import Description from './question-description.svelte';
import Input from './question-input.svelte';
import Option from './question-option.svelte';
import Options from './question-options.svelte';
import Submit from './question-submit.svelte';
import Title from './question-title.svelte';

export type QuestionType = 'single' | 'multiple' | 'text';
export type QuestionAnswer = string | string[];
export type QuestionStatus = 'idle' | 'submitting' | 'error';

export type QuestionProps = {
    variant?: 'default' | 'inset';
    status?: QuestionStatus;
    disabled?: boolean;
    required?: boolean;
    autofocus?: boolean;
    name?: string;
    errorMessage?: string;
    onError?: (error: unknown) => void;
    onCancel?: (event: MouseEvent) => void;
    class?: string;
    children?: Snippet;
} & Omit<
    HTMLFormAttributes,
    'children' | 'class' | 'onsubmit' | 'action' | 'method' | 'target' | 'enctype' | 'name'
> &
    (
        | {
              type?: 'single' | 'text';
              value?: string;
              onSubmit: (answer: string, event: SubmitEvent) => void | Promise<void>;
          }
        | {
              type: 'multiple';
              value?: string[];
              onSubmit: (answer: string[], event: SubmitEvent) => void | Promise<void>;
          }
    );

export type QuestionContentProps = {
    class?: string;
    children?: Snippet;
} & Omit<HTMLFieldsetAttributes, 'children' | 'class'>;

export type QuestionTitleProps = {
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLLegendElement>, 'children' | 'class'>;

export type QuestionDescriptionProps = {
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLParagraphElement>, 'children' | 'class'>;

export type QuestionOptionsProps = {
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export type QuestionOptionProps = {
    value: string;
    label: string;
    description?: string;
    disabled?: boolean;
    element?: HTMLInputElement;
    class?: string;
} & Omit<
    HTMLInputAttributes,
    'type' | 'value' | 'name' | 'checked' | 'disabled' | 'children' | 'class'
>;

export type QuestionInputProps = {
    submitOnEnter?: boolean;
    autoresize?: boolean;
    placeholder?: string;
    'aria-label'?: string;
    rows?: number;
    disabled?: boolean;
    readonly?: boolean;
    element?: HTMLTextAreaElement;
    class?: string;
} & Omit<
    HTMLTextareaAttributes,
    | 'children'
    | 'class'
    | 'value'
    | 'name'
    | 'placeholder'
    | 'aria-label'
    | 'rows'
    | 'disabled'
    | 'readonly'
>;

export type QuestionActionsProps = {
    class?: string;
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'>;

export type QuestionActionProps = {
    children?: Snippet;
    onclick?: (event: MouseEvent) => void;
} & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'type'>;

export type QuestionSubmitProps = {
    label?: string;
    loadingLabel?: string;
    children?: Snippet;
    element?: HTMLButtonElement | HTMLAnchorElement;
} & Omit<HTMLButtonAttributes, 'children' | 'type'>;

export { Actions, Cancel, Content, Description, Input, Option, Options, Root, Submit, Title };
~~~~

## Examples

### Composer Takeover

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Composer from '@mielui/svelte/components/composer';
    import * as Conversation from '@mielui/svelte/components/conversation';
    import * as Message from '@mielui/svelte/components/message';
    import * as Question from '@mielui/svelte/components/question';

    let asking = $state(true);
    let answer = $state('');
    let draft = $state('Keep the migration reversible.');
    let sentPrompt = $state('');
    let shouldFocusQuestion = $state(false);

    function answerQuestion(value: string) {
        answer = value;
        asking = false;
    }

    function sendPrompt(value: string) {
        sentPrompt = value;
        draft = '';
    }
    function cancelQuestion() {
        asking = false;
    }
</script>

<div
    class="flex h-[34rem] w-full max-w-3xl flex-col gap-3 rounded-[var(--radius-xl)] border border-border bg-panel p-3"
>
    <Conversation.Root class="min-h-0 flex-1">
        <Conversation.Content aria-label="Migration planning conversation">
            <Message.Root from="user">
                <Message.Content>
                    Add the account migration and keep the rollout safe. I started a follow-up in
                    the composer.
                </Message.Content>
            </Message.Root>
            <Message.Root from="assistant">
                <Message.Content>
                    I can continue after I know which environment should receive the first run.
                </Message.Content>
            </Message.Root>
            {#if answer}
                <Message.Root from="user">
                    <Message.Content>
                        Use{Array.isArray(answer) ? answer.join(', ') : answer}
                        .
                    </Message.Content>
                </Message.Root>
            {/if}
            {#if sentPrompt}
                <Message.Root from="user">
                    <Message.Content>{sentPrompt}</Message.Content>
                </Message.Root>
            {/if}
        </Conversation.Content>
        <Conversation.ScrollButton />
    </Conversation.Root>

    <div>
        {#if asking}
            <Question.Root
                variant="inset"
                bind:value={answer}
                autofocus={shouldFocusQuestion}
                onSubmit={answerQuestion}
            >
                <Question.Content>
                    <Question.Title>Where should I run the migration first?</Question.Title>
                    <Question.Description>
                        Your unsent composer draft will stay in place while you answer.
                    </Question.Description>
                    <Question.Options>
                        <Question.Option
                            value="preview"
                            label="Preview environment"
                            description="Validate against a disposable copy first."
                        />
                        <Question.Option
                            value="staging"
                            label="Staging environment"
                            description="Run against the shared pre-production data."
                        />
                    </Question.Options>
                </Question.Content>
                <Question.Actions>
                    <Question.Cancel onclick={cancelQuestion}>Skip question</Question.Cancel>
                    <Question.Submit />
                </Question.Actions>
            </Question.Root>
        {:else}
            <Composer.Root bind:value={draft} onSubmit={sendPrompt}>
                <Composer.Input aria-label="Message the agent" />
                <Composer.Toolbar>
                    <Composer.Actions>
                        <Button
                            variant="quiet"
                            size="md"
                            onclick={() => {
                                shouldFocusQuestion = true;
                                asking = true;
                            }}
                        >
                            Ask again
                        </Button>
                    </Composer.Actions>
                    <Composer.Submit />
                </Composer.Toolbar>
            </Composer.Root>
        {/if}
    </div>
</div>
~~~~

### Free Text

~~~~svelte
<script lang="ts">
    import * as Question from '@mielui/svelte/components/question';

    let answer = $state('');
    let submitted = $state('');
</script>

<div class="flex w-full max-w-2xl flex-col gap-3">
    <Question.Root
        variant="inset"
        type="text"
        bind:value={answer}
        onSubmit={(value) => {
            submitted = Array.isArray(value) ? value.join(', ') : value;
        }}
    >
        <Question.Content>
            <Question.Title>What constraint should I preserve?</Question.Title>
            <Question.Description>
                Add any implementation detail that is not captured by the current plan.
            </Question.Description>
            <Question.Input placeholder="For example: Keep the existing API stable" />
        </Question.Content>
        <Question.Actions>
            <Question.Submit />
        </Question.Actions>
    </Question.Root>

    <p class="min-h-5 text-sm text-foreground-muted" role="status">
        {submitted ? `Answer: ${submitted}` : 'Waiting for an answer'}
    </p>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { ArrowLeft02Icon as ArrowLeft } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as Question from '@mielui/svelte/components/question';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    const questions = [
        {
            title: 'Where should we start?',
            description: 'Choose a starting point for the next round of work.',
            options: [
                {
                    value: 'interface',
                    label: 'The interface',
                    description: 'Refine the screens people use every day.'
                },
                {
                    value: 'workflow',
                    label: 'The workflow',
                    description: 'Make the path from start to finish simpler.'
                },
                {
                    value: 'foundation',
                    label: 'The foundation',
                    description: 'Improve the architecture behind the product.'
                }
            ]
        },
        {
            title: 'How much should change?',
            description: 'Set the scope so the work stays focused.',
            options: [
                {
                    value: 'polish',
                    label: 'A little polish',
                    description: 'Keep the structure and refine the details.'
                },
                {
                    value: 'focused',
                    label: 'A focused update',
                    description: 'Rework one part of the experience.'
                },
                {
                    value: 'rethink',
                    label: 'A fresh direction',
                    description: 'Explore a different approach from the ground up.'
                }
            ]
        },
        {
            title: 'What should I bring back?',
            description: 'Choose what you want to review before we continue.',
            options: [
                {
                    value: 'plan',
                    label: 'A clear plan',
                    description: 'Outline the changes and their trade-offs.'
                },
                {
                    value: 'prototype',
                    label: 'A working prototype',
                    description: 'Make the idea tangible and easy to try.'
                },
                {
                    value: 'implementation',
                    label: 'The implementation',
                    description: 'Build the change and summarize the result.'
                }
            ]
        }
    ];
    let step = $state(0);
    let answers = $state<string[]>(['', '', '']);
    const complete = $derived(step === questions.length);
    const question = $derived(questions[Math.min(step, questions.length - 1)]);

    function next() {
        if (!complete) {
            step += 1;
        }
    }

    function restart() {
        answers = ['', '', ''];
        step = 0;
    }
</script>

<div class="w-full max-w-xl">
    <Question.Root variant="inset" bind:value={answers[step]} required={!complete} onSubmit={next}>
        <Question.Content class="min-h-80">
            {#if complete}
                <Question.Title>Ready to get started</Question.Title>
                <Question.Description>
                    Here’s the direction you chose. You can go back to adjust it.
                </Question.Description>
                <dl class="grid gap-4 px-4 py-5">
                    {#each questions as item, index (item.title)}
                        <div class="grid gap-1">
                            <dt class="text-xs text-foreground-muted">{item.title}</dt>
                            <dd class="m-0 text-sm font-medium">
                                {item.options.find((option) => option.value === answers[index])?.label}
                            </dd>
                        </div>
                    {/each}
                </dl>
            {:else}
                <Question.Title>{question.title}</Question.Title>
                <Question.Description>{question.description}</Question.Description>
                <Question.Options>
                    {#each question.options as option (option.value)}
                        <Question.Option {...option} />
                    {/each}
                </Question.Options>
            {/if}
        </Question.Content>
        <Question.Actions>
            <span class="me-auto text-xs tabular-nums text-foreground-muted" role="status">
                {complete ? 'All questions answered' : `Question ${step + 1} of ${questions.length}`}
            </span>
            <Question.Cancel
                disabled={step === 0}
                onclick={(event) => {
                    event.preventDefault();
                    step -= 1;
                }}
            >
                <HugeiconsIcon icon={ArrowLeft} size={14} aria-hidden="true" />
                Back
            </Question.Cancel>
            {#if complete}
                <Button type="button" variant="primary" size="md" onclick={restart}>
                    Start again
                </Button>
            {:else}
                <Question.Submit label={step === questions.length - 1 ? 'Finish' : 'Next'} />
            {/if}
        </Question.Actions>
    </Question.Root>
</div>
~~~~

### Multiple Choice

~~~~svelte
<script lang="ts">
    import * as Question from '@mielui/svelte/components/question';

    let answer = $state<string[]>([]);
    let summary = $state('');
</script>

<div class="flex w-full max-w-2xl flex-col gap-3">
    <Question.Root
        variant="inset"
        type="multiple"
        bind:value={answer}
        onSubmit={(value) => {
            summary = Array.isArray(value) ? value.join(', ') : value;
        }}
    >
        <Question.Content>
            <Question.Title>
                Which checks should I run before opening the pull request?
            </Question.Title>
            <Question.Description>Select every check you want included.</Question.Description>
            <Question.Options>
                <Question.Option value="tests" label="Test suite" />
                <Question.Option value="types" label="Type checking" />
                <Question.Option value="build" label="Production build" />
                <Question.Option value="browser" label="Browser smoke test" />
            </Question.Options>
        </Question.Content>
        <Question.Actions>
            <Question.Submit label="Run selected checks" />
        </Question.Actions>
    </Question.Root>

    <p class="min-h-5 text-sm text-foreground-muted" role="status">
        {summary ? `Queued: ${summary}` : 'No checks queued'}
    </p>
</div>
~~~~

For the rendered reference, visit [/docs/components/question](/docs/components/question).


---

Source: http://sveltekit-prerender/docs/components/reasoning.md

# Reasoning

Expandable model reasoning status and trace for AI responses. Its trigger uses the Button quiet variant for a low-emphasis, no-hover-fill control.

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils, _internal/disclosure, button
- Shared utilities: components/_internal/button-attributes, hugeicons-icon, utils.cn, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add reasoning
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| streaming | boolean \| undefined | false | No | No |
| open | boolean \| undefined | true | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| onOpenChangeComplete | ((open: boolean) => void) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| title | string \| undefined | 'Draft' | No | No |
| duration | string \| undefined | — | No | No |
| children | Snippet<[Readonly<{ open: boolean; streaming: boolean; }>]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import Root from './reasoning.svelte';
import Content from './reasoning-content.svelte';
import Trigger from './reasoning-trigger.svelte';

export type ReasoningRootProps = {
    streaming?: boolean;
    /** Whether the reasoning content is visible. */
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    onOpenChangeComplete?: (open: boolean) => void;
    children?: Snippet;
} & Omit<DefaultProps, 'children'> &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type ReasoningTriggerProps = {
    title?: string;
    /** A compact summary of the completed reasoning time, such as 2.4s. */
    duration?: string;
    children?: Snippet<[ReasoningTriggerState]>;
} & Omit<DefaultProps, 'children'> &
    Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'title'>;

export type ReasoningTriggerState = Readonly<{
    open: boolean;
    streaming: boolean;
}>;

export type ReasoningContentProps = DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'>;

export { Content, Root, Trigger };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Reasoning from '@mielui/svelte/components/reasoning';
</script>

<Reasoning.Root class="w-full max-w-xl">
    <Reasoning.Trigger title="Investigated checkout failures" duration="4.8s" />
    <Reasoning.Content>
        <div class="space-y-3">
            <p>Compared the incident timeline with the last five production deployments.</p>
            <p>
                Filtered payment errors by issuer country and found the regression only affects
                non-US cards.
            </p>
            <p>
                Matched the first failing request to the new address-verification rule shipped by
                the provider.
            </p>
        </div>
    </Reasoning.Content>
</Reasoning.Root>
~~~~

### Streaming

~~~~svelte
<script lang="ts">
    import * as Reasoning from '@mielui/svelte/components/reasoning';
    import { ResponseStream } from '@mielui/svelte/components/response-stream';

    let streaming = $state(true);

    function complete() {
        streaming = false;
    }

    const trace =
        'Checking the release history, recent errors, and payment-provider status against the incident timeline.';
</script>

<Reasoning.Root class="w-full max-w-xl" {streaming} open>
    <Reasoning.Trigger />
    <Reasoning.Content>
        <ResponseStream
            textStream={trace}
            speed={45}
            onComplete={complete}
            class="text-foreground-muted"
        />
    </Reasoning.Content>
</Reasoning.Root>
~~~~

For the rendered reference, visit [/docs/components/reasoning](/docs/components/reasoning).


---

Source: http://sveltekit-prerender/docs/components/response-stream.md

# Response Stream

Streaming AI response text with bounded arrival motion and natural line wrapping.

- Package: `@mielui/svelte`
- Component version: `2.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: transition, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add response-stream
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### ResponseStream

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| textStream | string \| AsyncIterable<string> | — | Yes | No |
| streaming | boolean \| undefined | false | No | No |
| speed | number \| undefined | 20 | No | No |
| characterChunkSize | number \| undefined | — | No | No |
| onComplete | (() => void) \| undefined | — | No | No |
| onError | ((error: unknown) => void) \| undefined | — | No | No |
| as | keyof SvelteHTMLElements \| undefined | 'span' | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
import ResponseStream from './response-stream.svelte';

export type ResponseStreamProps = {
    /** A complete response or an async source of response chunks. */
    textStream: string | AsyncIterable<string>;
    /** Treat string values as cumulative snapshots of one live response. */
    streaming?: boolean;
    /** 1 is slowest and 100 is fastest: reveal pace for static strings, roll duration for arrivals. Live chunks render on arrival. */
    speed?: number;
    /** Whole graphemes revealed per step; finite values are rounded down with a minimum of one. */
    characterChunkSize?: number;
    onComplete?: () => void;
    onError?: (error: unknown) => void;
    as?: keyof SvelteHTMLElements;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export { ResponseStream };
~~~~

## Examples

### Complete

~~~~svelte
<script lang="ts">
    import { ResponseStream } from '@mielui/svelte/components/response-stream';
</script>
<div class="w-full max-w-md text-sm leading-relaxed">
    <ResponseStream
        textStream="Your draft is ready. Review the changes, then share it with your team."
        speed={65}
    />
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { ResponseStream } from '@mielui/svelte/components/response-stream';

    import { onDestroy } from 'svelte';

    let stopped = false;
    let timer: ReturnType<typeof setTimeout> | undefined;
    let settle: (() => void) | undefined;

    onDestroy(() => {
        stopped = true;
        clearTimeout(timer);
        settle?.();
    });

    const text =
        'The release contains twelve changes. Two affect keyboard navigation, four update the documentation, and six fix existing behavior. Keep the current API unchanged, run the component checks, then review the preview before deploying. The rollback is the previous release tag.';

    function wait(ms: number) {
        return new Promise<void>((resolve) => {
            settle = resolve;
            timer = setTimeout(() => {
                settle = undefined;
                resolve();
            }, ms);
        });
    }

    async function* delayedResponse() {
        await wait(1200);

        const parts = text.split(/(\s+)/);
        for (const part of parts) {
            if (stopped) {
                return;
            }
            yield part;
            await wait(40);
        }
    }
</script>

<div class="w-full max-w-xl">
    <ResponseStream textStream={delayedResponse()} speed={10} />
</div>
~~~~

### Lifecycle

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { ResponseStream } from '@mielui/svelte/components/response-stream';
    import { Switch } from '@mielui/svelte/components/switch';
    import { onDestroy } from 'svelte';

    const answer =
        'The release is ready for review. The migration keeps the existing API stable, adds keyboard checks, and documents the rollback steps. Start with the canary region, then compare error rates before widening the rollout.';
    let content = $state('');
    let delivery = $state<'idle' | 'streaming' | 'complete' | 'stopped' | 'error'>('idle');
    let fail = $state(false);
    let timer: ReturnType<typeof setInterval> | undefined;

    function stop() {
        clearInterval(timer);
        timer = undefined;
        delivery = 'stopped';
    }

    function start() {
        clearInterval(timer);
        content = '';
        delivery = 'streaming';
        const shouldFail = fail;
        timer = setInterval(() => {
            if (shouldFail && content.length >= 80) {
                clearInterval(timer);
                timer = undefined;
                delivery = 'error';
                return;
            }
            content = answer.slice(0, content.length + 5);
            if (content === answer) {
                clearInterval(timer);
                timer = undefined;
                delivery = 'complete';
            }
        }, 65);
    }

    onDestroy(() => {
        clearInterval(timer);
    });
</script>

<div class="w-full max-w-xl space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Button onclick={start} disabled={delivery === 'streaming'}>
            {delivery === 'error' ? 'Retry response' : 'Start response'}
        </Button>
        <Button variant="secondary" onclick={stop} disabled={delivery !== 'streaming'}>Stop</Button>
        <Switch bind:checked={fail} label="Simulate interrupted connection" />
    </div>
    <div class="min-h-24">
        {#if delivery !== 'idle'}
            <ResponseStream textStream={content} streaming={delivery === 'streaming'} />
        {/if}
    </div>
    <p role="status" class="text-sm text-foreground-muted">
        {delivery === 'error' ? 'Connection lost. Turn off simulated failure and retry.' : delivery === 'complete' ? 'Response complete.' : delivery === 'stopped' ? 'Stopped. Partial text stays visible.' : delivery === 'streaming' ? 'Receiving response…' : 'Start a simulated response. No request leaves your browser.'}
    </p>
</div>
~~~~

For the rendered reference, visit [/docs/components/response-stream](/docs/components/response-stream).


---

Source: http://sveltekit-prerender/docs/components/tool.md

# Tool

Compact, expandable AI tool calls for chat transcripts. Use variant="quiet" for a low-emphasis, no-hover-fill task summary.

- Package: `@mielui/svelte`
- Component version: `1.2.0`
- Depends on Mielui components: _internal/utils, _internal/disclosure, spinner
- Shared utilities: hugeicons-icon, utils.cn, utils.pressable, utils.createContext, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add tool
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Content

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Input

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Input' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Item

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| name | string | — | Yes | No |
| detail | string \| undefined | — | No | No |
| kind | "search" \| "command" \| "read" \| undefined | 'command' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Output

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| label | string \| undefined | 'Output' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| name | string | — | Yes | No |
| state | ToolState \| undefined | 'running' | No | No |
| variant | ToolVariant \| undefined | 'default' | No | No |
| duration | string \| undefined | — | No | No |
| open | boolean \| undefined | true | No | Yes |
| onOpenChange | ((open: boolean) => void) \| undefined | — | No | No |
| onOpenChangeComplete | ((open: boolean) => void) \| undefined | — | No | No |
| composed | boolean \| undefined | false | No | No |
| trigger | Snippet<[Readonly<{ open: boolean; state: ToolState; name: string; duration?: string \| undefined; }>]> \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |
| class | (string & (ClassValue \| null)) \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Trigger

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[Readonly<{ open: boolean; state: ToolState; name: string; duration?: string \| undefined; }>]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
import Root from './tool.svelte';
import Content from './tool-content.svelte';
import Input from './tool-input.svelte';
import Item from './tool-item.svelte';
import Output from './tool-output.svelte';
import Trigger from './tool-trigger.svelte';

export type ToolState = 'running' | 'complete' | 'error';
export type ToolVariant = 'default' | 'quiet';

export type ToolProps = {
    /** A concise summary of the work completed by this task group. */
    name: string;
    state?: ToolState;
    /** A low-emphasis presentation for inline transcript details. */
    variant?: ToolVariant;
    /** A compact summary of how long the task took, such as 6s. */
    duration?: string;
    /** Whether the individual tool calls are visible. */
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    onOpenChangeComplete?: (open: boolean) => void;
    /** Render explicit Trigger and Content parts through children. */
    composed?: boolean;
    trigger?: Snippet<[ToolTriggerState]>;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLElement>, 'children'>;

export type ToolTriggerState = Readonly<{
    open: boolean;
    state: ToolState;
    name: string;
    duration?: string;
}>;

export type ToolItemProps = {
    name: string;
    detail?: string;
    kind?: 'command' | 'search' | 'read';
} & DefaultProps;

export type ToolInputProps = {
    label?: string;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ToolOutputProps = {
    label?: string;
    children?: Snippet;
} & DefaultProps &
    Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export type ToolTriggerProps = {
    children?: Snippet<[ToolTriggerState]>;
} & Omit<HTMLButtonAttributes, 'children'>;

export type ToolContentProps = {
    children?: Snippet;
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export { Content, Input, Item, Output, Root, Trigger };
~~~~

## Examples

### Hero

~~~~svelte
<script lang="ts">
    import * as Tool from '@mielui/svelte/components/tool';
</script>

<Tool.Root name="1 file, 1 search, and 1 command" state="complete" duration="6s">
    <Tool.Item name="Bash" detail="pnpm lint" />
    <Tool.Item name="Grep" detail="Composer" kind="search" />
    <Tool.Item name="Read" detail="src/components/composer.svelte" kind="read" />
</Tool.Root>
~~~~

### Quiet

~~~~svelte
<script lang="ts">
    import * as Tool from '@mielui/svelte/components/tool';
</script>

<Tool.Root name="Searched release history" state="complete" duration="2.4s" variant="quiet">
    <Tool.Item name="Grep" detail="release notes" kind="search" />
</Tool.Root>
~~~~

### Retry

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Tool from '@mielui/svelte/components/tool';
    import { onDestroy } from 'svelte';

    let state = $state<'error' | 'running' | 'complete'>('error');
    let timer: ReturnType<typeof setTimeout> | undefined;

    function retry() {
        state = 'running';
        timer = setTimeout(() => {
            state = 'complete';
        }, 1200);
    }

    onDestroy(() => {
        clearTimeout(timer);
    });
</script>

<div class="w-full max-w-xl space-y-3">
    <Tool.Root name="Check release notes" {state} composed open>
        <Tool.Trigger />
        <Tool.Content>
            <Tool.Input><code>read release-notes.md</code></Tool.Input>
            <Tool.Output>
                {state === 'error' ? 'The file service timed out.' : state === 'running' ? 'Reading the file…' : 'Found 12 changes. No breaking API changes.'}
            </Tool.Output>
        </Tool.Content>
    </Tool.Root>
    <Button variant="secondary" onclick={retry} disabled={state !== 'error'}>
        Retry file read
    </Button>
</div>
~~~~

### Tool States

~~~~svelte
<script lang="ts">
    import * as Tool from '@mielui/svelte/components/tool';
    import { onMount } from 'svelte';

    let elapsedTenths = $state(0);
    let running = $state(true);
    let elapsed = $derived(`${(elapsedTenths / 10).toFixed(1)}s`);

    onMount(() => {
        const id = setInterval(() => {
            elapsedTenths += 1;
            if (elapsedTenths >= 24) {
                running = false;
                clearInterval(id);
            }
        }, 100);
        return () => {
            clearInterval(id);
        };
    });
</script>

<div class="flex w-full max-w-xl flex-col gap-3">
    <Tool.Root name="2 customer records" state="complete" duration="1.2s">
        <Tool.Item name="Grep" detail="cus_4f81" kind="search" />
        <Tool.Item name="Read" detail="refund status" kind="read" />
    </Tool.Root>
    <Tool.Root name="1 recipient" state={running ? 'running' : 'complete'} duration={elapsed}>
        <Tool.Item name="Bash" detail="validate recipient address" />
    </Tool.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/tool](/docs/components/tool).


---

Source: http://sveltekit-prerender/docs/components/chart.md

# Chart

Composable animated bar, line, and area charts built on LayerChart.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, card, skeleton
- Shared utilities: components/_internal/surface, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Chart guides

- [Bar chart](/docs/components/chart/bar.md): Compare categories with grouped or stacked bars.
- [Line chart](/docs/components/chart/line.md): Follow changes over time without a filled area.
- [Area chart](/docs/components/chart/area.md): Show the amount over time with a filled series.
- [Mixed chart](/docs/components/chart/mixed.md): Compare totals and benchmarks in one plot.

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Area

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| key | string | — | Yes | No |
| class | string \| undefined | — | No | No |
| strokeWidth | number \| undefined | — | No | No |



### Bar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| key | string | — | Yes | No |
| class | string \| undefined | — | No | No |
| radius | number \| undefined | 4 | No | No |



### Grid

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| ticks | number \| undefined | 5 | No | No |



### Legend

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[{ key: string; label: string; color: string; }]> \| undefined | — | No | No |



### Line

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| key | string | — | Yes | No |
| class | string \| undefined | — | No | No |
| strokeWidth | number \| undefined | — | No | No |



### Plot

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | — | No | No |
| empty | Snippet<[]> \| undefined | — | No | No |
| loading | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| aria-label | string | — | Yes | No |
| data | readonly T[] | — | Yes | No |
| config | { [x: string]: { label: string; color?: string \| undefined; format?: ((value: number) => string) \| undefined; }; } | — | Yes | No |
| x | string | — | Yes | No |
| orientation | "horizontal" \| "vertical" \| undefined | 'vertical' | No | No |
| stacked | boolean \| undefined | false | No | No |
| loading | boolean \| undefined | false | No | No |
| animation | "none" \| "reveal" \| "live" \| undefined | 'reveal' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Tooltip

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| children | Snippet<[{ label: string; values: { key: string; label: string; value: number; formatted: string; color: string; }[]; }]> \| undefined | — | No | No |



### XAxis

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| ticks | number \| undefined | — | No | No |
| format | ((value: string \| number) => string) \| undefined | — | No | No |



### YAxis

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| class | string \| undefined | — | No | No |
| ticks | number \| undefined | — | No | No |
| format | ((value: string \| number) => string) \| undefined | — | No | No |



### Public types

~~~~ts
export { default as Area } from './area.svelte';
export { default as Bar } from './bar.svelte';
export { default as Grid } from './grid.svelte';
export { default as Legend } from './legend.svelte';
export { default as Line } from './line.svelte';
export { default as Plot } from './plot.svelte';
export { default as Root } from './root.svelte';
export { default as Tooltip } from './tooltip.svelte';
export { default as XAxis } from './x-axis.svelte';
export { default as YAxis } from './y-axis.svelte';
~~~~

## Examples

### Area States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state<'reveal' | 'live' | 'none'>('reveal');
    let replay = $state(0);
    const records = [
        { month: 'April', orders: 48, target: 60 },
        { month: 'May', orders: 72, target: 65 },
        { month: 'June', orders: 61, target: 70 }
    ];
    const config = { orders: { label: 'Orders', color: 'var(--chart-1)' } };
    const data = $derived(dataState === 'empty' ? [] : records);
    function changeAnimation(value: string) {
        if (value === 'reveal' || value === 'live' || value === 'none') {
            animation = value;
        }
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Chart data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Chart animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={() => { replay += 1; }}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Chart.Root
            {data}
            {config}
            {animation}
            x="month"
            loading={dataState === 'loading'}
            aria-label="Quarterly orders"
        >
            <Chart.Plot>
                <Chart.Grid />
                <Chart.XAxis />
                <Chart.YAxis />
                <Chart.Area key="orders" />
            </Chart.Plot>
            <Chart.Legend />
            <Chart.Tooltip />
        </Chart.Root>
    {/key}
</div>
~~~~

### Bar States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state<'reveal' | 'live' | 'none'>('reveal');
    let replay = $state(0);
    const records = [
        { month: 'April', orders: 48, target: 60 },
        { month: 'May', orders: 72, target: 65 },
        { month: 'June', orders: 61, target: 70 }
    ];
    const config = { orders: { label: 'Orders', color: 'var(--chart-1)' } };
    const data = $derived(dataState === 'empty' ? [] : records);
    function changeAnimation(value: string) {
        if (value === 'reveal' || value === 'live' || value === 'none') {
            animation = value;
        }
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Chart data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Chart animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={() => { replay += 1; }}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Chart.Root
            {data}
            {config}
            {animation}
            x="month"
            loading={dataState === 'loading'}
            aria-label="Quarterly orders"
        >
            <Chart.Plot>
                <Chart.Grid />
                <Chart.XAxis />
                <Chart.YAxis />
                <Chart.Bar key="orders" />
            </Chart.Plot>
            <Chart.Legend />
            <Chart.Tooltip />
        </Chart.Root>
    {/key}
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Area key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Line States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state<'reveal' | 'live' | 'none'>('reveal');
    let replay = $state(0);
    const records = [
        { month: 'April', orders: 48, target: 60 },
        { month: 'May', orders: 72, target: 65 },
        { month: 'June', orders: 61, target: 70 }
    ];
    const config = { orders: { label: 'Orders', color: 'var(--chart-1)' } };
    const data = $derived(dataState === 'empty' ? [] : records);
    function changeAnimation(value: string) {
        if (value === 'reveal' || value === 'live' || value === 'none') {
            animation = value;
        }
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Chart data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Chart animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={() => { replay += 1; }}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Chart.Root
            {data}
            {config}
            {animation}
            x="month"
            loading={dataState === 'loading'}
            aria-label="Quarterly orders"
        >
            <Chart.Plot>
                <Chart.Grid />
                <Chart.XAxis />
                <Chart.YAxis />
                <Chart.Line key="orders" />
            </Chart.Plot>
            <Chart.Legend />
            <Chart.Tooltip />
        </Chart.Root>
    {/key}
</div>
~~~~

### Mixed States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state<'reveal' | 'live' | 'none'>('reveal');
    let replay = $state(0);
    const records = [
        { month: 'April', orders: 48, target: 60 },
        { month: 'May', orders: 72, target: 65 },
        { month: 'June', orders: 61, target: 70 }
    ];
    const config = {
        orders: { label: 'Orders', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
    const data = $derived(dataState === 'empty' ? [] : records);
    function changeAnimation(value: string) {
        if (value === 'reveal' || value === 'live' || value === 'none') {
            animation = value;
        }
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Chart data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Chart animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={() => { replay += 1; }}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Chart.Root
            {data}
            {config}
            {animation}
            x="month"
            loading={dataState === 'loading'}
            aria-label="Quarterly orders"
        >
            <Chart.Plot>
                <Chart.Grid />
                <Chart.XAxis />
                <Chart.YAxis />
                <Chart.Bar key="orders" />
                <Chart.Line key="target" />
            </Chart.Plot>
            <Chart.Legend />
            <Chart.Tooltip />
        </Chart.Root>
    {/key}
</div>
~~~~

### States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/chart';
    import * as EmptyState from '@mielui/svelte/components/empty-state';

    let state = $state<'ready' | 'loading' | 'empty'>('ready');
    const records = [
        { month: 'April', orders: 48 },
        { month: 'May', orders: 72 },
        { month: 'June', orders: 61 }
    ];
    const data = $derived(state === 'empty' ? [] : records);
    const config = { orders: { label: 'Orders', color: 'var(--chart-1)' } };

    function showReady() {
        state = 'ready';
    }

    function showLoading() {
        state = 'loading';
    }

    function showEmpty() {
        state = 'empty';
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap gap-2">
        <Button variant="secondary" onclick={showReady}>Show data</Button>
        <Button variant="secondary" onclick={showLoading}>Show loading</Button>
        <Button variant="secondary" onclick={showEmpty}>Show empty</Button>
    </div>
    <Chart.Root
        {data}
        {config}
        x="month"
        loading={state === 'loading'}
        aria-label="Orders this quarter"
    >
        <Chart.Plot>
            {#snippet empty()}
                <EmptyState.Root class="border-0 p-4">
                    <EmptyState.Header>
                        <EmptyState.Title>No orders in this period</EmptyState.Title>
                        <EmptyState.Description>
                            Try another period to see your order history.
                        </EmptyState.Description>
                    </EmptyState.Header>
                    <EmptyState.Actions>
                        <Button variant="secondary" onclick={showReady}>Show last quarter</Button>
                    </EmptyState.Actions>
                </EmptyState.Root>
            {/snippet}
            <Chart.Grid />
            <Chart.XAxis />
            <Chart.YAxis />
            <Chart.Bar key="orders" />
        </Chart.Plot>
        <Chart.Tooltip />
    </Chart.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/chart](/docs/components/chart).


---

Source: http://sveltekit-prerender/docs/components/gauge.md

# Gauge

Circular meter for bounded quantities such as context remaining, usage limits, storage, and seats.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, skeleton
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add gauge
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Gauge

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| value | number \| null | — | Yes | No |
| loading | boolean \| undefined | false | No | No |
| max | number \| undefined | 100 | No | No |
| label | string \| undefined | — | No | No |
| size | number \| undefined | 120 | No | No |
| strokeWidth | number \| undefined | — | No | No |
| animation | "none" \| "reveal" \| "live" \| undefined | 'reveal' | No | No |
| tone | GaugeTone \| undefined | 'primary' | No | No |
| class | string \| undefined | — | No | No |
| children | Snippet<[]> \| undefined | — | No | No |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import Gauge from './gauge.svelte';

export type GaugeTone = 'primary' | 'muted' | 'success' | 'warning' | 'error';

export type GaugeProps = {
    /** The bounded quantity shown by the filled arc. Pass null when no measurement is available. */
    value: number | null;
    /** Show a loading ring while the measurement is being fetched. */
    loading?: boolean;
    max?: number;
    /** Describes the quantity, such as "Context remaining" or "Monthly API usage". */
    label?: string;
    /** Diameter in pixels. Defaults to 120; use an explicit size for inline meters. */
    size?: number;
    /** Track and arc thickness in pixels. Defaults to 9.75% of the diameter, with a 3px minimum. */
    strokeWidth?: number;
    /** Reveal the arc, highlight it continuously, or disable animation. */
    animation?: 'reveal' | 'live' | 'none';
    tone?: GaugeTone;
} & DefaultProps;

export { Gauge };
export default Gauge;
~~~~

## Examples

### Context Window

~~~~svelte
<script lang="ts">
    import { Gauge } from '@mielui/svelte/components/gauge';
</script>

<div class="flex flex-wrap items-center justify-center gap-10">
    <div class="flex items-center gap-3">
        <Gauge value={85} label="Context remaining" size={32} tone="muted">85</Gauge>
        <div class="text-sm">
            <p class="font-medium text-foreground">Context remaining</p>
            <p class="text-foreground-muted">85% available</p>
        </div>
    </div>
    <Gauge value={85} label="Context remaining" size={160}>
        <span class="flex flex-col items-center gap-2">
            <span>85<span class="text-xl text-foreground-muted">%</span></span>
            <span class="text-xs font-normal tracking-normal text-foreground-muted">remaining</span>
        </span>
    </Gauge>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import { fromAction } from 'svelte/attachments';

    let usage = $state(72);
    function updateUsage() {
        usage = usage === 72 ? 91 : 72;
    }
</script>

<div class="flex flex-col items-center gap-6">
    <Gauge value={usage} label="Monthly API usage" tone={usage > 85 ? 'warning' : 'primary'}>
        <span>
            <span {@attach fromAction(numberShuffle, () => ({ value: usage }))}>{usage}</span>
            <span class="text-base text-foreground-muted">%</span>
        </span>
    </Gauge>
    <div class="text-center">
        <p class="font-medium text-foreground">Monthly API usage</p>
        <p class="mt-1 text-sm text-foreground-muted">{usage},000 of 100,000 requests</p>
    </div>
    <Button variant="secondary" onclick={updateUsage}>Update usage</Button>
</div>
~~~~

### Interactive

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import { fromAction } from 'svelte/attachments';

    let used = $state(48);

    function addFiles() {
        used = Math.min(64, used + 8);
    }

    function clearFiles() {
        used = 16;
    }
</script>

<div class="flex flex-col items-center gap-5">
    <Gauge
        value={used}
        max={64}
        label="Storage used in gigabytes"
        tone={used >= 56 ? 'warning' : 'primary'}
    >
        <span class="flex flex-col items-center gap-1">
            <span {@attach fromAction(numberShuffle, () => ({ value: used }))}>{used}</span>
            <span class="text-xs font-normal text-foreground-muted">of 64 GB</span>
        </span>
    </Gauge>
    <div class="flex flex-wrap gap-2">
        <Button onclick={addFiles} disabled={used === 64}>Add 8 GB</Button>
        <Button variant="secondary" onclick={clearFiles}>Clear old files</Button>
    </div>
</div>
~~~~

### States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Gauge } from '@mielui/svelte/components/gauge';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state('reveal');
    const motion = $derived(
        animation === 'live' ? 'live' : animation === 'none' ? 'none' : 'reveal'
    );
    let replay = $state(0);

    function replayAnimation() {
        replay += 1;
    }
</script>
<div class="w-full space-y-6">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Storage data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                    <Tabs.Trigger value="zero">Zero</Tabs.Trigger>
                    <Tabs.Trigger value="full">Full</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root bind:value={animation} variant="ghost">
            <div role="group" aria-label="Gauge animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={replayAnimation}>Replay</Button>
    </div>
    <div class="flex min-h-64 items-center justify-center">
        {#key `${animation}-${replay}`}
            <div class="flex flex-col items-center gap-3">
                <Gauge
                    value={dataState === 'empty' ? null : dataState === 'zero' ? 0 : dataState === 'full' ? 100 : 64}
                    loading={dataState === 'loading'}
                    max={100}
                    animation={motion}
                    label="Storage used in GB"
                />
                <p class="text-sm text-foreground-muted">GB used of 100 GB</p>
            </div>
        {/key}
    </div>
</div>
~~~~

### Usage Limit

~~~~svelte
<script lang="ts">
    import { Gauge } from '@mielui/svelte/components/gauge';
</script>

<div class="flex flex-wrap justify-center gap-10">
    <div class="flex flex-col items-center gap-4">
        <Gauge value={48} max={64} label="Storage used in gigabytes" tone="primary">
            <span class="flex flex-col items-center gap-1">
                <span>48</span>
                <span class="text-xs font-normal text-foreground-muted">of 64 GB</span>
            </span>
        </Gauge>
        <p class="text-sm text-foreground-muted">Storage</p>
    </div>
    <div class="flex flex-col items-center gap-4">
        <Gauge value={18} max={20} label="Team seats used" tone="warning">18</Gauge>
        <p class="text-sm text-foreground-muted">18 of 20 seats</p>
    </div>
    <div class="flex flex-col items-center gap-4">
        <Gauge value={100} label="Backup completion" tone="success">
            100<span class="text-sm">%</span>
        </Gauge>
        <p class="text-sm text-foreground-muted">Backup complete</p>
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/gauge](/docs/components/gauge).


---

Source: http://sveltekit-prerender/docs/components/heatmap.md

# Heatmap

Daily activity in a keyboard-navigable contribution calendar.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, tooltip, skeleton
- Shared utilities: components/_internal/surface, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add heatmap
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| days | readonly Day[] | — | Yes | No |
| weeks | number \| undefined | 26 | No | No |
| loading | boolean \| undefined | false | No | No |
| animation | "none" \| "rows" \| "columns" \| "live" \| undefined | 'rows' | No | No |
| endDate | string \| undefined | — | No | No |
| weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined | 0 | No | No |
| locale | string \| undefined | 'en-US' | No | No |
| onDaySelect | ((day: Cell) => void) \| undefined | — | No | No |
| children | Snippet<[{ days: readonly Cell[]; total: number; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Calendar

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Cell

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| day | { date: string; count: number; level: number; column: number; row: number; label: string; } | — | Yes | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Detail

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[Cell \| undefined]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Footer

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Grid

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[readonly Cell[]]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Legend

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### MonthLabels

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Summary

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[number]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Tooltip

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### WeekdayLabels

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
export { default as Root } from './heatmap.svelte';
export { default as Calendar } from './heatmap-calendar.svelte';
export { default as Cell } from './heatmap-cell.svelte';
export { default as Detail } from './heatmap-detail.svelte';
export { default as Footer } from './heatmap-footer.svelte';
export { default as Grid } from './heatmap-grid.svelte';
export { default as Header } from './heatmap-header.svelte';
export { default as Legend } from './heatmap-legend.svelte';
export { default as MonthLabels } from './heatmap-month-labels.svelte';
export { default as Summary } from './heatmap-summary.svelte';
export { default as Tooltip } from './heatmap-tooltip.svelte';
export { default as WeekdayLabels } from './heatmap-weekday-labels.svelte';
~~~~

## Examples

### Composed

~~~~svelte
<script lang="ts">
    import * as Heatmap from '@mielui/svelte/components/heatmap';
    import { days } from './data';

    let selected = $state('Choose a day');
</script>
<Heatmap.Root
    {days}
    weeks={12}
    endDate="2026-09-15"
    weekStartsOn={1}
    class="max-w-sm"
    onDaySelect={(day) => { selected = `${day.date}: ${day.count} contributions`; }}
>
    {#snippet children({ total })}
        <Heatmap.Header>
            <span class="text-sm font-medium">Last 12 weeks</span>
            <span class="text-xs text-foreground-muted">{total} contributions</span>
        </Heatmap.Header>
        <Heatmap.Calendar>
            <Heatmap.MonthLabels />
            <Heatmap.Grid />
        </Heatmap.Calendar>
        <Heatmap.Tooltip />
        <Heatmap.Footer>
            <Heatmap.Legend />
            <Heatmap.Detail />
        </Heatmap.Footer>
        <p aria-live="polite" class="text-xs text-foreground-muted">{selected}</p>
    {/snippet}
</Heatmap.Root>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import * as Heatmap from '@mielui/svelte/components/heatmap';
    import { days } from './data';

    let { animation = 'rows' }: { animation?: 'rows' | 'columns' | 'live' | 'none' } = $props();
</script>
<div class="w-full max-w-xl">
    {#key animation}
        <Heatmap.Root {days} {animation} endDate="2026-09-15" />
    {/key}
</div>
~~~~

### Range

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Heatmap from '@mielui/svelte/components/heatmap';
    import { days } from './data';

    let weeks = $state(12);

    function switchRange() {
        weeks = weeks === 12 ? 26 : 12;
    }
</script>

<div class="w-full space-y-4">
    <Button variant="secondary" onclick={switchRange}>
        {weeks === 12 ? 'Show six months' : 'Show twelve weeks'}
    </Button>
    <Heatmap.Root {days} {weeks} endDate="2026-09-15" weekStartsOn={1} />
</div>
~~~~

### States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Heatmap from '@mielui/svelte/components/heatmap';
    import * as Tabs from '@mielui/svelte/components/tabs';
    import { days } from './data';

    let dataState = $state('ready');
    let animation = $state<'rows' | 'columns' | 'live' | 'none'>('rows');
    let replay = $state(0);

    function changeAnimation(value: string) {
        if (value === 'rows' || value === 'columns' || value === 'live' || value === 'none') {
            animation = value;
        }
    }

    function replayCalendar() {
        replay += 1;
    }
</script>
<div class="w-full space-y-6">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Activity data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Activity animation">
                <Tabs.List>
                    <Tabs.Trigger value="rows">Rows</Tabs.Trigger>
                    <Tabs.Trigger value="columns">Columns</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={replayCalendar}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Heatmap.Root
            days={dataState === 'empty' ? [] : days}
            loading={dataState === 'loading'}
            weeks={26}
            endDate="2026-09-15"
            {animation}
        />
    {/key}
</div>
~~~~

For the rendered reference, visit [/docs/components/heatmap](/docs/components/heatmap).


---

Source: http://sveltekit-prerender/docs/components/pie-chart.md

# Pie Chart

Composable pie and donut charts with animated updates, accessible values, tooltips, and legends.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, card, skeleton
- Shared utilities: components/_internal/surface, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add pie-chart
~~~~

## Chart guides

- [Pie chart](/docs/components/pie-chart/pie.md): Show a few categories as shares of a total.
- [Donut chart](/docs/components/pie-chart/donut.md): Place a total or active value inside a category breakdown.

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Arc

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| innerRadius | number \| undefined | 0.68 | No | No |
| cornerRadius | number \| undefined | 4 | No | No |
| padAngle | number \| undefined | 0.035 | No | No |
| class | string \| undefined | — | No | No |



### Label

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[{ total: number; active: PieChartDatum \| undefined; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Legend

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[{ item: PieChartDatum; label: string; value: string; percentage: number; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Plot

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| aria-label | string | — | Yes | No |
| data | readonly PieChartDatum[] | — | Yes | No |
| config | { [x: string]: { label: string; color?: string \| undefined; format?: ((value: number) => string) \| undefined; }; } | — | Yes | No |
| loading | boolean \| undefined | false | No | No |
| animation | "none" \| "reveal" \| "live" \| undefined | 'reveal' | No | No |
| children | Snippet<[]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Tooltip

| Prop | Type | Default | Required | Bindable |
| --- | --- | --- | --- | --- |
| children | Snippet<[{ item: PieChartDatum; label: string; value: string; percentage: number; }]> \| undefined | — | No | No |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes, SVGAttributes } from 'svelte/elements';
import Root from './pie-chart.svelte';
import Arc from './pie-chart-arc.svelte';
import Label from './pie-chart-label.svelte';
import Legend from './pie-chart-legend.svelte';
import Plot from './pie-chart-plot.svelte';
import Tooltip from './pie-chart-tooltip.svelte';

export type PieChartDatum = { key: string; value: number };
export type PieChartConfig = Record<
    string,
    { label: string; color?: string; format?: (value: number) => string }
>;
export type PieChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    data: readonly PieChartDatum[];
    config: PieChartConfig;
    'aria-label': string;
    loading?: boolean;
    animation?: 'reveal' | 'live' | 'none';
    children?: Snippet;
};
export type PieChartPlotProps = HTMLAttributes<HTMLDivElement>;
export type PieChartArcProps = {
    innerRadius?: number;
    cornerRadius?: number;
    padAngle?: number;
    class?: string;
};
export type PieChartLabelProps = Omit<SVGAttributes<SVGTextElement>, 'children'> & {
    children?: Snippet<[{ total: number; active: PieChartDatum | undefined }]>;
};
export type PieChartTooltipProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    children?: Snippet<[{ item: PieChartDatum; label: string; value: string; percentage: number }]>;
};
export type PieChartLegendProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
    children?: Snippet<[{ item: PieChartDatum; label: string; value: string; percentage: number }]>;
};
export { Arc, Label, Legend, Plot, Root, Tooltip };
~~~~

## Examples

### Donut States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/pie-chart';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state<'reveal' | 'live' | 'none'>('reveal');
    let replay = $state(0);
    const records = [
        { key: 'completed', value: 72 },
        { key: 'remaining', value: 28 }
    ];
    const config = {
        completed: { label: 'Completed', color: 'var(--chart-1)' },
        remaining: { label: 'Remaining', color: 'var(--chart-2)' }
    };
    const data = $derived(
        dataState === 'empty'
            ? []
            : dataState === 'zero'
              ? records.map((item) => ({ ...item, value: 0 }))
              : records
    );
    function changeAnimation(value: string) {
        if (value === 'reveal' || value === 'live' || value === 'none') {
            animation = value;
        }
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Chart data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                    <Tabs.Trigger value="zero">Zero total</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Chart animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={() => { replay += 1; }}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Chart.Root
            {data}
            {config}
            {animation}
            loading={dataState === 'loading'}
            aria-label="Quarterly orders"
        >
            <Chart.Plot>
                <Chart.Arc />
                <Chart.Label />
            </Chart.Plot>
            <Chart.Legend />
            <Chart.Tooltip />
        </Chart.Root>
    {/key}
</div>
~~~~

### Pie States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Chart from '@mielui/svelte/components/pie-chart';
    import * as Tabs from '@mielui/svelte/components/tabs';

    let dataState = $state('ready');
    let animation = $state<'reveal' | 'live' | 'none'>('reveal');
    let replay = $state(0);
    const records = [
        { key: 'completed', value: 72 },
        { key: 'remaining', value: 28 }
    ];
    const config = {
        completed: { label: 'Completed', color: 'var(--chart-1)' },
        remaining: { label: 'Remaining', color: 'var(--chart-2)' }
    };
    const data = $derived(
        dataState === 'empty'
            ? []
            : dataState === 'zero'
              ? records.map((item) => ({ ...item, value: 0 }))
              : records
    );
    function changeAnimation(value: string) {
        if (value === 'reveal' || value === 'live' || value === 'none') {
            animation = value;
        }
    }
</script>
<div class="w-full space-y-4">
    <div class="flex flex-wrap items-center gap-3">
        <Tabs.Root bind:value={dataState} variant="ghost">
            <div role="group" aria-label="Chart data state">
                <Tabs.List>
                    <Tabs.Trigger value="ready">Ready</Tabs.Trigger>
                    <Tabs.Trigger value="loading">Loading</Tabs.Trigger>
                    <Tabs.Trigger value="empty">No data</Tabs.Trigger>
                    <Tabs.Trigger value="zero">Zero total</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Tabs.Root value={animation} onValueChange={changeAnimation} variant="ghost">
            <div role="group" aria-label="Chart animation">
                <Tabs.List>
                    <Tabs.Trigger value="reveal">Reveal</Tabs.Trigger>
                    <Tabs.Trigger value="live">Live</Tabs.Trigger>
                    <Tabs.Trigger value="none">None</Tabs.Trigger>
                </Tabs.List>
            </div>
        </Tabs.Root>
        <Button variant="secondary" onclick={() => { replay += 1; }}>Replay</Button>
    </div>
    {#key `${animation}-${replay}`}
        <Chart.Root
            {data}
            {config}
            {animation}
            loading={dataState === 'loading'}
            aria-label="Quarterly orders"
        >
            <Chart.Plot>
                <Chart.Arc innerRadius={0} />
            </Chart.Plot>
            <Chart.Legend />
            <Chart.Tooltip />
        </Chart.Root>
    {/key}
</div>
~~~~

### States

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as PieChart from '@mielui/svelte/components/pie-chart';

    let state = $state<'loading' | 'empty' | 'ready'>('loading');
    const config = {
        completed: { label: 'Completed', color: 'var(--chart-2)' },
        remaining: { label: 'Remaining', color: 'var(--chart-1)' }
    };
    const data = $derived(
        state === 'empty'
            ? []
            : [
                  { key: 'completed', value: 72 },
                  { key: 'remaining', value: 28 }
              ]
    );

    function showReady() {
        state = 'ready';
    }

    function showLoading() {
        state = 'loading';
    }

    function showEmpty() {
        state = 'empty';
    }
</script>

<div class="w-full max-w-lg">
    <div class="flex flex-wrap justify-center gap-2">
        <Button variant={state === 'loading' ? 'primary' : 'secondary'} onclick={showLoading}>
            Loading
        </Button>
        <Button variant={state === 'empty' ? 'primary' : 'secondary'} onclick={showEmpty}>
            Empty
        </Button>
        <Button variant={state === 'ready' ? 'primary' : 'secondary'} onclick={showReady}>
            Ready
        </Button>
    </div>
    <PieChart.Root {data} {config} loading={state === 'loading'} aria-label="Checklist completion">
        <PieChart.Plot>
            <PieChart.Arc />
            <PieChart.Label />
        </PieChart.Plot>
        {#if state === 'ready'}
            <PieChart.Legend />
        {/if}
        <PieChart.Tooltip />
    </PieChart.Root>
</div>
~~~~

For the rendered reference, visit [/docs/components/pie-chart](/docs/components/pie-chart).