{
  "definitions": {
    "events": {
      "$ref": "#/definitions/Events",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Events": {
          "additionalProperties": false,
          "properties": {
            "select": {
              "$ref": "#/definitions/IChat"
            }
          },
          "required": [
            "select"
          ],
          "type": "object"
        },
        "IChat": {
          "additionalProperties": false,
          "properties": {
            "_selected": {
              "type": "boolean"
            },
            "chat_id": {
              "type": "string"
            },
            "chat_img": {
              "type": "string"
            },
            "chat_name": {
              "type": "string"
            },
            "counter": {
              "type": "number"
            },
            "img_uri": {
              "type": "string"
            },
            "is_group": {
              "type": "boolean"
            },
            "last_message_author": {
              "type": "string"
            },
            "last_message_author_img": {
              "type": "string"
            },
            "last_message_text": {
              "type": "string"
            },
            "last_message_time": {
              "format": "date-time",
              "type": "string"
            },
            "localeTimeString": {
              "type": "string"
            },
            "text": {
              "type": "string"
            },
            "time": {
              "format": "date-time",
              "type": "string"
            },
            "title": {
              "type": "string"
            }
          },
          "required": [
            "time",
            "title",
            "text",
            "img_uri",
            "chat_id"
          ],
          "type": "object"
        }
      }
    },
    "component": {
      "$ref": "#/definitions/Component",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Component": {
          "additionalProperties": false,
          "properties": {
            "chats": {
              "description": "Parsed from a JSON attribute when omitted in HTML.",
              "items": {
                "$ref": "#/definitions/IChat"
              },
              "type": "array"
            },
            "id": {
              "type": "string"
            },
            "style": {
              "type": "string"
            }
          },
          "type": "object"
        },
        "IChat": {
          "additionalProperties": false,
          "properties": {
            "_selected": {
              "type": "boolean"
            },
            "chat_id": {
              "type": "string"
            },
            "chat_img": {
              "type": "string"
            },
            "chat_name": {
              "type": "string"
            },
            "counter": {
              "type": "number"
            },
            "img_uri": {
              "type": "string"
            },
            "is_group": {
              "type": "boolean"
            },
            "last_message_author": {
              "type": "string"
            },
            "last_message_author_img": {
              "type": "string"
            },
            "last_message_text": {
              "type": "string"
            },
            "last_message_time": {
              "format": "date-time",
              "type": "string"
            },
            "localeTimeString": {
              "type": "string"
            },
            "text": {
              "type": "string"
            },
            "time": {
              "format": "date-time",
              "type": "string"
            },
            "title": {
              "type": "string"
            }
          },
          "required": [
            "time",
            "title",
            "text",
            "img_uri",
            "chat_id"
          ],
          "type": "object"
        }
      }
    }
  },
  "description": "Lists chat or channel previews from `chats`: avatar, title, last message snippet, derived time label, and unread `counter` badge. Clicking a row marks it selected (`_selected`) and dispatches `select` with that chat payload for opening a thread or switching context.",
  "storybookArgs": {
    "chats": {
      "control": {
        "type": "object"
      }
    },
    "selected": {
      "action": "selectedEvent"
    }
  },
  "styleSetup": {
    "vars": [
      {
        "name": "--bulma-text",
        "valueType": "color",
        "defaultValue": "#363636",
        "description": "Title and preview snippet text."
      },
      {
        "name": "--bulma-text-strong",
        "valueType": "color",
        "defaultValue": "#363636",
        "description": "Strong title weight color (falls back to `--bulma-text`)."
      },
      {
        "name": "--bulma-text-weak",
        "valueType": "color",
        "defaultValue": "#7a7a7a",
        "description": "Muted foreground for the timestamp or relative time shown beside each chat preview."
      },
      {
        "name": "--bulma-border",
        "valueType": "color",
        "defaultValue": "#dbdbdb",
        "description": "Row divider between chat previews."
      },
      {
        "name": "--bulma-scheme-main-bis",
        "valueType": "color",
        "defaultValue": "#fafafa",
        "description": "Hover background for non-selected rows."
      },
      {
        "name": "--bulma-scheme-main-ter",
        "valueType": "color",
        "defaultValue": "#f5f5f5",
        "description": "Selected row background."
      },
      {
        "name": "--bulma-radius-rounded",
        "valueType": "number",
        "defaultValue": "9999px",
        "description": "Pill shape for the unread counter tag."
      }
    ],
    "parts": []
  },
  "contributors": [],
  "htmlSlots": [],
  "i18n": [],
  "examples": [
    {
      "name": "default",
      "data": {
        "chats": [
          {
            "chat_id": "ciao0",
            "counter": 0,
            "text": "Hello 0",
            "title": "Hello0",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          },
          {
            "chat_id": "ciao1",
            "counter": 0,
            "text": "Hello 1",
            "title": "Hello1",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          },
          {
            "chat_id": "ciao2",
            "counter": 0,
            "text": "Hello 2",
            "title": "Hello2",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          }
        ]
      }
    },
    {
      "name": "selected",
      "data": {
        "chats": [
          {
            "chat_id": "ciao0",
            "counter": 0,
            "text": "Hello 0",
            "title": "Hello0",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          },
          {
            "chat_id": "ciao1",
            "counter": 0,
            "text": "Hello 1",
            "title": "Hello1",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png",
            "_selected": true
          },
          {
            "chat_id": "ciao2",
            "counter": 0,
            "text": "Hello 2",
            "title": "Hello2",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          }
        ]
      }
    },
    {
      "name": "unreadBadges",
      "description": "Rows with non-zero unread counters on several chats.",
      "data": {
        "chats": [
          {
            "chat_id": "team",
            "counter": 3,
            "text": "Can you review the PR?",
            "title": "Engineering",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          },
          {
            "chat_id": "sales",
            "counter": 12,
            "text": "Contract signed",
            "title": "Sales",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          },
          {
            "chat_id": "support",
            "counter": 1,
            "text": "Ticket #4421 updated",
            "title": "Support",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png"
          }
        ]
      }
    },
    {
      "name": "singleChat",
      "description": "Single-row list for narrow layouts.",
      "data": {
        "chats": [
          {
            "chat_id": "solo",
            "counter": 0,
            "text": "Only conversation in the list",
            "title": "Direct message",
            "time": "2026-04-30T22:22:41.321Z",
            "img_uri": "https://www.w3schools.com/howto/img_avatar.png",
            "_selected": true
          }
        ]
      }
    }
  ],
  "iifeIntegrity": "sha384-Zs5/8xphKc0WRiCUr5lBl2en3bl9nT5OVvoBCYYBkUY0Jpac4a5UonkTfKvf7vf1",
  "dependencies": [],
  "screenshots": [],
  "licenses": [
    {
      "type": "Apache-2.0",
      "path": "LICENSE.md",
      "cost": 0,
      "currency": "EUR"
    }
  ],
  "readmePath": "README.md",
  "name": "hb-messages-topics-card",
  "category": "messaging",
  "tags": [
    "messaging",
    "chat"
  ],
  "size": {},
  "iifePath": "main.iife.js",
  "repoName": "@htmlbricks/hb-messages-topics-card",
  "version": "0.76.5"
}