import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
import { SigveloRowSelectEvent as SigveloRowSelectEvent$1 } from "@mcp-b/wc-support/events/row";
//#region src/components/data-table/data-table.d.ts
type DataTablePrimitive = string | number | boolean | null;
type DataTableRow = Readonly<Record<string, DataTablePrimitive>>;
type DataTableSelection = "none" | "single" | "multiple";
interface DataTableColumn {
  /** The row field displayed in this column. */
  key: string;
  /** The visible column heading. */
  label: string;
  /** Horizontal alignment for the heading and cells. */
  align?: "start" | "center" | "end";
}
/**
 * <sigvelo-data-table>
 *
 * @summary Presents structured rows in an accessible, responsive table with optional single or multiple selection.
 * @tag sigvelo-data-table
 * @documentation https://design-system.sigvelo.com/docs/components/data-table
 * @status stable
 * @since 1.0
 *
 * @event sigvelo-row-select - Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array.
 *
 * @csspart scroller - The horizontally scrollable table container.
 * @csspart table - The native `<table>` element.
 * @csspart caption - The table caption.
 * @csspart header - The table header.
 * @csspart header-cell - A column heading.
 * @csspart body - The table body.
 * @csspart row - A body row.
 * @csspart cell - A body cell.
 * @csspart selection-cell - A cell containing a row selection control.
 * @csspart empty - The empty-result cell.
 *
 * @example Default
 * ```html
 * <sigvelo-data-table id="team"></sigvelo-data-table>
 * <script type="module">
 *   const table = document.querySelector('#team');
 *   table.columns = [
 *     { key: 'name', label: 'Name' },
 *     { key: 'role', label: 'Role' },
 *     { key: 'score', label: 'Score', align: 'end' }
 *   ];
 *   table.rows = [
 *     { id: 'ada', name: 'Ada Lovelace', role: 'Engineering', score: 96 },
 *     { id: 'grace', name: 'Grace Hopper', role: 'Engineering', score: 94 }
 *   ];
 * </script>
 * ```
 *
 * @example Multiple selection
 * Set `selection` to `multiple` and provide a stable `keyField`. Listen for
 * `sigvelo-row-select` to observe selection changes.
 *
 * ```html
 * <sigvelo-data-table id="selectable-team" selection="multiple"></sigvelo-data-table>
 * ```
 */
declare class SigveloDataTable extends SigveloElement {
  #private;
  static styles: CSSResultGroup;
  /** Column definitions, in display order. */
  columns: readonly DataTableColumn[];
  /** Row objects displayed by the table. */
  rows: readonly DataTableRow[];
  /** The row field used as its stable selection key. */
  keyField: string;
  /** Enables no selection, single selection, or multiple selection. */
  selection: DataTableSelection;
  /** The currently selected row keys. */
  selectedKeys: readonly string[];
  /** Optional visible table caption. */
  caption?: string;
  /** Message displayed when there are no rows. */
  emptyText: string;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-data-table": SigveloDataTable;
  }
}
//#endregion
export { SigveloDataTable as a, DataTableSelection as i, DataTablePrimitive as n, SigveloRowSelectEvent$1 as o, DataTableRow as r, DataTableColumn as t };