afv-library/skills/experience-lwc-generate/assets/native-modal-component/nativeModalComponent.js

/**
 * NATIVE MODAL TEMPLATE (lightning/modal)
 *
 * Uses the platform's built-in modal service instead of a hand-rolled
 * backdrop/focus-trap implementation. LightningModal already provides:
 * - focus trap and initial focus
 * - ESC-to-close
 * - ARIA roles/labels
 * - size variants (small / medium / large / full)
 * - a promise-based result returned from open()
 *
 * Supported in Lightning Experience, the Salesforce app, and Experience
 * Builder sites (confirm current support for your specific site template
 * before relying on it as the only implementation).
 *
 * Replace: nativeModalComponent → yourModalName
 * Replace: NativeModalComponent → YourModalName
 *
 * ── How a parent opens this modal ──────────────────────────────────────
 * import YourModalName from 'c/yourModalName';
 *
 * async handleOpenModal() {
 *     const result = await YourModalName.open({
 *         size: 'small',                    // small | medium | large | full
 *         description: 'Accessible description of the modal purpose',
 *         label: 'Confirm Action',          // passed through as @api label
 *         content: 'Are you sure?'          // any custom @api input props
 *     });
 *
 *     if (result === 'save') {
 *         // user confirmed
 *     }
 * }
 * ────────────────────────────────────────────────────────────────────────
 */
import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class NativeModalComponent extends LightningModal {
    // ═══════════════════════════════════════════════════════════════════════
    // PUBLIC API (@api) - Passed in via YourModalName.open({ ... })
    // ═══════════════════════════════════════════════════════════════════════

    @api label;
    @api content;

    // ═══════════════════════════════════════════════════════════════════════
    // EVENT HANDLERS
    // ═══════════════════════════════════════════════════════════════════════

    handleCancel() {
        // Resolve the promise returned by open() with a falsy/known value
        this.close('cancel');
    }

    handleSave() {
        // Resolve the promise returned by open() with the result the
        // caller needs. Close is explicit, so validation can prevent it:
        // guard this call behind your own validity check before closing.
        this.close('save');
    }
}