{
  "definitions": {
    "events": {
      "$ref": "#/definitions/Events",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Events": {
          "additionalProperties": false,
          "properties": {
            "dashboardIndicatorClick": {
              "additionalProperties": false,
              "properties": {
                "id": {
                  "type": "string"
                }
              },
              "required": [
                "id"
              ],
              "type": "object"
            }
          },
          "required": [
            "dashboardIndicatorClick"
          ],
          "type": "object"
        }
      }
    },
    "component": {
      "$ref": "#/definitions/Component",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Component": {
          "additionalProperties": false,
          "properties": {
            "icon": {
              "type": "string"
            },
            "id": {
              "type": "string"
            },
            "karma": {
              "$ref": "#/definitions/Karma",
              "description": "Semantic accent from Bulma (`secondary` → `dark` tokens), or `none` for a custom host color via `--hb--dashboard-indicator-background`."
            },
            "link_label": {
              "type": "string"
            },
            "number": {
              "type": "number"
            },
            "style": {
              "type": "string"
            },
            "text": {
              "type": "string"
            }
          },
          "type": "object"
        },
        "Karma": {
          "enum": [
            "success",
            "danger",
            "warning",
            "primary",
            "secondary",
            "info",
            "none"
          ],
          "type": "string"
        }
      }
    }
  },
  "description": "Compact KPI tile: large `number`, caption `text`, configurable Bootstrap Icon, and `karma` accent (`success` | `danger` | `warning` | `primary` | `secondary` | `info`) using Bulma theme tokens (`secondary` maps to Bulma `dark`), or `karma=\"none\"` with host CSS variable `--hb--dashboard-indicator-background` for a custom color. When `link_label` is set, a footer strip is shown and clicks dispatch `dashboardIndicatorClick` with the component `id`.",
  "storybookArgs": {
    "number": {
      "control": {
        "type": "number"
      }
    },
    "text": {
      "control": {
        "type": "text"
      }
    },
    "icon": {
      "control": {
        "type": "text"
      }
    },
    "link_label": {
      "control": {
        "type": "text"
      }
    },
    "karma": {
      "control": {
        "type": "select"
      },
      "options": [
        "success",
        "danger",
        "warning",
        "primary",
        "secondary",
        "info",
        "none"
      ]
    },
    "dashboardIndicatorClick": {
      "action": "dashboardIndicatorClickEvent"
    }
  },
  "styleSetup": {
    "vars": [
      {
        "name": "--hb--dashboard-indicator-background",
        "valueType": "color",
        "defaultValue": "",
        "description": "Header background and footer link color when `karma` is `none` (any valid CSS color). If unset, falls back to Bulma semantic `success`. Ignored for other `karma` values (those use Bulma `--bulma-*-h/s/l` palettes)."
      },
      {
        "name": "--bulma-block-spacing",
        "valueType": "number",
        "defaultValue": "1rem",
        "description": "Horizontal padding in the card header and footer strip."
      },
      {
        "name": "--bulma-background",
        "valueType": "color",
        "defaultValue": "",
        "description": "Footer strip surface color (with scheme fallbacks in CSS when unset)."
      }
    ],
    "parts": []
  },
  "contributors": [],
  "htmlSlots": [],
  "i18n": [],
  "examples": [
    {
      "name": "default",
      "data": {
        "number": 10,
        "text": "ritestawdmento",
        "icon": "window",
        "link_label": "testaggio",
        "karma": "success"
      }
    },
    {
      "name": "default2",
      "data": {
        "number": 11,
        "icon": "window",
        "link_label": "testaggio2"
      }
    },
    {
      "name": "karma-danger",
      "description": "Header and footer accent use Bulma `danger` tokens.",
      "data": {
        "number": 3,
        "text": "Failed jobs",
        "icon": "exclamation-triangle",
        "link_label": "Open queue",
        "karma": "danger"
      }
    },
    {
      "name": "custom-accent",
      "description": "Set `karma` to `none` and define `--hb--dashboard-indicator-background` on the host (e.g. inline `style` or a parent stylesheet targeting `hb-dashboard-indicator`).",
      "data": {
        "number": 42,
        "text": "Custom brand",
        "icon": "palette",
        "link_label": "Details",
        "karma": "none"
      }
    }
  ],
  "iifeIntegrity": "sha384-zNzfJ2KQRilx5Wqn5R+ijkVMFZJLEIcIWU1gIaC+irZXQ4uI9TQlHVRIFClqNraL",
  "dependencies": [],
  "screenshots": [],
  "licenses": [
    {
      "type": "Apache-2.0",
      "path": "LICENSE.md",
      "cost": 0,
      "currency": "EUR"
    }
  ],
  "readmePath": "README.md",
  "name": "hb-dashboard-indicator",
  "category": "data",
  "tags": [
    "data",
    "dashboard"
  ],
  "size": {},
  "iifePath": "main.iife.js",
  "repoName": "@htmlbricks/hb-dashboard-indicator",
  "version": "0.76.5"
}