/**
 * `<grid-ui>` — CSS grid layout primitive. Supports [columns="1..6"] for equal columns, [columns="auto-fill"|"auto-fit"] for responsive density, and a per-child [span="2..6"|"full"] attribute for asymmetric layouts. Both [columns] and [gap] accept responsive `@bp` notation for viewport-driven layout: columns="1 2@sm 4@lg" gives 1 column on xs, 2 from sm, 4 from lg/xl. Compose a 2:1 split as columns="3" + span="2"; 3:2 as columns="5" + span="3" + span="2".
 *
 * @see https://ui-kit.exe.xyz/site/components/grid
 *
 * 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 class UIGrid extends UIElement {
  /** Column gap override */
  columnGap: string;
  /** Number of equal columns (1–6), "auto-fill", or "auto-fit". Accepts responsive `@bp` notation: "1 2@sm 4@lg" = 1 on xs, 2 from sm, 4 from lg/xl. Unannotated value is the mobile-first base. */
  columns: string;
  /** Grid gap. Accepts numeric space-scale values (0–12) or named sizes (xs/sm/md/lg/xl). Responsive notation supported: "2 4@md" = 2 below md, 4 from md upward. */
  gap: string;
  /** Row gap override */
  rowGap: string;
}
