{
  "definitions": {
    "events": {
      "$ref": "#/definitions/Events",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Events": {
          "additionalProperties": false,
          "properties": {
            "languageChange": {
              "additionalProperties": false,
              "properties": {
                "code": {
                  "type": "string"
                }
              },
              "required": [
                "code"
              ],
              "type": "object"
            },
            "offcanvasswitch": {
              "additionalProperties": false,
              "properties": {
                "isOpen": {
                  "type": "boolean"
                }
              },
              "required": [
                "isOpen"
              ],
              "type": "object"
            },
            "pageChange": {
              "additionalProperties": false,
              "properties": {
                "page": {
                  "type": "string"
                }
              },
              "required": [
                "page"
              ],
              "type": "object"
            },
            "themeChange": {
              "additionalProperties": false,
              "properties": {
                "mode": {
                  "$ref": "#/definitions/ThemePreference"
                }
              },
              "required": [
                "mode"
              ],
              "type": "object"
            }
          },
          "required": [
            "offcanvasswitch",
            "pageChange",
            "languageChange",
            "themeChange"
          ],
          "type": "object"
        },
        "ThemePreference": {
          "enum": [
            "light",
            "dark",
            "auto"
          ],
          "type": "string"
        }
      }
    },
    "component": {
      "$ref": "#/definitions/Component",
      "$schema": "http://json-schema.org/draft-07/schema#",
      "definitions": {
        "Component": {
          "additionalProperties": false,
          "properties": {
            "companylogouri": {
              "type": "string"
            },
            "companytitle": {
              "type": "string"
            },
            "enablefooter": {
              "anyOf": [
                {
                  "type": "boolean"
                },
                {
                  "const": "yes",
                  "type": "string"
                },
                {
                  "const": "no",
                  "type": "string"
                },
                {
                  "const": "false",
                  "type": "string"
                },
                {
                  "type": "null"
                },
                {
                  "const": "",
                  "type": "string"
                }
              ],
              "description": "Passed through to hb-sidebar-desktop (`yes` shows footer chrome and slot)."
            },
            "enablethemeswitch": {
              "enum": [
                "yes",
                "no",
                null,
                ""
              ],
              "type": [
                "string",
                "null"
              ]
            },
            "groups": {
              "items": {
                "additionalProperties": false,
                "properties": {
                  "key": {
                    "type": "string"
                  },
                  "label": {
                    "type": "string"
                  }
                },
                "required": [
                  "key",
                  "label"
                ],
                "type": "object"
              },
              "type": "array"
            },
            "i18nlang": {
              "type": [
                "string",
                "null"
              ]
            },
            "i18nlanguages": {
              "anyOf": [
                {
                  "items": {
                    "$ref": "#/definitions/I18nLanguageOption"
                  },
                  "type": "array"
                },
                {
                  "type": "string"
                },
                {
                  "type": "null"
                },
                {
                  "const": "",
                  "type": "string"
                }
              ]
            },
            "id": {
              "type": "string"
            },
            "navlinks": {
              "items": {
                "$ref": "#/definitions/INavLink"
              },
              "type": "array"
            },
            "navpage": {
              "type": "string"
            },
            "opened": {
              "type": "boolean"
            },
            "style": {
              "type": "string"
            },
            "themepreference": {
              "anyOf": [
                {
                  "$ref": "#/definitions/ThemePreference"
                },
                {
                  "type": "null"
                },
                {
                  "const": "",
                  "type": "string"
                }
              ]
            },
            "type": {
              "enum": [
                "open",
                "autohide",
                "small"
              ],
              "type": "string"
            }
          },
          "type": "object"
        },
        "I18nLanguageOption": {
          "additionalProperties": false,
          "description": "Entry for the sidebar language menu (from `hb-layout` → layouts → sidebar).",
          "properties": {
            "code": {
              "type": "string"
            },
            "label": {
              "type": "string"
            }
          },
          "required": [
            "code",
            "label"
          ],
          "type": "object"
        },
        "INavLink": {
          "additionalProperties": false,
          "properties": {
            "active": {
              "type": "boolean"
            },
            "badge": {
              "additionalProperties": false,
              "properties": {
                "class": {
                  "type": "string"
                },
                "classcolor": {
                  "type": "string"
                },
                "text": {
                  "type": "string"
                }
              },
              "required": [
                "text"
              ],
              "type": "object"
            },
            "group": {
              "type": "string"
            },
            "icon": {
              "type": "string"
            },
            "key": {
              "type": "string"
            },
            "label": {
              "type": "string"
            },
            "open": {
              "type": "boolean"
            },
            "subLinks": {
              "items": {
                "$ref": "#/definitions/INavLink"
              },
              "type": "array"
            }
          },
          "required": [
            "key",
            "label"
          ],
          "type": "object"
        },
        "ThemePreference": {
          "enum": [
            "light",
            "dark",
            "auto"
          ],
          "type": "string"
        }
      }
    }
  },
  "description": "Slide-in panel that hosts hb-sidebar-desktop navigation, with Bulma `modal-background` as optional backdrop when `type` is autohide. Can start open or closed; dispatches page changes and open/close state.",
  "storybookArgs": {
    "opened": {
      "control": {
        "type": "boolean"
      }
    },
    "companylogouri": {
      "control": {
        "type": "text"
      }
    },
    "companytitle": {
      "control": {
        "type": "text"
      }
    },
    "groups": {
      "control": {
        "type": "text"
      }
    },
    "enablefooter": {
      "control": {
        "type": "select"
      },
      "options": [
        "yes",
        "no",
        ""
      ]
    },
    "offcanvasswitch": {
      "action": "offcanvasswitchEvent"
    },
    "pageChange": {
      "action": "pageChangeEvent"
    },
    "type": {
      "options": [
        "autohide",
        "small",
        "open"
      ],
      "control": {
        "type": "select"
      }
    },
    "navpage": {
      "control": {
        "type": "text"
      }
    },
    "navlinks": {
      "control": {
        "type": "array"
      }
    }
  },
  "styleSetup": {
    "vars": [
      {
        "name": "--hb-offcanvas-host-z",
        "valueType": "number",
        "defaultValue": "1038",
        "description": "Z-index of the host so backdrop/panel stack above following siblings (e.g. layout-mobile shell)."
      },
      {
        "name": "--hb-offcanvas-panel-z",
        "valueType": "number",
        "defaultValue": "1045",
        "description": "Z-index of the sliding panel above the backdrop."
      },
      {
        "name": "--hb-offcanvas-backdrop-z",
        "valueType": "number",
        "defaultValue": "1040",
        "description": "Z-index of the dimmed modal backdrop."
      },
      {
        "name": "--hb-offcanvas-panel-width",
        "valueType": "string",
        "defaultValue": "240px",
        "description": "Drawer width (capped by viewport)."
      },
      {
        "name": "--bulma-scheme-main",
        "valueType": "color",
        "defaultValue": "#ffffff",
        "description": "Panel background fill."
      },
      {
        "name": "--bulma-shadow",
        "valueType": "string",
        "defaultValue": "0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1)",
        "description": "Elevation shadow on the open drawer."
      },
      {
        "name": "--bulma-modal-background-background-color",
        "valueType": "color",
        "defaultValue": "hsla(221, 14%, 4%, 0.86)",
        "description": "Backdrop dim color when `type` is `autohide`."
      }
    ],
    "parts": []
  },
  "contributors": [],
  "htmlSlots": [
    {
      "name": "test",
      "description": "Optional hook slot at the host root for advanced integrations."
    }
  ],
  "i18n": [],
  "examples": [
    {
      "name": "default",
      "data": {
        "opened": true,
        "navlinks": [
          {
            "label": "Home",
            "key": "home",
            "icon": "house-door"
          },
          {
            "label": "Dashboard",
            "key": "dashboard",
            "icon": "speedometer"
          },
          {
            "label": "Settings",
            "key": "settings",
            "icon": "gear"
          },
          {
            "label": "Users",
            "key": "users",
            "icon": "people-fill"
          },
          {
            "label": "Stats",
            "key": "stats",
            "icon": "graph-up"
          }
        ],
        "navpage": "settings",
        "companytitle": "acme corp"
      }
    },
    {
      "name": "closed",
      "description": "Drawer starts closed; same navigation model as default.",
      "data": {
        "opened": false,
        "navlinks": [
          {
            "label": "Home",
            "key": "home",
            "icon": "house-door"
          },
          {
            "label": "Dashboard",
            "key": "dashboard",
            "icon": "speedometer"
          },
          {
            "label": "Settings",
            "key": "settings",
            "icon": "gear"
          }
        ],
        "navpage": "home",
        "companytitle": "Acme Corp"
      }
    },
    {
      "name": "autohide",
      "description": "Autohide variant with backdrop dismiss behavior.",
      "data": {
        "opened": true,
        "type": "autohide",
        "navlinks": [
          {
            "label": "Inbox",
            "key": "inbox",
            "icon": "inbox"
          },
          {
            "label": "Archive",
            "key": "archive",
            "icon": "archive"
          }
        ],
        "navpage": "inbox",
        "companytitle": "Mail"
      }
    },
    {
      "name": "footerAndGroups",
      "description": "Footer slot enabled with grouped nav metadata.",
      "data": {
        "opened": true,
        "type": "small",
        "enablefooter": "yes",
        "groups": [
          {
            "key": "main",
            "label": "Main"
          },
          {
            "key": "admin",
            "label": "Admin"
          }
        ],
        "navlinks": [
          {
            "label": "Overview",
            "key": "overview",
            "icon": "grid",
            "group": "main"
          },
          {
            "label": "Users",
            "key": "users",
            "icon": "people",
            "group": "admin"
          }
        ],
        "navpage": "overview",
        "companytitle": "Console"
      }
    }
  ],
  "iifeIntegrity": "sha384-gKp6jrthZ8SNDgAQozsxHm9DTjeUKQyF8bgFYuwE4hmrZBCBTB7SQ/2cFSDKmKY6",
  "dependencies": [
    {
      "name": "hb-sidenav-link",
      "dependencies": []
    },
    {
      "name": "hb-sidebar-desktop",
      "dependencies": [
        {
          "name": "hb-sidenav-link",
          "dependencies": []
        }
      ]
    }
  ],
  "screenshots": [],
  "licenses": [
    {
      "type": "Apache-2.0",
      "path": "LICENSE.md",
      "cost": 0,
      "currency": "EUR"
    }
  ],
  "readmePath": "README.md",
  "name": "hb-offcanvas",
  "category": "layout",
  "tags": [
    "layout",
    "navigation"
  ],
  "size": {
    "layout": "fullscreen"
  },
  "iifePath": "main.iife.js",
  "repoName": "@htmlbricks/hb-offcanvas",
  "version": "0.76.5"
}