List

---
// src/components/ui/display/list/List.astro — headless primitive (see ../../README.md).
// Static styled list. `marker` picks the style and is the one variant that changes the ELEMENT:
// `decimal` renders an <ol>, everything else a <ul> — that is structure, so it stays here rather
// than becoming a theme concern. `orientation="horizontal"` is the inline/dot-separated shape; the
// separator dot itself is a `li + li::before` the theme draws, so items stay plain <li>s.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"ul"> & {
  marker?: "none" | "disc" | "decimal";
  orientation?: "vertical" | "horizontal";
};

const { marker = "none", orientation = "vertical", class: className, ...rest } = Astro.props;
const Tag = marker === "decimal" ? "ol" : "ul";
---

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

---
// src/components/ui/display/list/ListItem.astro — List compound part (see ../../README.md).
// Plain <li>. Drop an icon in the `icon` slot (the "checked list" pattern) and the item reports
// `data-icon="true"` so a theme can switch it to a row — the switch is slot-driven, never a prop,
// because `icon={false}` alongside a provided slot would be a silently wrong state.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"li">;

const { class: className, ...rest } = Astro.props;
const hasIcon = Astro.slots.has("icon");
---

<li class={className} data-slot="list-item" data-icon={hasIcon ? "true" : undefined} {...rest}>
  {
    hasIcon && (
      <span data-slot="list-item-icon" aria-hidden="true">
        <slot name="icon" />
      </span>
    )
  }
  <slot />
</li>

import List from "./List.astro";
import ListItem from "./ListItem.astro";

export { List, ListItem };
export default List;