{
  "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": "tooltip",
  "family": "feedback",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "feedback",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": false,
    "testImplemented": false,
    "states": 5
  },
  "title": "Tooltip",
  "summary": "A short description of a control shown on hover and focus; role tooltip linked by aria-describedby, a 1px overlay border on the raised surface, no arrow.",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-tooltip",
    "spec": "spec/components/tooltip.md",
    "brief": "exports/components/tooltip.brief.txt"
  },
  "native": false,
  "aria": {
    "pattern": "APG tooltip: a trigger with aria-describedby pointing at an element with role=tooltip, shown on hover and focus, hidden on Escape",
    "apg": "https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/",
    "role": "tooltip"
  },
  "variants": [
    {
      "id": "default",
      "name": "Description"
    },
    {
      "id": "with-shortcut",
      "name": "With shortcut"
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default",
    "hover",
    "focus-visible",
    "open",
    "closed"
  ],
  "tokens": {
    "popup.bg": {
      "alias": "color.surface.raised",
      "value": "#160b0b",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-027",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "popup.border": {
      "alias": "color.border.overlay",
      "value": "#e53935",
      "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"
        ]
      }
    },
    "popup.text": {
      "alias": "color.text.default",
      "value": "#e99499",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "shortcut.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": []
      }
    },
    "shortcut.border": {
      "alias": "color.border.control",
      "value": "#a3676b",
      "status": "proposed",
      "deprecated": false,
      "decisionId": "D-007",
      "eligibility": {
        "action": "use-and-report",
        "reason": "Use the pinned value and disclose every pending decision ID; approval statuses are unchanged.",
        "decisionIds": [
          "D-007"
        ]
      }
    },
    "trigger.text": {
      "alias": "color.action.tertiary.text",
      "value": "#e99499",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "trigger.bg-hover": {
      "alias": "color.action.tertiary.hover-bg",
      "value": "#1c0a09",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "trigger.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": []
      }
    },
    "popup.z": {
      "alias": "z.popover",
      "value": "10",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    }
  },
  "stateRules": [
    {
      "state": "default",
      "visual": "trigger at rest; the popup shown for the demonstration",
      "channel": "`aria-describedby` on the trigger",
      "tokens": {
        "fg": {
          "alias": "color.text.default",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.raised",
          "value": "#160b0b",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-027",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.border.overlay",
          "value": "#e53935",
          "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"
            ]
          }
        }
      }
    },
    {
      "state": "hover",
      "visual": "trigger background → {color.action.tertiary.hover-bg}; the popup appears after 300 ms",
      "channel": "cursor: pointer; the popup itself",
      "tokens": {
        "fg": {
          "alias": "color.action.tertiary.text",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.action.tertiary.hover-bg",
          "value": "#1c0a09",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "focus-visible",
      "visual": "ring 1px dashed {color.interaction.focus.ring} at −2px on the trigger; the popup appears at once",
      "channel": "the ring; the popup",
      "tokens": {
        "fg": {
          "alias": "color.action.tertiary.text",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.canvas",
          "value": "#000000",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-023",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "outline": {
          "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": []
          }
        }
      }
    },
    {
      "state": "open",
      "visual": "the popup visible, 1px {color.border.overlay} on {color.surface.raised}",
      "channel": "the popup is present in the accessibility tree",
      "tokens": {
        "fg": {
          "alias": "color.text.default",
          "value": "#e99499",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.surface.raised",
          "value": "#160b0b",
          "status": "approved",
          "deprecated": false,
          "decisionId": "D-027",
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "border": {
          "alias": "color.border.overlay",
          "value": "#e53935",
          "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"
            ]
          }
        }
      }
    },
    {
      "state": "closed",
      "visual": "the popup absent; the trigger unchanged",
      "channel": "`hidden`; the description is still read from the DOM",
      "tokens": {}
    }
  ],
  "keyboard": [
    {
      "key": "Tab",
      "action": "Focusing the trigger shows the tooltip; leaving it hides the tooltip."
    },
    {
      "key": "Escape",
      "action": "Hides the tooltip without moving focus; the trigger's own Escape behaviour is not triggered."
    },
    {
      "key": "Enter / Space",
      "action": "Act on the trigger as usual; the tooltip hides on activation."
    }
  ],
  "responsive": "The popup is at most 24rem wide and wraps; it flips to the side with room and is never clipped by the viewport; at 320px it is as wide as the viewport minus the gutter. RTL mirrors the placement and keeps the shortcut at the end.",
  "portability": {
    "web": "the trigger carries aria-describedby to a <div role=tooltip>; visibility toggles the hidden attribute after a 300 ms open delay and no close delay; positioned with anchor positioning or a popover at z.popover; the tooltip is never the only place a control's name lives.",
    "nativeFallbacks": [
      "GTK4 tooltip-text; the host draws it with the overlay border through the tooltip css node.",
      "Qt QToolTip stylesheet; border and background from the tokens; no rounded corners.",
      "Terminal UI: the description in the status line while the control is focused."
    ]
  },
  "fixtures": [
    "FX-LONG",
    "FX-320",
    "FX-ZOOM-200",
    "FX-I18N",
    "FX-RTL",
    "FX-RM",
    "FX-HC",
    "FX-OVERFLOW",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "icon-button",
    "popover",
    "kbd",
    "toolbar",
    "menu"
  ],
  "specimens": [
    "i3-window-frame",
    "filterable-table"
  ],
  "nonExamples": "A rounded bubble with an arrow. A tooltip with a shadow or a fade longer\nthan 150 ms. A tooltip as the only accessible name of an icon button. A\ntooltip with a link or a button inside. One that opens on focus but not on\nhover, or on hover with no delay. A title attribute. A tooltip that follows\nthe pointer.",
  "contrast": [
    {
      "label": "tooltip default text",
      "state": "default",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.surface.raised",
      "fgHex": "#e99499",
      "bgHex": "#160b0b",
      "ratio": 8.43,
      "pass": true,
      "waiver": null
    },
    {
      "label": "tooltip default border",
      "state": "default",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.overlay",
      "bg": "color.surface.raised",
      "fgHex": "#e53935",
      "bgHex": "#160b0b",
      "ratio": 4.57,
      "pass": true,
      "waiver": null
    },
    {
      "label": "tooltip hover text",
      "state": "hover",
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.tertiary.text",
      "bg": "color.action.tertiary.hover-bg",
      "fgHex": "#e99499",
      "bgHex": "#1c0a09",
      "ratio": 8.35,
      "pass": true,
      "waiver": null
    },
    {
      "label": "tooltip focus-visible text",
      "state": "focus-visible",
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.tertiary.text",
      "bg": "color.surface.canvas",
      "fgHex": "#e99499",
      "bgHex": "#000000",
      "ratio": 9.16,
      "pass": true,
      "waiver": null
    },
    {
      "label": "tooltip focus-visible outline",
      "state": "focus-visible",
      "kind": "ui",
      "min": 3,
      "fg": "color.interaction.focus.ring",
      "bg": "color.surface.canvas",
      "fgHex": "#e53935",
      "bgHex": "#000000",
      "ratio": 4.97,
      "pass": true,
      "waiver": null
    },
    {
      "label": "tooltip open text",
      "state": "open",
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.default",
      "bg": "color.surface.raised",
      "fgHex": "#e99499",
      "bgHex": "#160b0b",
      "ratio": 8.43,
      "pass": true,
      "waiver": null
    },
    {
      "label": "tooltip open border",
      "state": "open",
      "kind": "ui",
      "min": 3,
      "fg": "color.border.overlay",
      "bg": "color.surface.raised",
      "fgHex": "#e53935",
      "bgHex": "#160b0b",
      "ratio": 4.57,
      "pass": true,
      "waiver": null
    },
    {
      "label": "shortcut on the tooltip",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.text.bright",
      "bg": "color.surface.raised",
      "fgHex": "#ffa2a7",
      "bgHex": "#160b0b",
      "ratio": 10.1,
      "pass": true,
      "waiver": null
    },
    {
      "label": "shortcut key border on the tooltip",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.border.control",
      "bg": "color.surface.raised",
      "fgHex": "#a3676b",
      "bgHex": "#160b0b",
      "ratio": 4.33,
      "pass": true,
      "waiver": null
    },
    {
      "label": "trigger text on the canvas",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.tertiary.text",
      "bg": "color.surface.canvas",
      "fgHex": "#e99499",
      "bgHex": "#000000",
      "ratio": 9.16,
      "pass": true,
      "waiver": null
    }
  ]
}