/**
 * `<stat-ui>` — Metric/KPI display — value + label + optional change indicator and trend icon. Renders as a stacked block with prominent value and small caption; supports positive/negative delta coloring. Use inside dashboard cards or summary headers; for inline percentages or progress use <progress-ui>.
 *
 * @see https://ui-kit.exe.xyz/site/components/stat
 *
 * 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 UIStat extends UIElement {
  /** Horizontal-bleed KPI layout. With a `slot="chart"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot. */
  bleed: boolean;
  /** Change indicator text (e.g. '+12%', '-3%') */
  change: string;
  /** Icon name displayed in the icon slot */
  icon: string;
  /** Eyebrow label describing the metric */
  label: string;
  /** Renders skeleton-ui shimmer placeholders in place of the value and change slots while data is fetching. Sets aria-busy="true" on the host. Label and icon are preserved (they're static metadata, not fetched data). Toggle back to false when data arrives. */
  loading: boolean;
  /** Trend direction or narrative subtitle. Canonical values color the change badge (up=success, down=danger, neutral/flat=muted); any other string renders as caption-style text under the primary value. */
  trend: string;
  /** The primary metric value to display */
  value: string;
}
