{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "section-card",
  "title": "Section Card",
  "type": "registry:ui",
  "description": "Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.",
  "categories": [
    "layout"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/section-card/section-card.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { cardClasses } from '../card/card'\nimport { cardVariants } from '../card/card.variants'\n\n/**\n * <uip-section-card> — the registry SectionCard as a web component.\n *\n * Renders the same Card / CardHeader / CardTitle / CardDescription /\n * CardContent DOM React produces (card's class strings merged with\n * SectionCard's overrides through `cn`, as React's `className` would be), in\n * one shadow root.\n *\n * Props: `heading` (React's `title` — `title` is taken by HTMLElement),\n * `description`. React's `headerAction` / `footer` nodes are the\n * `header-action` / `footer` slots; children are the default slot.\n * `className` / `contentClassName` overrides go through `::part(base)` /\n * `::part(content)`.\n */\nexport class UipSectionCard 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    heading: {},\n    description: {},\n  }\n\n  heading = ''\n  description?: string\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', 'section-card')\n  }\n\n  render() {\n    return html`<div\n      part=\"base\"\n      data-uipkge=\"\"\n      data-slot=\"card\"\n      class=${cn(cardVariants({}), 'overflow-hidden', 'flex flex-col')}\n    >\n      <div data-uipkge=\"\" data-slot=\"card-header\" class=${cn(cardClasses.header, 'pb-4')}>\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div class=\"min-w-0\">\n            <h3 data-uipkge=\"\" data-slot=\"card-title\" class=${cn(cardClasses.title, 'text-base font-semibold')}>${this.heading}</h3>\n            ${this.description\n              ? html`<p data-uipkge=\"\" data-slot=\"card-description\" class=${cn(cardClasses.description, 'mt-0.5')}>${this.description}</p>`\n              : nothing}\n          </div>\n          <slot name=\"header-action\"></slot>\n        </div>\n      </div>\n      <div part=\"content\" data-uipkge=\"\" data-slot=\"card-content\" class=${cn(cardClasses.content, 'flex-1')}>\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>`\n  }\n}\n\ncustomElements.get('uip-section-card') || customElements.define('uip-section-card', UipSectionCard)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-section-card': UipSectionCard\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/section-card/section-card.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/card.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}