{
  "timestamp": "2026-03-18T10:59:38",
  "compiler": {
    "name": "@stencil/core",
    "version": "4.27.2",
    "typescriptVersion": "5.5.4"
  },
  "components": [
    {
      "filePath": "src/components/mds-header/mds-header.tsx",
      "encapsulation": "shadow",
      "tag": "mds-header",
      "docs": "",
      "docsTags": [
        {
          "name": "part",
          "text": "menu - The container element of the modal"
        },
        {
          "name": "slot",
          "text": "default - Add `mds-header-bar` element/s."
        },
        {
          "name": "slot",
          "text": "menu - Put actions and other contents that will be shown as mobile menu. Add `text string`, `HTML elements` or `components` to this slot."
        }
      ],
      "usage": {},
      "props": [
        {
          "name": "appearance",
          "type": "string",
          "complexType": {
            "original": "string",
            "resolved": "string",
            "references": {}
          },
          "mutable": true,
          "attr": "appearance",
          "reflectToAttr": true,
          "docs": "Sets the appearance of the header bar element when loaded,\nit can be changed depending on how `appearance-set` attribute is set",
          "docsTags": [],
          "default": "'stripe'",
          "values": [
            {
              "type": "string"
            }
          ],
          "optional": false,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "appearanceSet",
          "type": "string | undefined",
          "complexType": {
            "original": "string",
            "resolved": "string | undefined",
            "references": {}
          },
          "mutable": false,
          "attr": "appearance-set",
          "reflectToAttr": true,
          "docs": "Sets the appearance of the header bar element depending on the scroll position\nyou should set three different values: initial appearance, changed appearance and `window.scrollY` threshold\nEs: appearance-set=\"stripe, inline 200\" means the component will start with stripe appearance\nthat will change to inline if the page is scrolled more of 199 pixels",
          "docsTags": [],
          "values": [
            {
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "autoHide",
          "type": "number | undefined",
          "complexType": {
            "original": "number",
            "resolved": "number | undefined",
            "references": {}
          },
          "mutable": false,
          "attr": "auto-hide",
          "reflectToAttr": true,
          "docs": "When the page is scrolled down, the component mds-header-bar is hidden starting\nfrom the `autoHide` attribute's value, then if the page is scrolled up it is shown again",
          "docsTags": [],
          "values": [
            {
              "type": "number"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "backdrop",
          "type": "boolean | undefined",
          "complexType": {
            "original": "boolean",
            "resolved": "boolean | undefined",
            "references": {}
          },
          "mutable": false,
          "attr": "backdrop",
          "reflectToAttr": true,
          "docs": "Sets if the backdrop is shown when the mds-header-bar attribute appearace is set to `inline`",
          "docsTags": [],
          "default": "true",
          "values": [
            {
              "type": "boolean"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "menu",
          "type": "\"all\" | \"desktop\" | \"mobile\" | \"none\"",
          "complexType": {
            "original": "HeaderBarMenuType",
            "resolved": "\"all\" | \"desktop\" | \"mobile\" | \"none\"",
            "references": {
              "HeaderBarMenuType": {
                "location": "import",
                "path": "@type/header-bar",
                "id": "src/type/header-bar.ts::HeaderBarMenuType"
              }
            }
          },
          "mutable": false,
          "attr": "menu",
          "reflectToAttr": true,
          "docs": "Sets the visibility type of the hamburger menu of mds-header-bar",
          "docsTags": [],
          "default": "'mobile'",
          "values": [
            {
              "value": "all",
              "type": "string"
            },
            {
              "value": "desktop",
              "type": "string"
            },
            {
              "value": "mobile",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "nav",
          "type": "\"all\" | \"desktop\" | \"mobile\" | \"none\"",
          "complexType": {
            "original": "HeaderBarNavType",
            "resolved": "\"all\" | \"desktop\" | \"mobile\" | \"none\"",
            "references": {
              "HeaderBarNavType": {
                "location": "import",
                "path": "@type/header-bar",
                "id": "src/type/header-bar.ts::HeaderBarNavType"
              }
            }
          },
          "mutable": false,
          "attr": "nav",
          "reflectToAttr": true,
          "docs": "Sets the visibility type of the navigation menu of mds-header-bar",
          "docsTags": [],
          "default": "'desktop'",
          "values": [
            {
              "value": "all",
              "type": "string"
            },
            {
              "value": "desktop",
              "type": "string"
            },
            {
              "value": "mobile",
              "type": "string"
            },
            {
              "value": "none",
              "type": "string"
            }
          ],
          "optional": false,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "threshold",
          "type": "number",
          "complexType": {
            "original": "number",
            "resolved": "number",
            "references": {}
          },
          "mutable": false,
          "attr": "threshold",
          "reflectToAttr": true,
          "docs": "Sets the threshold margin to trigger hide or show status of the `mds-header-bar` when the page is scrolled",
          "docsTags": [],
          "default": "1",
          "values": [
            {
              "type": "number"
            }
          ],
          "optional": false,
          "required": false,
          "getter": false,
          "setter": false
        },
        {
          "name": "visibility",
          "type": "\"hidden\" | \"visible\" | undefined",
          "complexType": {
            "original": "'hidden' | 'visible'",
            "resolved": "\"hidden\" | \"visible\" | undefined",
            "references": {}
          },
          "mutable": true,
          "attr": "visibility",
          "reflectToAttr": true,
          "docs": "Sets the visibility type of the navigation menu of mds-header-bar",
          "docsTags": [],
          "default": "'visible'",
          "values": [
            {
              "value": "hidden",
              "type": "string"
            },
            {
              "value": "visible",
              "type": "string"
            },
            {
              "type": "undefined"
            }
          ],
          "optional": true,
          "required": false,
          "getter": false,
          "setter": false
        }
      ],
      "methods": [
        {
          "name": "setOpened",
          "returns": {
            "type": "Promise<void>",
            "docs": ""
          },
          "complexType": {
            "signature": "(isOpened?: boolean) => Promise<void>",
            "parameters": [
              {
                "name": "isOpened",
                "type": "boolean",
                "docs": ""
              }
            ],
            "references": {
              "Promise": {
                "location": "global",
                "id": "global::Promise"
              }
            },
            "return": "Promise<void>"
          },
          "signature": "setOpened(isOpened?: boolean) => Promise<void>",
          "parameters": [
            {
              "name": "isOpened",
              "type": "boolean",
              "docs": ""
            }
          ],
          "docs": "",
          "docsTags": []
        }
      ],
      "events": [
        {
          "event": "mdsHeaderClose",
          "detail": "MdsHeaderEventDetail",
          "bubbles": true,
          "complexType": {
            "original": "MdsHeaderEventDetail",
            "resolved": "MdsHeaderEventDetail",
            "references": {
              "MdsHeaderEventDetail": {
                "location": "import",
                "path": "./meta/event-detail",
                "id": "src/components/mds-header/meta/event-detail.ts::MdsHeaderEventDetail"
              }
            }
          },
          "cancelable": true,
          "composed": true,
          "docs": "Emits when the component is closed",
          "docsTags": []
        },
        {
          "event": "mdsHeaderVisibilityChange",
          "detail": "MdsHeaderVisibilityEventDetail",
          "bubbles": true,
          "complexType": {
            "original": "MdsHeaderVisibilityEventDetail",
            "resolved": "MdsHeaderVisibilityEventDetail",
            "references": {
              "MdsHeaderVisibilityEventDetail": {
                "location": "import",
                "path": "./meta/event-detail",
                "id": "src/components/mds-header/meta/event-detail.ts::MdsHeaderVisibilityEventDetail"
              }
            }
          },
          "cancelable": true,
          "composed": true,
          "docs": "Emits when the component mds-header-bar is shown or hidden",
          "docsTags": []
        }
      ],
      "listeners": [],
      "styles": [
        {
          "name": "--mds-header-backdrop-background-image",
          "annotation": "prop",
          "docs": "Sets the background-image of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `medium`"
        },
        {
          "name": "--mds-header-backdrop-filter",
          "annotation": "prop",
          "docs": "Sets the backdrop-filter of the backdrop element visibile when the component attribute `appearance` is set to `inline`, by default is shown when mds-pref-consumtion is set to `high`"
        },
        {
          "name": "--mds-header-backdrop-height",
          "annotation": "prop",
          "docs": "Sets the height of the backdrop element visibile when the component attribute `appearance` is set to `inline`"
        },
        {
          "name": "--mds-header-backdrop-show",
          "annotation": "prop",
          "docs": "Sets if the backdrop element is visible or not, only visible when the component attribute `appearance` is set to `inline`"
        },
        {
          "name": "--mds-header-color",
          "annotation": "prop",
          "docs": "Sets the text color of the header and the mobile toggler icon"
        },
        {
          "name": "--mds-header-hidden-bar-translate-inline",
          "annotation": "prop",
          "docs": "Sets translateY value for the appearance inline `mds-header-bar` element"
        },
        {
          "name": "--mds-header-hidden-bar-translate-stripe",
          "annotation": "prop",
          "docs": "Sets translateY value for the appearance stripe `mds-header-bar` element"
        },
        {
          "name": "--mds-header-icon-color",
          "annotation": "prop",
          "docs": "Sets the color of the icon toggler"
        },
        {
          "name": "--mds-header-inline-margin",
          "annotation": "prop",
          "docs": "Sets inline margin of `the mds-header-bar` when attribute `appearance` is set to `inline`"
        },
        {
          "name": "--mds-header-inline-margin-mobile",
          "annotation": "prop",
          "docs": "Sets inline margin on mobile viewport of `the mds-header-bar` when attribute `appearance` is set to `inline`"
        },
        {
          "name": "--mds-header-z-index",
          "annotation": "prop",
          "docs": "Sets the z-index of the modal"
        }
      ],
      "slots": [
        {
          "name": "default",
          "docs": "Add `mds-header-bar` element/s."
        },
        {
          "name": "menu",
          "docs": "Put actions and other contents that will be shown as mobile menu. Add `text string`, `HTML elements` or `components` to this slot."
        }
      ],
      "parts": [
        {
          "name": "menu",
          "docs": "The container element of the modal"
        }
      ],
      "dependents": [],
      "dependencies": [],
      "dependencyGraph": {}
    }
  ],
  "typeLibrary": {
    "src/type/header-bar.ts::HeaderBarMenuType": {
      "declaration": "export type HeaderBarMenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
      "docstring": "",
      "path": "src/type/header-bar.ts"
    },
    "src/type/header-bar.ts::HeaderBarNavType": {
      "declaration": "export type HeaderBarNavType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
      "docstring": "",
      "path": "src/type/header-bar.ts"
    },
    "src/components/mds-header/meta/event-detail.ts::MdsHeaderEventDetail": {
      "declaration": "export interface MdsHeaderEventDetail {\n  bar: HTMLMdsHeaderBarElement\n}",
      "docstring": "",
      "path": "src/components/mds-header/meta/event-detail.ts"
    },
    "src/components/mds-header/meta/event-detail.ts::MdsHeaderVisibilityEventDetail": {
      "declaration": "export interface MdsHeaderVisibilityEventDetail {\n  visibility: boolean\n}",
      "docstring": "",
      "path": "src/components/mds-header/meta/event-detail.ts"
    }
  }
}