Pinion UI — Modal

1. 最小: trigger slot 付き

<x-modal title="Confirm">
    <x-slot:trigger>
        <x-button>Open default modal</x-button>
    </x-slot:trigger>
    <p class="text-sm text-base-content/80">A centered dialog with a backdrop. Esc and a backdrop click both close it.</p>
</x-modal>

<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc0efb17.window="open = true" x-on:close-modal-modal_6a717cc0efb17.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">Open default modal</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc0efb17_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc0efb17_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Confirm
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    A centered dialog with a backdrop. Esc and a backdrop click both close it.
                </p>
</div>
</div>
</template>
</div>

title を省略した場合 — ヘッダーは × ボタンのみになる (title が必須でないことを確認)

<x-modal>
    <x-slot:trigger>
        <x-button appearance="soft">Open titleless modal</x-button>
    </x-slot:trigger>
    <p class="text-sm text-base-content/80">Without a title the header row is dropped and only the close button remains.</p>
</x-modal>

<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc104c21.window="open = true" x-on:close-modal-modal_6a717cc104c21.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary/10 text-primary border-transparent hover:bg-primary/20 focus-visible:ring-primary cursor-pointer">Open titleless modal</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true">
<button type="button" @click="open = false" class="absolute top-lg right-lg z-10 text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-0.5 hover:bg-base-200" aria-label="Close"><svg class="w-4 h-4" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
<p class="text-sm text-base-content/80">
                    Without a title the header row is dropped and only the close button remains.
                </p>
</div>
</div>
</template>
</div>

size — sm / md / lg / xl / full

<x-modal title="Small modal" size="sm">
    <x-slot:trigger><x-button size="sm">sm (max-w-sm)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">Best for short confirmations.</p>
</x-modal>
<x-modal title="Medium modal (default)" size="md">
    <x-slot:trigger><x-button size="sm">md (max-w-lg)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">The default width.</p>
</x-modal>
<x-modal title="Large modal" size="lg">
    <x-slot:trigger><x-button size="sm">lg (max-w-2xl)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">Room for a short form.</p>
</x-modal>
<x-modal title="Extra-large modal" size="xl">
    <x-slot:trigger><x-button size="sm">xl (max-w-4xl)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">Room for a table or a two-column layout.</p>
</x-modal>
<x-modal title="Full-width modal" size="full">
    <x-slot:trigger><x-button size="sm">full (max-w-full mx-4)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">Edge-to-edge apart from the outer margin.</p>
</x-modal>

<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc10d1a4.window="open = true" x-on:close-modal-modal_6a717cc10d1a4.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">sm (max-w-sm)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-sm bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc10d1a4_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc10d1a4_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Small modal
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Best for short confirmations.
                </p>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc10d24d.window="open = true" x-on:close-modal-modal_6a717cc10d24d.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">md (max-w-lg)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc10d24d_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc10d24d_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Medium modal (default)
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    The default width.
                </p>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc10d2df.window="open = true" x-on:close-modal-modal_6a717cc10d2df.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">lg (max-w-2xl)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-2xl bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc10d2df_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc10d2df_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Large modal
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Room for a short form.
                </p>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc10d373.window="open = true" x-on:close-modal-modal_6a717cc10d373.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">xl (max-w-4xl)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-4xl bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc10d373_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc10d373_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Extra-large modal
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Room for a table or a two-column layout.
                </p>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc10d423.window="open = true" x-on:close-modal-modal_6a717cc10d423.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">full (max-w-full mx-4)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-full mx-4 bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc10d423_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc10d423_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Full-width modal
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Edge-to-edge apart from the outer margin.
                </p>
</div>
</div>
</template>
</div>

showClose — × ボタンの表示制御

<x-modal title="showClose=false" :showClose="false">
    <x-slot:trigger><x-button appearance="outline" size="sm">showClose=false</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">The X is hidden — give the user an explicit action instead.</p>
    <x-slot:actions>
        <x-button size="sm" @click="open = false">OK</x-button>
    </x-slot:actions>
</x-modal>
<x-modal title="showClose=true (default)">
    <x-slot:trigger><x-button appearance="outline" size="sm">showClose=true (default)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">The X sits in the header.</p>
</x-modal>

<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc137c37.window="open = true" x-on:close-modal-modal_6a717cc137c37.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-content focus-visible:ring-primary cursor-pointer">showClose=false</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc137c37_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc137c37_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        showClose=false
                    </h3>
</div>
<p class="text-sm text-base-content/80">
                    The X is hidden — give the user an explicit action instead.
                </p>
<div class="flex items-center justify-end gap-xs mt-lg">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer" @click="open = false">OK</button>
</div>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc137cd9.window="open = true" x-on:close-modal-modal_6a717cc137cd9.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-content focus-visible:ring-primary cursor-pointer">showClose=true (default)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc137cd9_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc137cd9_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        showClose=true (default)
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    The X sits in the header.
                </p>
</div>
</div>
</template>
</div>

closeOnBackdrop — 背景クリック挙動

<x-modal title="closeOnBackdrop=true (default)">
    <x-slot:trigger><x-button appearance="outline" size="sm">closeOnBackdrop=true (default)</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">Clicking the backdrop closes the dialog.</p>
</x-modal>
<x-modal title="closeOnBackdrop=false" :closeOnBackdrop="false">
    <x-slot:trigger><x-button appearance="outline" size="sm">closeOnBackdrop=false</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">The backdrop is inert — use this for destructive confirmations.</p>
</x-modal>

<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc148a70.window="open = true" x-on:close-modal-modal_6a717cc148a70.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-content focus-visible:ring-primary cursor-pointer">closeOnBackdrop=true (default)</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc148a70_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc148a70_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        closeOnBackdrop=true (default)
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Clicking the backdrop closes the dialog.
                </p>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc148b13.window="open = true" x-on:close-modal-modal_6a717cc148b13.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-primary border-primary hover:bg-primary hover:text-primary-content focus-visible:ring-primary cursor-pointer">closeOnBackdrop=false</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc148b13_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc148b13_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        closeOnBackdrop=false
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    The backdrop is inert — use this for destructive confirmations.
                </p>
</div>
</div>
</template>
</div>

2. title + size + actions slot (確認ダイアログ典型)

<x-modal title="Delete confirmation" size="sm" :closeOnBackdrop="false">
    <x-slot:trigger><x-button color="error" size="sm">Delete…</x-button></x-slot:trigger>
    <p class="text-sm text-base-content/80">Are you sure you want to delete this? This cannot be undone.</p>
    <x-slot:actions>
        <x-button appearance="ghost" size="sm" @click="open = false">Cancel</x-button>
        <x-button color="error" size="sm" @click="open = false">Delete</x-button>
    </x-slot:actions>
</x-modal>
<x-modal title="New project" size="md">
    <x-slot:trigger><x-button color="primary" size="sm">+ Create</x-button></x-slot:trigger>
    <div class="space-y-3">
        <x-input label="Project name" placeholder="my-app" />
        <x-textarea label="Description" rows="3" placeholder="optional" />
    </div>
    <x-slot:actions>
        <x-button appearance="ghost" size="sm" @click="open = false">Cancel</x-button>
        <x-button color="primary" size="sm" @click="open = false">Create</x-button>
    </x-slot:actions>
</x-modal>

<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc15ab2e.window="open = true" x-on:close-modal-modal_6a717cc15ab2e.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-error text-error-content border-error hover:bg-error/90 focus-visible:ring-error cursor-pointer">Delete…</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-sm bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc15ab2e_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc15ab2e_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Delete confirmation
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Are you sure you want to delete this? This cannot be undone.
                </p>
<div class="flex items-center justify-end gap-xs mt-lg">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer" @click="open = false">Cancel</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-error text-error-content border-error hover:bg-error/90 focus-visible:ring-error cursor-pointer" @click="open = false">Delete</button>
</div>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-modal_6a717cc15ad81.window="open = true" x-on:close-modal-modal_6a717cc15ad81.window="open = false">
<div @click="open = true" class="cursor-pointer">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer">+ Create</button>
</div>
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="modal_6a717cc15ad81_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="modal_6a717cc15ad81_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        New project
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<div class="space-y-3">
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="input_6a717cc15ac09" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Project name</label>
</div>
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-md)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a717cc15ac09" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-md)] px-[var(--px-input-md)]" placeholder="my-app">
</div>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a717cc15ac75" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Description</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a717cc15ac75" rows="3" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="optional"></textarea>
</div>
</div>
</div>
<div class="flex items-center justify-end gap-xs mt-lg">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer" @click="open = false">Cancel</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer" @click="open = false">Create</button>
</div>
</div>
</div>
</template>
</div>

4. id を渡して別所の任意のボタンから dispatch で開く（size: sm/md(default)/lg/xl/full、背景click/Escape/×/actionsの @click='open = false' で閉じる、x-trap で focus trap、x-teleport で body 直下に描画）

<x-button color="primary" size="sm" x-on:click="$dispatch('open-modal-welcome')">Open the welcome modal</x-button>
<x-button color="info" size="sm" x-on:click="$dispatch('open-modal-confirm-reset')">Open the reset modal</x-button>

<x-modal id="welcome" title="Welcome" size="md">
    <p class="text-sm text-base-content/80">Declared without a trigger slot: it is opened purely by dispatching <code class="text-xs">open-modal-welcome</code>.</p>
    <x-slot:actions>
        <x-button size="sm" @click="open = false">Close</x-button>
    </x-slot:actions>
</x-modal>

<x-modal id="confirm-reset" title="Reset settings" size="sm" :closeOnBackdrop="false">
    <p class="text-sm text-base-content/80">All settings return to their defaults.</p>
    <x-slot:actions>
        <x-button appearance="ghost" size="sm" @click="open = false">Cancel</x-button>
        <x-button color="warning" size="sm" @click="open = false">Reset</x-button>
    </x-slot:actions>
</x-modal>

<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer" x-on:click="$dispatch('open-modal-welcome')">Open the welcome modal</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-info text-info-content border-info hover:bg-info/90 focus-visible:ring-info cursor-pointer" x-on:click="$dispatch('open-modal-confirm-reset')">Open the reset modal</button>
<div x-data="{ open: false }" x-on:open-modal-welcome.window="open = true" x-on:close-modal-welcome.window="open = false">
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50" @click="open = false"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-lg bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="welcome_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="welcome_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Welcome
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    Declared without a trigger slot: it is opened purely by dispatching <code class="text-xs">open-modal-welcome</code>.
                </p>
<div class="flex items-center justify-end gap-xs mt-lg">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer" @click="open = false">Close</button>
</div>
</div>
</div>
</template>
</div>
<div x-data="{ open: false }" x-on:open-modal-confirm-reset.window="open = true" x-on:close-modal-confirm-reset.window="open = false">
<template x-teleport="body">
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak="">
<div class="absolute inset-0 bg-black/50"></div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-trap.inert.noscroll="open" @keydown.escape.window="open = false" class="relative w-full max-w-sm bg-base-100 text-base-content text-[length:var(--text-field-md)] rounded-[var(--radius-box)] border-[length:var(--border)] border-base-300 shadow-[0_10px_30px_-8px_rgb(0_0_0_/_0.18),var(--shadow-box)] p-lg" role="dialog" aria-modal="true" aria-labelledby="confirm-reset_title">
<div class="flex items-center justify-between mb-sm">
<h3 id="confirm-reset_title" class="text-[length:var(--text-field-lg)] font-semibold text-base-content">
                        Reset settings
                    </h3><button type="button" @click="open = false" class="text-base-content/50 hover:text-base-content transition-colors rounded-[var(--radius-field)] p-1 hover:bg-base-200" aria-label="Close"><svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button>
</div>
<p class="text-sm text-base-content/80">
                    All settings return to their defaults.
                </p>
<div class="flex items-center justify-end gap-xs mt-lg">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-transparent text-base-content border-transparent hover:bg-base-200 focus-visible:ring-base-300 cursor-pointer" @click="open = false">Cancel</button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-warning text-warning-content border-warning hover:bg-warning/90 focus-visible:ring-warning cursor-pointer" @click="open = false">Reset</button>
</div>
</div>
</div>
</template>
</div>