{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "data-list",
  "title": "Data List",
  "type": "registry:ui",
  "description": "Vertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.",
  "categories": [
    "data-display"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/data-list/data-list.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\n/**\n * <uip-data-list> — React's DataList: a vertical stack of\n * <uip-data-list-item> rows. The items are slotted (light DOM), so they are\n * the flex children of the inner `flex flex-col` div.\n *\n * React's `className` on the list → `part=\"base\"`: style it from the page with\n * `class=\"[&::part(base)]:…\"` on the host. Padding, margin and width can simply\n * go on the host's own `class`.\n */\nexport class UipDataList extends LitElement {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n  }\n\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'data-list')\n  }\n\n  render() {\n    return html`<div part=\"base\" class=\"flex flex-col\">\n      <slot></slot>\n    </div>`\n  }\n}\n\n/**\n * <uip-data-list-item> — React's DataListItem: a label/value row (both\n * slotted, laid out `justify-between`).\n *\n * React's `first:pt-0 last:border-0 last:pb-0` match the ROW's position among\n * its siblings; inside a shadow root the inner div is always an only child, so\n * the element watches its parent and sets `data-first` / `data-last` on the\n * inner div, and those classes become `data-[first]:` / `data-[last]:`.\n *\n * React's `className` on the row → `part=\"base\"`, e.g. React's `border-0 py-1`\n * is `class=\"[&::part(base)]:border-0 [&::part(base)]:py-1\"`. A part rule\n * outranks the row's own `data-[first]:pt-0` / `data-[last]:pb-0` (and\n * `::part()` can't take attribute selectors), so restate those against the\n * host's position: `first:[&::part(base)]:pt-0 last:[&::part(base)]:pb-0`.\n */\nexport class UipDataListItem extends LitElement {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    first: { state: true },\n    last: { state: true },\n  }\n\n  private first = false\n  private last = false\n  private observer?: MutationObserver\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'data-list-item')\n    this.updatePosition()\n    // Siblings are parsed/rendered after this row connects and may change later.\n    if (this.parentNode) {\n      this.observer = new MutationObserver(() => this.updatePosition())\n      this.observer.observe(this.parentNode, { childList: true })\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n  }\n\n  private updatePosition() {\n    this.first = !this.previousElementSibling\n    this.last = !this.nextElementSibling\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      ?data-first=${this.first}\n      ?data-last=${this.last}\n      class=\"flex flex-row items-center justify-between border-b py-4 transition-colors duration-200 data-[first]:pt-0 data-[last]:border-0 data-[last]:pb-0\"\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ncustomElements.get('uip-data-list') || customElements.define('uip-data-list', UipDataList)\ncustomElements.get('uip-data-list-item') || customElements.define('uip-data-list-item', UipDataListItem)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-data-list': UipDataList\n    'uip-data-list-item': UipDataListItem\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/data-list/data-list.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}