Interface: OverlayProps

import { html } from '@gluonjs/core';
import {
  Dialog,
  Field,
  Listbox,
  Overlay,
  Popover,
  createFocusScope,
  getFocusableElements,
  type DialogProps,
  type FieldProps,
  type FocusScope,
  type FocusScopeOptions,
  type ListboxOption,
  type ListboxProps,
  type OverlayProps,
  type PopoverProps,
} from '@gluonjs/quarks';

const options = [
  { value: 'black', label: 'Black' },
  { value: 'blue', label: 'Cobalt blue' },
] satisfies readonly ListboxOption[];
const listbox = { id: 'color', label: 'Color', value: 'blue', options } satisfies ListboxProps;
const field = { label: 'Finish', children: Listbox(listbox), helper: 'Choose one finish' } satisfies FieldProps;
const popover = { id: 'finish-help', children: 'Finish guide', mode: 'manual' } satisfies PopoverProps;
const dialog = { label: 'Shopping bag', children: html`${Field(field)}${Popover(popover)}` } satisfies DialogProps;
const overlay = { children: Dialog(dialog), onDismiss: () => console.log('dismiss') } satisfies OverlayProps;

const panel = document.querySelector<HTMLElement>('#bag')!;
const focusOptions = { initialFocus: 'button', returnFocus: document.activeElement as HTMLElement | null } satisfies FocusScopeOptions;
const focusScope: FocusScope = createFocusScope(panel, focusOptions);
focusScope.activate();
console.log(getFocusableElements(panel), Overlay(overlay));
focusScope.deactivate();