Slot System

┌─────────────────────────┐
│ slot: header             │ ← Title + Action button
│─────────────────────────│
│ slot: content            │ ← Nội dung chính (text, image, list...)
│                          │
│─────────────────────────│
│ slot: footer             │ ← Buttons, links
└─────────────────────────┘

Component có content areas?
  │
  ├─ Container-level (card, modal, sheet, drawer)?
  │   ├─ Header/Body/Footer → dùng .slot-* structural class
  │   ├─ Inner elements → dùng BEM .__element
  │   └─ PHẢI có data-slot trên CẢ HAI
  │
  ├─ Inline-level (button, badge, chip)?
  │   ├─ KHÔNG dùng .slot-* (quá đơn giản)
  │   ├─ Inner elements → optional BEM
  │   └─ data-slot chỉ trên root + named parts
  │
  └─ Navigation (tabs, breadcrumb, pagination)?
      ├─ Group container → data-slot on root
      ├─ Items → data-slot="{component}-item"
      └─ KHÔNG dùng .slot-* (không có header/body/footer)

<article class="card" data-slot="card">
  <div class="slot-header" data-slot="card-header">
    <h3 class="card__title" data-slot="card-title">Tiêu đề</h3>
    <p data-slot="card-description">Mô tả phụ</p>
    <button data-slot="card-action">⋯</button>
  </div>
  <div class="slot-body" data-slot="card-content">
    <!-- Nội dung chính -->
  </div>
  <div class="slot-footer" data-slot="card-footer">
    <button class="btn btn--outline">Huỷ</button>
    <button class="btn btn--primary">Xác nhận</button>
  </div>
</article>

<button class="btn btn--primary" data-slot="button">
  <svg data-slot="button-icon"><use href="#ic-plus"/></svg>
  <span data-slot="button-label">Thêm mới</span>
</button>

<nav class="navigation-bar" data-slot="navigation-bar">
  <button class="navigation-bar__item active" data-slot="navigation-bar-item">
    <svg data-slot="navigation-bar-icon"><use href="#ic-home"/></svg>
    <span data-slot="navigation-bar-label">Trang chủ</span>
  </button>
  <button class="navigation-bar__item" data-slot="navigation-bar-item">
    <svg data-slot="navigation-bar-icon"><use href="#ic-wallet"/></svg>
    <span data-slot="navigation-bar-label">Ví</span>
  </button>
</nav>

<section class="card-listgroup" data-slot="list">
  <div class="card-listgroup__header" data-slot="list-header">
    Danh sách
  </div>
  <button class="card-listgroup__item" data-slot="list-item">
    <span data-slot="list-leading">👤</span>
    <span data-slot="list-content">
      <span data-slot="list-title">Nguyễn Văn A</span>
      <span data-slot="list-subtitle">Admin</span>
    </span>
    <span data-slot="list-trailing">›</span>
  </button>
</section>

import type { CardSlots, ModalSlots } from './slot-api';

// Cách dùng typed slots
const cardConfig: CardSlots = {
  header: titleElement,              // data-slot="card-header"
  body: contentElement,              // data-slot="card-content"  ← required
  footer: actionButtons,            // data-slot="card-footer"
  title: "Tiêu đề card",           // data-slot="card-title"
  action: moreButton,              // data-slot="card-action"
};

// Tự động hiện trong Figma Dev Mode
figma.connect("https://figma.com/...", {
  props: {
    header: figma.slot("Header"),
    content: figma.slot("Content"),
    footer: figma.slot("Footer"),
  },
  example: (props) => `
    <article class="card" data-slot="card">
      <div class="slot-header" data-slot="card-header">${props.header}</div>
      <div class="slot-body" data-slot="card-content">${props.content}</div>
      <div class="slot-footer" data-slot="card-footer">${props.footer}</div>
    </article>
  `,
});

{
  "card-footer": {
    "preferred": ["Button/Primary/md + Button/Outline/md"],
    "description": "Action button group"
  }
}

☐ Component .md có ## Slot Map (Figma ↔ Code) section?
☐ Slot names match slot-manifest.json?
☐ CSS class theo convention? (structural .slot-* vs BEM __)
☐ HTML có data-slot attributes?
☐ code-connect.config.json có entry?
☐ slot-api.d.ts có typed interface?
☐ preferred-instances.json có mapping?
☐ Slot names chỉ dùng 14 suffix chuẩn (R4)?

knowledge/
├── slot-manifest.json              ← 🔒 Source of truth (42 components)
└── slot-convention.md              ← 📏 Quy ước CSS naming (chi tiết)

design-system/code-connect/
├── code-connect.config.json        ← 🔗 40 components mapping
├── generate-code-connect.js        ← ⚙️ Generator → .figma.ts
├── slot-api.d.ts                   ← 📐 TypeScript interfaces
├── preferred-instances.json        ← 🎯 Gợi ý Figma instances
├── README.md                       ← 📖 Hướng dẫn setup
└── generated/                      ← 📦 40 .figma.ts (auto-generated)

design-system/components md/
└── *.md                            ← 📝 40 files có ## Slot Map section