Description List

---
// src/components/ui/display/description-list/DescriptionDetails.astro — DescriptionList compound part
// (see ../../README.md). Wraps <dd>: the value half of a pair, associated with every <dt> immediately
// above it.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"dd">;

const { class: className, ...rest } = Astro.props;
---

<dd class={className} data-slot="description-details" {...rest}><slot /></dd>

---
// src/components/ui/display/description-list/DescriptionList.astro — headless primitive (see ../../README.md).
// A real <dl>: metadata panels, spec sheets, "order details" blocks — anything that is a list of
// name/value pairs rather than a table of rows.
//
// It earns a file for the one thing everybody gets wrong about <dl>, which is its content model.
// HTML allows exactly three kinds of child here — <dt>, <dd>, and a <div> wrapping a group of them
// — and nothing else. A <dl> holding <li>s, <p>s, or a <span> per row is not a description list at
// all: the term/value association vanishes, and a screen reader reads a flat run of text.
//
// The association itself is POSITIONAL, which is the other half people miss and the reason the
// wrapping <div> is worth knowing about:
//
//   <DescriptionList>
//     <div>                                   {/* one group — legal, and what a grid layout needs */}
//       <DescriptionTerm>Status</DescriptionTerm>
//       <DescriptionDetails>Shipped</DescriptionDetails>
//     </div>
//   </DescriptionList>
//
// Several <dd>s after one <dt> are that term's several values, and several <dt>s before one <dd>
// are several names for the same value. Both are legal and both are useful; neither survives being
// re-ordered by CSS, so keep the source order true and let the theme place things.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"dl"> & { orientation?: "vertical" | "horizontal" };

const { orientation = "vertical", class: className, ...rest } = Astro.props;
---

<dl class={className} data-slot="description-list" data-orientation={orientation} {...rest}>
  <slot />
</dl>

---
// src/components/ui/display/description-list/DescriptionTerm.astro — DescriptionList compound part
// (see ../../README.md). Wraps <dt>: the name half of a pair. Must be inside a <dl>, or inside a <div>
// that is — a <dt> anywhere else is invalid and associates with nothing.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"dt">;

const { class: className, ...rest } = Astro.props;
---

<dt class={className} data-slot="description-term" {...rest}><slot /></dt>

import DescriptionDetails from "./DescriptionDetails.astro";
import DescriptionList from "./DescriptionList.astro";
import DescriptionTerm from "./DescriptionTerm.astro";

export { DescriptionDetails, DescriptionList, DescriptionTerm };
export default DescriptionList;