{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "conversation-list-section",
  "title": "ConversationListSection",
  "description": "Semantically labelled section for grouping conversation rows by meaningful chronology or category.",
  "type": "registry:ui",
  "meta": {
    "library": "@ds-mo/ui",
    "distribution": "npm",
    "storybook": "https://zainadeel.github.io/compomo/?path=/story/conversation-list-section",
    "source": "src/wc/components/ConversationListSection/ConversationListSection.tsx",
    "intentStatus": "complete",
    "intent": {
      "audience": "general",
      "status": "experimental",
      "summary": "Semantically labelled section for grouping conversation rows by meaningful chronology or category.",
      "useWhen": [
        "A conversation list needs visible groups such as Today, Yesterday, or Older."
      ],
      "avoidWhen": [
        "A flat list is clearer or the proposed grouping has no meaning to readers."
      ],
      "commonlyComposedWith": [
        "component:ds-conversation-list",
        "component:ds-conversation-list-item"
      ],
      "patterns": [
        "pattern:conversation"
      ],
      "accessibility": [
        "The visible heading labels the section and must describe the relationship shared by its rows."
      ],
      "responsiveBehavior": [
        "Rows remain full width with a 4px gap between adjacent items while the heading stays visible in document order."
      ],
      "references": [
        {
          "label": "Storybook examples",
          "path": "src/wc/components/ConversationList/ConversationList.stories.ts"
        }
      ]
    },
    "api": {
      "props": {
        "heading": {
          "type": "string",
          "resolvedType": "string",
          "attribute": "heading",
          "default": "''",
          "required": false,
          "mutable": false,
          "description": "Visible section heading."
        },
        "sectionId": {
          "type": "string",
          "resolvedType": "string",
          "attribute": "section-id",
          "default": "''",
          "required": false,
          "mutable": false,
          "description": "Optional stable id used for the section heading."
        }
      },
      "events": [],
      "methods": [],
      "slots": []
    },
    "props": {
      "heading": {
        "type": "string",
        "resolvedType": "string",
        "attribute": "heading",
        "default": "''",
        "required": false,
        "mutable": false,
        "description": "Visible section heading."
      },
      "sectionId": {
        "type": "string",
        "resolvedType": "string",
        "attribute": "section-id",
        "default": "''",
        "required": false,
        "mutable": false,
        "description": "Optional stable id used for the section heading."
      }
    },
    "events": [],
    "methods": [],
    "slots": [],
    "exports": {
      "customElement": "ds-conversation-list-section",
      "react": "DsConversationListSection",
      "vue": "DsConversationListSection",
      "angular": "DsConversationListSection"
    },
    "consumption": {
      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
      "customElements": {
        "import": "import '@ds-mo/ui/dist/components/ds-conversation-list-section.js';",
        "example": "<ds-conversation-list-section></ds-conversation-list-section>"
      },
      "react": {
        "import": "import { DsConversationListSection } from '@ds-mo/ui/react';",
        "example": "<DsConversationListSection />"
      },
      "vue": {
        "import": "import { DsConversationListSection } from '@ds-mo/ui/vue';",
        "example": "<DsConversationListSection />"
      },
      "angular": {
        "import": "import { DsConversationListSection } from '@ds-mo/ui/angular/ds-conversation-list-section';",
        "example": "<ds-conversation-list-section></ds-conversation-list-section>"
      },
      "peerDependencies": {
        "required": [
          "@ds-mo/tokens ^6.5.0",
          "@ds-mo/icons ^7.0.0"
        ],
        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
      }
    }
  },
  "dependencies": [
    "@ds-mo/ui",
    "@ds-mo/tokens"
  ],
  "registryDependencies": [
    "text"
  ],
  "files": [
    {
      "path": "src/wc/components/ConversationListSection/ConversationListSection.css",
      "content": ":host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(:first-child)) {\n  /* Match the 16px separation between PanelNav groups. */\n  margin-top: var(--dimension-space-200);\n}\n\n.conversation-list-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-section__heading {\n  display: block;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n}\n\n.conversation-list-section__items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/wc/components/ConversationListSection/ConversationListSection.tsx",
      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nlet sectionId = 0;\n\n@Component({\n  tag: 'ds-conversation-list-section',\n  styleUrl: 'ConversationListSection.css',\n  scoped: true,\n})\nexport class ConversationListSection {\n  /** Visible section heading. */\n  @Prop() heading: string = '';\n  /** Optional stable id used for the section heading. */\n  @Prop() sectionId: string = '';\n\n  private readonly generatedId = `ds-conversation-section-${++sectionId}`;\n\n  render() {\n    const headingId = this.sectionId || this.generatedId;\n    return (\n      <Host>\n        <section class=\"conversation-list-section\" aria-labelledby={headingId}>\n          <ds-text\n            class=\"conversation-list-section__heading\"\n            textId={headingId}\n            as=\"h3\"\n            variant=\"text-caption\"\n            emphasis\n            color=\"secondary\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"conversation-list-section__items\" role=\"list\">\n            <slot />\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n",
      "type": "registry:ui"
    }
  ]
}