descriptions — composed dt/dd pairs, never a table

<Descriptions columns={2} bordered>
  <DescriptionsItem term="build">4f2a1c</DescriptionsItem>
  <DescriptionsItem term="owner">@gaubee</DescriptionsItem>
  <DescriptionsItem term="status"><!-- rich cells are just children -->
    <Badge>passing</Badge>
  </DescriptionsItem>
  <DescriptionsItem term="notes" /><!-- no children ⇒ the em dash -->
</Descriptions>

<!--
  jixoai DescriptionsItem (registry/files/ui/descriptions/descriptions-item.svelte,
  composition-first-apis, 2026-08-25).
  One term/value pair: the `term` prop renders the dt, children render
  the dd — rich cells are just children (badges, links, markup). A
  childless Item renders the em dash, never a blank cell. The bordered
  hairline paint (cell bottom edge, muted term background + rule)
  derives from the root's `bordered` through context — one decision,
  painted everywhere.
  tailwindless one-shot Wave 1b batch A (2026-09-17): the paint rides
  the family's stylex ATOMS (descriptions.stylex.ts) joined through
  cx() below.
-->
<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';
  import { getContext } from 'svelte';
  import { DESCRIPTIONS_KEY, type DescriptionsApi } from './descriptions.svelte';
  import { descriptionsStyles } from './descriptions.stylex';

  // the payload's own join (the separator serialize law): every
  // stylex.create member is an OBJECT in dev and the joined string in
  // shipped payloads — composition goes through THIS joiner (all
  // string values except $$css, space-joined).
  const cx = (
    ...styles: ({ readonly [key: string]: string | object } | undefined | string)[]
  ): string =>
    styles
      .filter(Boolean)
      .map((style) =>
        typeof style === 'string'
          ? style
          : Object.entries(style ?? {}).flatMap(([key, value]) =>
              key !== '$$css' && typeof value === 'string' ? [value] : [],
            ).join(' '),
      )
      .join(' ');

  interface Props extends HTMLAttributes<HTMLDivElement> {
    /** the dt label */
    term: string;
    class?: string;
    children?: Snippet;
  }

  let { term, class: className = '', children, ...rest }: Props = $props();

  const descriptions = getContext<DescriptionsApi>(DESCRIPTIONS_KEY);
</script>

<div
  data-jx-desc-cell=""
  class={cx(descriptionsStyles.cell, descriptions.bordered && descriptionsStyles.cellBordered, className)}
  {...rest}
>
  <dt
    data-jx-desc-term=""
    class={cx(descriptionsStyles.term, descriptions.bordered && descriptionsStyles.termBordered)}
  >{term}</dt>
  <dd data-jx-desc-value="" class={cx(descriptionsStyles.value)}>
    {#if children}{@render children()}{:else}—{/if}
  </dd>
</div>

<!-- the container query is the component's own law
     (descriptions.css: @container (max-width: 640px) ⇒ one pair per row).
     The consumer only owns the container's width: -->
<div style="width: {frameWidth}px">
  <Descriptions columns={3} bordered>
    <DescriptionsItem term="build">4f2a1c</DescriptionsItem>
    <!-- … -->
  </Descriptions>
</div>

<!-- the extra slot composes AROUND the dl: a header row
     (title + actions) over the list. antd's title/extra props would put
     non-dl content INSIDE the dl — the wrapper keeps the semantics clean
     (recorded in the change's followups). -->
<section class="border border-border">
  <header class="flex items-center justify-between gap-3 px-4 py-3 border-b border-border">
    <p class="m-0 font-nav text-xs uppercase tracking-[0.12em]">deploy · iad1</p>
    <div class="flex gap-2">
      <PressButton variant="outline" onclick={redeploy}>redeploy</PressButton>
      <PressButton variant="ghost" onclick={rollback}>rollback</PressButton>
    </div>
  </header>
  <Descriptions columns={2} bordered>
    <DescriptionsItem term="build">4f2a1c</DescriptionsItem>
    <!-- … -->
  </Descriptions>
</section>