/**
 * `<pane-ui>` — Collapsible, resizable content panel — drag-resize handle on the
inner edge when [side="leading"] / [side="trailing"], [resizable]
opt-in. Used standalone for resizable two-pane layouts, or wrapped
by <editor-sidebar> / <admin-sidebar> which DELEGATE drag to the
inner pane-ui rather than reimplementing it. See pane.yaml's
a2ui.rules for the full composition contract.

 *
 * @see https://ui-kit.exe.xyz/site/components/pane
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export type PaneToggleEvent = CustomEvent<unknown>;

export class UIPane extends UIElement {
  /** Component property: collapsed. */
  collapsed: boolean;
  /** Component property: maxWidth. */
  maxWidth: number;
  /** Component property: minWidth. */
  minWidth: number;
  /** Component property: resizable. */
  resizable: boolean;
  /** Opts a pane into horizontal-sibling chrome: suppresses the default
four-sided border and moves the resize grabber to the inner edge
(right edge for `leading`, left edge for `trailing`). Also flips the
resize-drag direction so `trailing` panes grow when dragged leftward.
Unset keeps the pane-intrinsic chrome (full border, right-edge
grabber when resizable).
 */
  side: '' | 'leading' | 'trailing';

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UIPane, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}
