<div class="modal-overlay" data-modal-id="{component.id}" data-is-open="{state.isOpen}">
    <div class="modal-dialog">
        <!-- Title Slot -->
        <slot name="title">
            <div class="modal-title-default">
                <h3>Modal Title</h3>
            </div>
        </slot>

        <!-- Content Slot (Required, Scoped) -->
        <!-- Parent can access: {context.modalId}, {context.isOpen}, {context.closeFunction} -->
        <slot name="content">
            <p>Modal content goes here</p>
        </slot>

        <!-- Actions Slot (Scoped) -->
        <!-- Parent can access: {context.closeFunction}, {context.modalId} -->
        <slot name="actions">
            <button onclick="{context.closeFunction}">Close</button>
        </slot>
    </div>
</div>
