/**
 * `<col-ui>` — Flex column layout primitive — vertical stack of children with
[gap] / [align] / [justify] / [grow]. The most common layout
primitive in the repo. Use <col-ui> for vertical stacks, <row-ui>
for horizontal rows, <stack-ui> for overlay (children stack on top
of each other in a grid), <grid-ui> for 2D grids. Composes inside
<section-ui> for in-card layout; do NOT use as a child of
<header-ui> / <footer-ui> (the chrome scope already lays out
slots).

 *
 * @see https://ui-kit.exe.xyz/site/components/col
 *
 * 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 UICol extends UIElement {
  /** Cross-axis alignment (start/center/end/stretch). Accepts `@bp` notation: align="stretch center@sm" applies stretch below sm, center from sm up. */
  align: string;
  /** Gap between children. Two grammars: a NAMED scale (xs/sm/md/lg/xl) and an integer space-rung ("0"…"10", "12", "16", mapped to --a-space-N). The named scale is parametric (half + half·--a-gap-k, = 4/8/12/16/20px at the default k=1); the integer rungs are literal / k-independent. At k=1 the two coincide: xs=1, sm=2, md=3, lg=4, xl=5. Accepts `@bp` notation: gap="2 4@md" = 2 below md, 4 from md upward. */
  gap: string;
  /** Fills remaining space in a flex parent (e.g. inside a Row). CSS-only attribute via :scope[grow] in col.css. */
  grow: boolean;
  /** Main-axis justify (start/center/end/space-between/space-around). Accepts `@bp` notation: justify="start space-between@md". */
  justify: string;
}
