{
  "schemaVersion": 1,
  "theme": "j3w1-theme",
  "version": "1.1.0",
  "profile": "default",
  "profileStatus": "approved",
  "release": {
    "version": "1.1.0",
    "stability": "release",
    "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
  },
  "sourceDigest": "sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=",
  "id": "empty-state",
  "family": "feedback",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "feedback",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": false,
    "testImplemented": false,
    "states": 1
  },
  "title": "Empty state",
  "summary": "What a container shows when it has nothing to list; a glyph, a heading in the bright text colour, one sentence in the muted colour and an optional secondary action.",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-empty-state",
    "spec": "spec/components/empty-state.md",
    "brief": "exports/components/empty-state.brief.txt"
  },
  "native": true,
  "aria": {
    "pattern": "native block; a heading and a paragraph inside the region the content would fill; the action is a native <button> or <a>",
    "apg": "https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/"
  },
  "variants": [
    {
      "id": "with-action",
      "name": "With action"
    },
    {
      "id": "without-action",
      "name": "Without action"
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default"
  ],
  "tokens": {
    "root.bg": {
      "alias": "color.surface.default",
      "value": "#100c0c",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-023",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "root.border": {
      "alias": "color.border.divider",
      "value": "#2b0e0d",
      "status": "proposed",
      "deprecated": false,
      "decisionId": "D-008",
      "eligibility": {
        "action": "use-and-report",
        "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
        "decisionIds": [
          "D-008"
        ]
      }
    },
    "glyph.text": {
      "alias": "color.icon.decorative",
      "value": "#a3676b",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "heading.text": {
      "alias": "color.text.bright",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "text.text": {
      "alias": "color.text.muted",
      "value": "#bd787d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "action.text": {
      "alias": "color.action.secondary.text",
      "value": "#ffa2a7",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "action.border": {
      "alias": "color.action.secondary.border",
      "value": "#a3676b",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "action.bg-hover": {
      "alias": "color.action.secondary.hover-bg",
      "value": "#630f0d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "action.ring": {
      "alias": "color.interaction.focus.ring",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    }
  },
  "stateRules": [
    {
      "state": "default",
      "visual": "glyph, heading and sentence centred; the action, when present, below them",
      "channel": "the worded heading; the action is a real button",
      "tokens": {
        "fg": {
          "alias": "color.text.muted",
          "value": "#bd787d",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.default",
          "value": "#100c0c",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    }
  ],
  "keyboard": [
    {
      "key": "Tab",
      "action": "Reaches the action when present; the block itself is never focusable."
    },
    {
      "key": "Enter / Space",
      "action": "Activates the action."
    }
  ],
  "responsive": "Centred at any width; the heading and sentence wrap; at 320px the padding shrinks to 16px and the action takes the full width. RTL needs no change; the glyph has no direction.",
  "portability": {
    "web": "a <div> with an <h3> (or the heading level of the region) and a <p>, placed where the list, table body or pane content would be; the action is a native <button> or <a>; a live region announces the change when a filter empties the list.",
    "nativeFallbacks": [
      "GTK4 StatusPage; the icon slot holds the glyph as text.",
      "Qt a QLabel stack in the empty view; QListView placeholder text is not enough because it has no action.",
      "Terminal UI: the heading and sentence centred in the pane."
    ]
  },
  "fixtures": [
    "FX-LONG",
    "FX-320",
    "FX-ZOOM-200",
    "FX-I18N",
    "FX-RTL",
    "FX-RM",
    "FX-HC",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "error-state",
    "loading-indicator",
    "list",
    "table",
    "data-table",
    "button"
  ],
  "specimens": [
    "filterable-table",
    "settings-panel"
  ],
  "nonExamples": "An illustration or mascot. A primary (filled) call to action. A blank pane.\nA greyed-out table header with no message. A message that only says \"No\ndata\". A heading in the accent red. An empty state that appears while\nloading. Centred text in a rounded card with a shadow.",
  "contrast": [
    {
      "label": "empty-state default text",
      "state": "default",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.muted",
      "bg": "color.surface.default",
      "fgHex": "#bd787d",
      "bgHex": "#100c0c",
      "ratio": 5.69,
      "pass": true,
      "waiver": null
    },
    {
      "label": "heading on the panel surface",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.default",
      "fgHex": "#ffa2a7",
      "bgHex": "#100c0c",
      "ratio": 10.17,
      "pass": true,
      "waiver": null
    },
    {
      "label": "action text on the panel surface",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.secondary.text",
      "bg": "color.surface.default",
      "fgHex": "#ffa2a7",
      "bgHex": "#100c0c",
      "ratio": 10.17,
      "pass": true,
      "waiver": null
    },
    {
      "label": "action boundary on the panel surface",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.action.secondary.border",
      "bg": "color.surface.default",
      "fgHex": "#a3676b",
      "bgHex": "#100c0c",
      "ratio": 4.36,
      "pass": true,
      "waiver": null
    },
    {
      "label": "glyph (decorative)",
      "state": null,
      "kind": "ui",
      "min": 1,
      "fg": "color.icon.decorative",
      "bg": "color.surface.default",
      "fgHex": "#a3676b",
      "bgHex": "#100c0c",
      "ratio": 4.36,
      "pass": true,
      "waiver": "the glyph is aria-hidden and conveys nothing the heading does not"
    },
    {
      "label": "container edge (decorative)",
      "state": null,
      "kind": "ui",
      "min": 1,
      "fg": "color.border.divider",
      "bg": "color.surface.canvas",
      "fgHex": "#2b0e0d",
      "bgHex": "#000000",
      "ratio": 1.17,
      "pass": true,
      "waiver": "the empty state fills the region its content would; the edge is the region's"
    }
  ]
}