Zag.js + Solid

Zagjs

Accordion Avatar Carousel Checkbox Clipboard Collapsible Color Picker Combobox Context Menu Date Picker (Multi)Date Picker (Range)Date Picker (Single)Dialog Editable File Upload Floating Panel Hover Card Menu Menu With options Nested Menu Nested Popover Number Input Pagination Pin Input Popover Popper Presence Progress QR Code Radio Group Range Slider Rating Group Segment Control Select Signature Pad Slider Splitter Steps Switch Tabs Tags Input Time Picker Timer (CountDown)Timer (StopWatch)Toast Toggle Group Tooltip Tour Tree View

 Visualizer 
{
    "value": "closed",
    "previousValue": "",
    "event": {},
    "previousEvent": {},
    "context": {
        "openDelay": 1000,
        "closeDelay": 500,
        "closeOnPointerDown": true,
        "closeOnEscape": true,
        "interactive": false,
        "closeOnScroll": true,
        "closeOnClick": true,
        "id": "000000110000030000000",
        "hasPointerMoveOpened": false,
        "positioning": {
            "placement": "bottom"
        },
        "hasAriaLabel": false
    },
    "done": false,
    "tags": [
        "closed"
    ],
    "nextEvents": [
        "CONTROLLED.OPEN",
        "OPEN",
        "POINTER_LEAVE",
        "POINTER_MOVE"
    ],
    "changed": false
}

 Visualizer 
{
    "value": "closed",
    "previousValue": "",
    "event": {},
    "previousEvent": {},
    "context": {
        "openDelay": 1000,
        "closeDelay": 500,
        "closeOnPointerDown": true,
        "closeOnEscape": true,
        "interactive": false,
        "closeOnScroll": true,
        "closeOnClick": true,
        "id": "000000110000030000001",
        "hasPointerMoveOpened": false,
        "positioning": {
            "placement": "bottom"
        },
        "hasAriaLabel": false
    },
    "done": false,
    "tags": [
        "closed"
    ],
    "nextEvents": [
        "CONTROLLED.OPEN",
        "OPEN",
        "POINTER_LEAVE",
        "POINTER_MOVE"
    ],
    "changed": false
}